CODEWITHSUNDEEP
c#wpfxaml
Joel
Joel

Reputation: 123

C# WPF Popup placement = center and on top of element

im using a button which contains a popup control. Now i want the popup control to align on top of the button and it should also be centered.

<Style x:Key="ButtonStyle2" TargetType="{x:Type Button}">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Padding" Value="2" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Padding="{TemplateBinding Padding}" UseLayoutRounding="True">
                            <Grid>
                                <Popup x:Name="popup" Placement="Top" AllowsTransparency="True" PopupAnimation="Slide" HorizontalOffset="-7" IsOpen="False">
                                    <DockPanel Width="55" Background="#01FFFFFF">
                                        <Button x:Name="DeleteButton" DockPanel.Dock="Top" Margin="0,0,0,5" Style="{DynamicResource ButtonStyle3}" Background="Transparent" BorderThickness="0" Width="30" Height="30" Click="DeleteButton_Click" />
                                        <Button x:Name="EditButton" DockPanel.Dock="Top" Margin="0,0,0,5"  Style="{DynamicResource ButtonStyle4}" Background="Transparent" BorderThickness="0" Width="30" Height="30" Click="EditButton_Click" />
                                        <Button x:Name="AddButton" DockPanel.Dock="Bottom" Margin="0,0,0,5"  Style="{DynamicResource ButtonStyle5}" Background="Transparent" BorderThickness="0" Width="30" Height="30" Click="AddButton_Click" />
                                    </DockPanel>
                                </Popup>
                                <Image x:Name="add_img" Source="img\menu.png" RenderOptions.BitmapScalingMode="Fant" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="True">
                                    <Image.RenderTransform>
                                        <RotateTransform Angle="0" />
                                    </Image.RenderTransform>
                                </Image>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <EventTrigger RoutedEvent="Button.Click">
                                <BeginStoryboard Storyboard="{StaticResource HidePopup}" />
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Button.MouseEnter">
                                <BeginStoryboard Storyboard="{StaticResource ShowPopup}" />
                                <BeginStoryboard>
                                    <Storyboard BeginTime="00:00:00.000" Duration="00:00:00.300">
                                        <DoubleAnimation Storyboard.TargetName="add_img" Storyboard.TargetProperty="RenderTransform.Angle" From="0" To="180" BeginTime="00:00:00.000" Duration="00:00:00.200" AutoReverse="False" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Button.MouseLeave">
                                <BeginStoryboard Storyboard="{StaticResource HidePopup}" />
                                <BeginStoryboard>
                                    <Storyboard BeginTime="00:00:00.000" Duration="00:00:00.300">
                                        <DoubleAnimation Storyboard.TargetName="add_img" Storyboard.TargetProperty="RenderTransform.Angle" From="180" To="0" BeginTime="00:00:00.000" Duration="00:00:00.200" AutoReverse="False" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

The code snippet works, but if I use another computer to compile my code, the popup isn't aligned anymore. Is there a better way to do this?

Upvotes: 1

Views: 813

Answers (1)

user5109611
user5109611

Reputation:

Have you forgotten set the PlacementTarget attribute of the Popup?

Hope that this helps:

<Popup ... PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"></Popup>

Upvotes: 1

Related Questions