Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Popup positioning in wpf using c#

Tags:

c#

wpf

xaml

popup

I have placed a popup on a button mouseover.Each time when i mouse over that button my custom designed popup is being showed perfectly.Butit doesn't point the button perfectly. How to do so ..? Now my popup looks like

enter image description here

I want that arrow mark to point that help button How to acheive it..

Here is my code for the button 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 the custom usercontrol xaml which amn calling in popup

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

like image 773
Dah Sra Avatar asked Apr 22 '16 05:04

Dah Sra


1 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>
like image 50
Kylo Ren Avatar answered Oct 13 '22 22:10

Kylo Ren