0

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.

enter image description here

Please guide me. Thanks.

Metallic Skeleton
  • 607
  • 6
  • 27
  • Are you using a specific a specific assembly or tool, or are you trying to create your own style? – Il Vic Feb 22 '19 at 10:24
  • I am planning to create my own style as I could not find any suitable tools. Please recommend if you find anything helpful. – Metallic Skeleton Feb 22 '19 at 10:31
  • Sure! try to give a look to [Microsoft.Expression.Drawing](https://www.nuget.org/packages/Microsoft.Expression.Drawing). Maybe it can be suitable for your purpose. – Il Vic Feb 22 '19 at 10:38

2 Answers2

0

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>
Denis Schaf
  • 2,478
  • 1
  • 8
  • 17
0

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>

enter image description here

mm8
  • 163,881
  • 10
  • 57
  • 88