1

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

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

2 回答 2

1

只需使用TranslateTransform动画。确保使用RenderTransform而不是实际更改布局，当您和 Image 的父LayoutTransform级是LayoutTransformTextBlockStackPanel

因此，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”或您想要的任何值。

于 2013-09-10T15:15:18.637 回答
0

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

于 2013-09-10T15:11:46.593 回答