Geek Answers Handbook

Popup positioning in wpf using c #

I placed a popup on the mouseover button. Every time I click on this button, my custom popup is displayed perfectly. But the button does not indicate the button perfectly. How to do it..? Now my popup looks like

enter image description here

I want the arrow pointer to point to the help button . How to do it.

Here is my button code and popup in xaml

<telerik:RadButton Name="btnH" Grid.Column="1" HorizontalAlignment="Left" Margin="444,56,0,0" Grid.Row="2" VerticalAlignment="Top" 
                 Width="23" Height="23" BorderThickness="6" BorderBrush="#4E4E4E">
            <Image Source="Images/help.png" />
            <telerik:RadButton.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <BeginStoryboard>
                        <Storyboard TargetName="TooltipPopup" TargetProperty="IsOpen">
                                <BooleanAnimationUsingKeyFrames  FillBehavior="HoldEnd">
                                    <DiscreteBooleanKeyFrame KeyTime="00:00:00"  Value="True" />
                                </BooleanAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>

                                                                                                                             

and below is a custom xaml user control that calls a call in a popup window

<UserControl
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="WPFTest.UCToolTip" 
         mc:Ignorable="d" Height="231.493" Width="362.075"
         Background="Transparent"  >
<UserControl.Resources>
    <Style TargetType="{x:Type Hyperlink}">
                 <Setter Property="TextBlock.TextDecorations" Value="{x:Null}" />
    </Style>
</UserControl.Resources>
<Grid Margin="10,0,0,0">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid Background="red" Margin="0,0,182,133">            

    </Grid>
    <Polygon
    Points="0.5,0 15,0, 0,30" Stroke="Orange" Fill="Orange" Margin="0,98,0,101" />
</Grid>

+4
source share
4 answers

use this style for your Popup:

<Style TargetType="Popup">
                <Style.Triggers>
                    <Trigger Property="IsOpen" Value="true">
                        <Setter Property="PlacementTarget" Value="{Binding ElementName=btnH }" />
                        <Setter Property="Placement" Value="Top" />
                        <Setter Property="VerticalOffset" Value="-5" />
                        <Setter Property="HorizontalOffset" Value="5" />
                    </Trigger>
                </Style.Triggers>
            </Style>
+1
source

I think Kilo pointed out the correct answer. If you get rid of the field in usercontrol, it should work.

This is the code for usercontrol.

<UserControl
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="WpfTest.UCToolTip" 
         mc:Ignorable="d" Height="130" Width="180"
         Background="Transparent"  >
    <UserControl.Resources>
        <Style TargetType="{x:Type Hyperlink}">
            <Setter Property="TextBlock.TextDecorations" Value="{x:Null}" />
        </Style>
    </UserControl.Resources>
    <Grid Margin="10,0,0,0">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid Background="red" Margin="0,0,0,32">

        </Grid>
        <Polygon Points="0.5,0 15,0, 0,30" Stroke="Orange" Fill="Orange" Margin="0,98,0,0" />
    </Grid>
</UserControl>

And the code for the window.

<Window x:Class="WpfTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:uc="clr-namespace:WpfTest"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="Popup">
            <Style.Triggers>
                <Trigger Property="IsOpen" Value="true">
                    <Setter Property="PlacementTarget" Value="{Binding ElementName=btnH }" />
                    <Setter Property="Placement" Value="Top" />
                    <Setter Property="VerticalOffset" Value="0" />
                    <Setter Property="HorizontalOffset" Value="145" />
                </Trigger>
            </Style.Triggers>
        </Style>        
    </Window.Resources>    
    <Grid>
        <telerik:RadButton Name="btnH" Grid.Column="1" HorizontalAlignment="Left" Margin="300,175,0,0" Grid.Row="2" VerticalAlignment="Top" 
                 Width="50" Height="23" BorderThickness="6" BorderBrush="#4E4E4E">
            <Image Source="Images/help.png" />
            <telerik:RadButton.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard TargetName="TooltipPopup" TargetProperty="IsOpen">
                            <BooleanAnimationUsingKeyFrames  FillBehavior="HoldEnd">
                                <DiscreteBooleanKeyFrame KeyTime="00:00:00"  Value="True" />
                            </BooleanAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>

                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard>
                        <Storyboard TargetName="TooltipPopup" TargetProperty="IsOpen">
                            <BooleanAnimationUsingKeyFrames  FillBehavior="HoldEnd">
                                <DiscreteBooleanKeyFrame KeyTime="00:00:00"  Value="False" />
                            </BooleanAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </telerik:RadButton.Triggers>

        </telerik:RadButton>

        <Popup x:Name="TooltipPopup" AllowsTransparency="True">
            <StackPanel>
                <uc:UCToolTip></uc:UCToolTip>
            </StackPanel>
        </Popup>

    </Grid>
</Window>
0
source

Here is a small balloon library for WPF, which I think does what you want.

Using:

<geometry:Balloon ConnectorAngle="25"
                  CornerRadius="15"
                  PlacementOptions="Bottom, Center"
                  PlacementTarget="{Binding ElementName=Target}">
     <!--  content here  -->
</geometry:Balloon>
0
source

More articles:


All Articles