1

これは、再利用可能な単純な戻るボタンをアニメーション化するために現在使用しているコードです。問題は、同じプロパティを持つ別のボタンも必要ですが、画面に応じてテキストを指定できる可能性があることです。使用済み。

効果とテキストを表示するには、何を追加する必要がありますか？（テキストを追加しようとすると、ボタンが完全に消えてしまいます。）

<UserControl x:Class="SantaBarbara.Resources.BackButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             >
    <Button Width="116" Height="119" Canvas.Top="57" BorderThickness="0" BorderBrush="Transparent">
        <Button.Style>            
            <Style TargetType="{x:Type Button}">
                <Style.Resources>
                    <SolidColorBrush x:Key="BackgroundBrush" Color="#990050" Opacity="0.50" />                    
                </Style.Resources>
                <Setter Property="OverridesDefaultStyle" Value="True"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">

                            <ControlTemplate.Resources>
                                <Storyboard x:Key="MouseOverAnimation">
                                    <DoubleAnimation Duration="0:0:0.5" To="0.9" Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Opacity)" Storyboard.TargetName="Border" />
                                </Storyboard>
                                <Storyboard x:Key="MouseOutAnimation">
                                    <DoubleAnimation Duration="0:0:0.5" To="0.5" Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Opacity)" Storyboard.TargetName="Border" />
                                </Storyboard>
                            </ControlTemplate.Resources>

                            <Grid>
                                <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" >
                                    <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}"  Content="{TemplateBinding Content}" HorizontalAlignment="Center" Margin="{TemplateBinding Padding}"/>
                                </Border>
                            </Grid>

                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Trigger.EnterActions>
                                        <BeginStoryboard Storyboard="{StaticResource MouseOverAnimation}" />
                                    </Trigger.EnterActions>
                                    <Trigger.ExitActions>
                                        <BeginStoryboard Storyboard="{StaticResource MouseOutAnimation}" />
                                    </Trigger.ExitActions>
                                </Trigger>
                            </ControlTemplate.Triggers>

                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Button.Style>        
    </Button>
</UserControl>
4

1 に答える 1

1

少し追加する必要があります。Buttonのデフォルトを設定しBackgroundますStyle。

あなたはBrushリソースとしてあなたを持っています、それをデフォルトのスタイルセッターに設定する必要があります。

何かのようなもの：

<Style TargetType="{x:Type Button}">
  <Style.Resources>
    <SolidColorBrush x:Key="BackgroundBrush"
                     Opacity="0.50"
                     Color="#990050" />
  </Style.Resources>
  <Setter Property="OverridesDefaultStyle"
          Value="True" />
  <Setter Property="Background"
          Value="{StaticResource BackgroundBrush}" />
  ...

次に、を抽出しStyle、を指定して、必要なx:Keyボタンに適用できます。試してみたところ、アニメーションで問題なく動作します

于 2013-03-26T18:51:29.367 に答える