0

ここにボタンがあり、アニメーションのカスタムスタイルがいくつかありますが、そのうちの6つがあり、各ボタンに41行あるxaml全体を見るのは嫌です。

<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 に答える