2015-07-13 119 views
1

即时通讯使用包含弹出控件的按钮。现在我想让弹出控件在按钮顶部对齐,并且它也应该居中。C#WPF弹出式布局=中心和元素顶部

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

该代码片段有效,但如果我使用另一台计算机编译我的代码,弹出窗口不再对齐。有一个更好的方法吗?

回答

1

你忘记了设置Popup的PlacementTarget属性吗?

希望这有助于:

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

感谢您的答复。我会尝试你的代码片段,但我不知道这是否会有所帮助。 – Joel

+2

好的。如果它失败了,也许你应该给我们Button ControlTemplate的完整代码来帮助测试 – 2015-07-14 09:31:56

+0

我已经编辑了最高职位。也许你现在可以看看。 – Joel