1

私は WPF を初めて使用し、多くの記事やビデオを見てきましたが、解決策を見つけることができませんでした。私が持っているのは、スタックパネル内に画像とテキストを表示するボタンです。ボタンが押されたときにテキストブロックのみを1ピクセル右と下に移動させたいのですが、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>
4

2 に答える 2

1

TranslateTransformアニメーションを使用するだけです。あなたRenderTransformと画像LayoutTransformのLayoutTransform親がTextBlockStackPanel

したがって、定義を次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 に答える