WPF 中的标注样式弹出窗口
Callout style popup in WPF
在我的 WPF 应用程序中,我正在尝试实现 Callout 样式的 Popup。
我得到了一些参考,但仍然可以找到一个很好的解决方案。
请找到我要实现的图像。
它应该是一个弹出窗口 window。初始位置应指示父按钮。但是因为它是 window 所以可以从它的位置拖动。
请指导我。
谢谢
这应该给你一个大致的开始方向:
<Button>
<Button.ToolTip>
<ToolTip Placement="Right">
<ToolTip.Style>
<Style TargetType="ToolTip">
<Setter Property="Background" Value="SkyBlue"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolTip}">
<Grid>
<Polygon Points="10,0 0,5, 10,10" Fill="{TemplateBinding Background}" VerticalAlignment="Center"/>
<Border Margin="10,0,0,0" CornerRadius="5" Background="{TemplateBinding Background}" Name="button" Width="100">
<TextBlock>
<Run>This</Run>
<LineBreak/>
<Run>is</Run>
<LineBreak/>
<Run>an</Run>
<LineBreak/>
<Run> avesome tooltip</Run>
</TextBlock>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToolTip.Style>
</ToolTip>
</Button.ToolTip>
</Button>
您可以使用 Path
:
<ToggleButton x:Name="toggleButton" Content="Button" Margin="100" />
<Popup IsOpen="{Binding IsChecked, ElementName=toggleButton}"
PlacementTarget="{Binding ElementName=toggleButton}"
Placement="Right"
StaysOpen="False"
AllowsTransparency="True"
VerticalOffset="-90">
<Grid>
<Border Background="Blue" BorderThickness="1" BorderBrush="Black"
Width="200" Height="200" Margin="24,0,0,0">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White">...</TextBlock>
</Border>
<Path StrokeThickness="1" Stroke="Black" Fill="Blue" VerticalAlignment="Center">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="25,0">
<PolyLineSegment Points="0,25 25,50"/>
<LineSegment Point="25,0" IsStroked="False"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
</Grid>
</Popup>
在我的 WPF 应用程序中,我正在尝试实现 Callout 样式的 Popup。 我得到了一些参考,但仍然可以找到一个很好的解决方案。
请找到我要实现的图像。 它应该是一个弹出窗口 window。初始位置应指示父按钮。但是因为它是 window 所以可以从它的位置拖动。
请指导我。 谢谢
这应该给你一个大致的开始方向:
<Button>
<Button.ToolTip>
<ToolTip Placement="Right">
<ToolTip.Style>
<Style TargetType="ToolTip">
<Setter Property="Background" Value="SkyBlue"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolTip}">
<Grid>
<Polygon Points="10,0 0,5, 10,10" Fill="{TemplateBinding Background}" VerticalAlignment="Center"/>
<Border Margin="10,0,0,0" CornerRadius="5" Background="{TemplateBinding Background}" Name="button" Width="100">
<TextBlock>
<Run>This</Run>
<LineBreak/>
<Run>is</Run>
<LineBreak/>
<Run>an</Run>
<LineBreak/>
<Run> avesome tooltip</Run>
</TextBlock>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToolTip.Style>
</ToolTip>
</Button.ToolTip>
</Button>
您可以使用 Path
:
<ToggleButton x:Name="toggleButton" Content="Button" Margin="100" />
<Popup IsOpen="{Binding IsChecked, ElementName=toggleButton}"
PlacementTarget="{Binding ElementName=toggleButton}"
Placement="Right"
StaysOpen="False"
AllowsTransparency="True"
VerticalOffset="-90">
<Grid>
<Border Background="Blue" BorderThickness="1" BorderBrush="Black"
Width="200" Height="200" Margin="24,0,0,0">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White">...</TextBlock>
</Border>
<Path StrokeThickness="1" Stroke="Black" Fill="Blue" VerticalAlignment="Center">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="25,0">
<PolyLineSegment Points="0,25 25,50"/>
<LineSegment Point="25,0" IsStroked="False"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
</Grid>
</Popup>