Callout style popup in WPF

Question

In my WPF application, I am trying to implement a Callout style Popup. I got some reference but still could a good solution.

Please find the image what I am trying to implement. It should be a popup window. The initial position should be indicating the parent button. But as it is a window so can be dragged from its location.

Please guide me. Thanks.

Answer 1

You could use a 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

this should give you a general direction to start from:

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