WPF故事板 - 偏移文本块

Question

我是WPF的新手并且一直关注很多文章和视频，但我一直无法找到解决方案。我所拥有的是一个在堆叠面板中显示图像和文本的按钮。我想只在按下按钮时将文本块向右移动一个像素向下移动，但我似乎无法找到一种仅定位TextBlock的方法。任何帮助将不胜感激。致谢

<Style x:Key="appFlatButtonLarge" TargetType="{x:Type localUI:ImageButton}">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="MinHeight" Value="23"/>
    <Setter Property="MinWidth" Value="75"/>
    <Setter Property="Foreground" Value="{StaticResource appPrimaryBackColorDark}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type localUI:ImageButton}">
                <Border Name="Border" BorderBrush="LightGray" BorderThickness="1" Background="White" >
                    <StackPanel Name="Panel" Height="Auto" Orientation="Horizontal" Background="Transparent">
                        <Image Name="ibImage" Source="{TemplateBinding ImageSource}" Margin="5" Width="Auto" Height="Auto" Stretch="None" RenderOptions.BitmapScalingMode="NearestNeighbor" RenderOptions.EdgeMode="Aliased"/>
                        <TextBlock Name="ibTextBlock" Text="{TemplateBinding Content}" HorizontalAlignment="Left" FontWeight="Bold"  Margin="5,0,0,0" VerticalAlignment="Center" FontSize="12" />
                    </StackPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsKeyboardFocused" Value="true">
                        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource appPrimaryBackColorDark}" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="Panel" Property="Background" Value="{StaticResource appButtonBackColorPressed}" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource appPrimaryBackColorDark}" />
                        <Setter TargetName="ibImage" Property="Source" Value="{Binding Path=ImageSourceHot, RelativeSource={RelativeSource AncestorType={x:Type localUI:ImageButton}} }" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter TargetName="Border" Property="BorderBrush" Value="Green" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

只需使用TranslateTransform动画即可。确保使用RenderTransform而非LayoutTransform因为LayoutTransform实际上会更改布局，当TextBlock和图片的父级为{{1}时，这可能不合适}

如果我将StackPanel定义切换为：

，请在Style中

ControlTemplate

你应该得到你想要的东西。

注意

在我设置的动画步骤中

<ControlTemplate TargetType="{x:Type localUI:ImageButton}">
  <Border x:Name="Border"
          Background="White"
          BorderBrush="LightGray"
          BorderThickness="1">
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal" />
        <VisualState x:Name="MouseOver" />
        <VisualState x:Name="Pressed">
          <Storyboard>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ibTextBlock"
                                            Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
              <EasingDoubleKeyFrame KeyTime="0"
                                    Value="5" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ibTextBlock"
                                            Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
              <EasingDoubleKeyFrame KeyTime="0"
                                    Value="5" />
            </DoubleAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Disabled" />
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <StackPanel x:Name="Panel"
                Height="Auto"
                Background="Transparent"
                Orientation="Horizontal">
      <Image Name="ibImage"
              Width="Auto"
              Height="Auto"
              Margin="5"
              RenderOptions.BitmapScalingMode="NearestNeighbor"
              RenderOptions.EdgeMode="Aliased"
              Source="{TemplateBinding ImageSource}"
              Stretch="None" />
      <TextBlock x:Name="ibTextBlock"
                  Margin="5,0,0,0"
                  HorizontalAlignment="Left"
                  VerticalAlignment="Center"
                  FontSize="12"
                  FontWeight="Bold"
                  RenderTransformOrigin="0.5,0.5"
                  Text="{TemplateBinding Content}">
        <TextBlock.RenderTransform>
          <TransformGroup>
            <ScaleTransform />
            <SkewTransform />
            <RotateTransform />
            <TranslateTransform />
          </TransformGroup>
        </TextBlock.RenderTransform>
      </TextBlock>
    </StackPanel>
  </Border>
  <ControlTemplate.Triggers>
  ...

您可以将值更改为“1”或任何您想要的值。

Answer 2

您可以使用更改BorderBrush的相同触发器更改TextBlock的Margin-Property。 假设您最初设置Margin =“2,2,2,2”，然后在按下按钮时将其设置为“3,2,1,2”。 你的TextBlock将“移动”1/96英寸（通常，你在WPF中没有像素）。 如果需要，您还可以使用负边距。