WPF 情节提要 - 偏移文本块

本文关键字:文本 WPF | 更新日期: 2023-09-27 18:30:52

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

WPF 情节提要 - 偏移文本块

只需使用TranslateTransform动画。 确保使用RenderTransform而不是LayoutTransform,因为LayoutTransform实际上会更改布局,当TextBlock和图像的父级是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>
  ...

你应该得到你所追求的。

注意

在我设置的两个动画步骤中

<EasingDoubleKeyFrame KeyTime="0" Value="5" />

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

您可以使用更改 BorderBrush 的相同触发器更改 TextBlock 的边距属性。假设您最初设置 Margin ="2,2,2,2",然后在按下按钮时将其设置为 "3,2,1,2"。文本块将"移动"1/96 英寸(通常,您不会在 WPF 中像素化)。如果需要,您还可以使用负边距。