WPF中的标注样式弹出窗口

Question

在我的WPF应用程序中，我正在尝试实现Callout样式的Popup。我得到了一些参考，但仍然可以很好的解决方案。

请找到我想要实现的图像。它应该是一个弹出窗口。初始位置应指示父按钮。但由于它是一个窗口，所以可以从它的位置拖出来。

请指导我。谢谢。

Answer 1

你可以使用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>

Answer 2

这应该给你一个大致的方向来开始：

     <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>