0

次の XAML を使用してベクター イメージ ボタンを作成し、マウス ホバー時にアニメーションで不透明度を変更します。ボタンのスタイルは次のとおりです。

<Style x:Key="IconButtonStyle" TargetType="Button">
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="IsTabStop" Value="True" />
    <Setter Property="Focusable" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>                                       
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ContentPresenter">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1.0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ContentPresenter">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0.6"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <ContentPresenter x:Name="ContentPresenter" 
                                      ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" 
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      Margin="{TemplateBinding Padding}" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

以下はその使用例です:-

<Button Width="40" Height="40" Style="{StaticResource IconButtonStyle}">
    <Path Width="30" Height="30" Style="{StaticResource MetroButtonRightStyle}" Fill="Red" />
</Button>

のPathスタイルは次のようになります。

<Style x:Key="MetroButtonRightStyle" TargetType="{x:Type Path}">
    <Setter Property="Stretch" Value="Fill" />
    <Setter Property="Data" Value="{StaticResource MetroButtonRightGeometry}" />
</Style>

MetroButtonRightGeometry( Data プロパティで指定されたリソースは<Geometry>、サイズのためにここには含めていません)。

ストーリーボードを変更して、不透明度ではなく画像の色を変更したいのですが、ストーリーボード内からPathのFillプロパティにアクセスできないようです。または、現在の形式でも可能かどうか. 助言がありますか？

アップデート

視覚状態のストーリーボードをColorAnimationUsingKeyFramesそのように変更することで解決策を見つけました (TargetProperty に注意してください!):-

<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.Content).(Path.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ContentPresenter">
    <EasingColorKeyFrame KeyTime="0" Value="Gold" />
</ColorAnimationUsingKeyFrames>

そして、このように私のパスにa を含めFillます:-

<Path Width="30" Height="30" Style="{StaticResource MetroButtonRightStyle}" Fill="{StaticResource SomeSolidBrush}" />

ただし、基本的に無視される Fill を含めなければならないのは少しハックな気がしますが、ストーリーボードの TargetProperty に「フック」を提供するためだけです。これがないと、「'Fill' プロパティがパス '{0}.{1}.{2}' の DependencyObject を指していません」というエラーが表示されます。

4

1 に答える 1

0

ストーリーボードの代わりにトリガーを使用するこのソリューションを思いつきました。コントロール テンプレート内にをPath配置すると、ボタンのマークアップもすっきりします。Button のContentプロパティを使用して、アイコン、つまり に適用するジオメトリを指定しますPath。

うまくいくようですが、相対的な WPF 初心者として、私のソリューションに関するコメントを歓迎します。

スタイル：-

<Style x:Key="IconButtonStyle" TargetType="Button">
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="IsTabStop" Value="True" />
    <Setter Property="Focusable" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="Transparent" Padding="{TemplateBinding Padding}">
                    <Path x:Name="buttonPath" Fill="Blue" Style="{TemplateBinding Content}" />
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="buttonPath" Property="Fill" Value="Red"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

使用例：-

<Button Width="40" Height="40" Style="{StaticResource IconButtonStyle}" Content="{StaticResource MetroButtonRightStyle}" />
于 2013-01-23T13:30:52.863 に答える