Question

我目前正在为WPF应用程序实现设计。

我在其中一个页面上有一个数字键盘，数字0 - 9位于网格内。为了不为每个按钮内联样式，我为这个按钮类型创建了一个样式。

该按钮包含两个项目：图像和文本块。

图像是一个小型Svg图像，看起来像金属手机按钮。 TextBlock只是每个按钮的数字0..9。

现在，当按下按钮时，我试图让按钮将其图像旋转180度。我可以让整个按钮在MouseOver上旋转，但不能只在Image里面旋转......

这是整个按钮在MouseOver上旋转的样式：

        <Style x:Key="NumericKeypadButton" TargetType="Button">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Border Background="{TemplateBinding Background}">
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                            </Border>
                            <Image x:Name="MyRotation" Stretch="Fill" Source="{svgc:SvgImage Source=/Resources/Svg/keypad_key.svg}" RenderTransformOrigin=".5,.5">
                                <Image.RenderTransform>
                                    <RotateTransform Angle="0" />
                                </Image.RenderTransform>
                            </Image>
                            <TextBlock HorizontalAlignment="Center" Margin="0,8,0,0" Style="{DynamicResource Lato}" FontSize="80" Text="1" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <RotateTransform Angle="180" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

Answer 1

你可以在“按下”VisualState中进行旋转：

<Style x:Key="NumericKeypadButton" TargetType="Button">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="Disabled"/>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="rotation" 
                                        Storyboard.TargetProperty="Angle"
                                        To="180" Duration="0"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Border Background="{TemplateBinding Background}">
                        <ContentPresenter
                            HorizontalAlignment="Center" 
                            VerticalAlignment="Center" />
                    </Border>
                    <Image Stretch="Fill"
                        Source="{svgc:SvgImage Source=/Resources/Svg/keypad_key.svg}"
                        RenderTransformOrigin=".5,.5">
                        <Image.RenderTransform>
                            <RotateTransform x:Name="rotation" Angle="0" />
                        </Image.RenderTransform>
                    </Image>
                    <TextBlock HorizontalAlignment="Center"
                               Margin="0,8,0,0" FontSize="80" Text="1" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

如何在WPF中使用样式按下时旋转按钮图像

1 个答案: