0

我在这里有我的按钮，它有一些动画自定义样式，但我有 6 个，我讨厌看整个 xaml，每个按钮有 41 行

<Button Width="250" Height="120" HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="btnShutdown" IsDefault="False" BorderThickness="2">
    <Grid VerticalAlignment="Top" HorizontalAlignment="Left" Height="120" Width="250" Background="Red">
        <Image Grid.ColumnSpan="2" Grid.RowSpan="2" Height="120" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="Fill" Width="120" Source="/SystemPowerShortcuts;component/image_res/shutdown.png" />
        <TextBlock Height="19" HorizontalAlignment="Left" Margin="14,95,0,6" Text="Shutdown" VerticalAlignment="Center" FontSize="12" Width="66" Foreground="White" FontWeight="Normal" />
    </Grid>
    <Button.RenderTransform>
        <RotateTransform x:Name="btnShutdown_Transform" Angle="0" />
    </Button.RenderTransform>
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="btnShutdown_Transform"
                        Storyboard.TargetProperty="Angle"
                        To="-1" Duration="0:0:0.1" FillBehavior="HoldEnd" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="btnShutdown_Transform"
                        Storyboard.TargetProperty="Angle"
                        To="-5" Duration="0:0:0.1" FillBehavior="HoldEnd" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Button.MouseLeave">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="btnShutdown_Transform"
                        Storyboard.TargetProperty="Angle"
                        To="0" Duration="0:0:0.3" FillBehavior="HoldEnd" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

你如何将它转换为资源，所以我没有很长的 xaml 代码？

按钮具有自定义图像和文本，但具有相同的动画

4

2 回答 2

0

创建一个资源字典（添加新项目 -> 资源字典），然后为您的按钮制作样式和模板，如下所示：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="ButtonStyle" TargetType="Button">
        <Setter Property="Height" Value="120" />
        <Setter Property="Width" Value="250" />
        <Setter Property="RenderTransform">
            <Setter.Value>
                <RotateTransform x:Name="btnTransform" Angle="0" />
            </Setter.Value>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border BorderThickness="2" BorderBrush="Black" Background="Red">
                        <Grid VerticalAlignment="Top" HorizontalAlignment="Left"
                              Height="120" Width="250">
                            <Image Grid.ColumnSpan="2" Grid.RowSpan="2" Height="120"
                                   VerticalAlignment="Center"
                                   HorizontalAlignment="Center" Stretch="Fill"
                                   Width="120"
                                   Source="/SystemPowerShortcuts;component/image_res/shutdown.png" />
                            <TextBlock Height="19" HorizontalAlignment="Left"
                                       Margin="14,95,0,6" Text="Shutdown"
                                       VerticalAlignment="Center" FontSize="12"
                                       Width="66" Foreground="White"
                                       FontWeight="Normal" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="Button.MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetName="btnTransform"
                            Storyboard.TargetProperty="Angle"
                            To="-1" Duration="0:0:0.1" FillBehavior="HoldEnd" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetName="btnTransform"
                            Storyboard.TargetProperty="Angle"
                            To="-5" Duration="0:0:0.1" FillBehavior="HoldEnd" />
                    </Storyboard>
                </BeginStoryboard>
             </EventTrigger>
            <EventTrigger RoutedEvent="Button.MouseLeave">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetName="btnShutdown_Transform"
                            Storyboard.TargetProperty="Angle"
                            To="0" Duration="0:0:0.3" FillBehavior="HoldEnd" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

然后将您的资源字典添加到您的 App.xaml 文件中：

<Application ...>
    <Application.Resources>
        <ResourceDictionary Source="FileNameHere.xaml"/>
    </Application.Resources>
</Application>

然后为每个按钮放置

<Button Style="{DynamicResource ButtonStyle}" ... />
于 2012-06-21T00:22:24.120 回答
0

你最好创建一个自定义控件。通过这种方式，您可以设置依赖属性来控制图像的来源等。如果您只是将其设置为资源字典中的样式，那么您会使用相同的图像等。请参阅这篇文章以了解如何做到这一点。

于 2012-06-21T01:21:43.040 回答