Background を Black に、Foreground を White に反転する VisualStateManager MouseOver 状態を含む Style の ControlTemplate を使用して、Button のスタイルを変更しました。
次に、このスタイル ボタンを使用して、Path オブジェクトをホストし、その Fill プロパティを Black に設定します。
パスを ControlTemplate 自体に移動する必要なく、ボタンの Content に含まれる Path オブジェクトの Fill プロパティを白に変更するにはどうすればよいですか?
塗りつぶしは、の Visual State Manager の「コンテキスト」の外にありButtonます。この問題に対処するには、次の 2 つの方法があります。
i) のPath内部Button(おそらく のすぐGrid下) にBorder x:Name="Background"移動し、 の Visual State Manager で使用できるようにします。ControlTemplate TargetType="Button"x:NameButton
ii) をコンテンツPathとして使用Buttonし、このコンテンツ専用の Visual State Manager を追加しButtonます。i:EventTrigger EventName="Click"コンテンツに使用する可能性があります (この例を参照してください)。
Path基本的に同じボタンに異なるビジュアルを使用したい場合、これらの選択肢のいずれかで DRY 原則に違反することを余儀なくされます。(カスタム コントロールを作成することが究極の解決策ですが、ここでは速度と短期的な利便性の利点が失われます)。
次の例では、オプション (i) を使用しており、次のようになります。
この：
<UserControl x:Class="rasx.Buttons.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<ControlTemplate x:Key="ButterflyPathTemplate" TargetType="ContentControl">
<Canvas x:Name="BackgroundCanvas"
Width="140" Height="90">
<!--http://www.thexamlproject.com/#/artwork/437-->
<!--Butterfly:-->
<Path
Data="F1 M 133.242,3.82999C 133.103,2.12811 130.674,0.701721 129.535,0.36969C 109.54,-5.44736 77.5898,30.2498 70.3398,38.7362L 70.3606,38.386C 70.3763,38.2512 70.3841,38.1152 70.3841,37.9765C 70.3841,35.8977 68.6992,34.2134 66.621,34.2134C 64.5436,34.2134 62.86,35.8977 62.86,37.9765C 62.86,38.1152 62.8691,38.2512 62.8835,38.386L 62.9036,38.7362C 55.6529,30.2498 23.7012,-5.44736 3.70638,0.36969C 2.56775,0.701721 0.137329,2.12689 0,3.82999C -0.330811,7.9361 1.14774,11.3326 3.84241,13.9817C 14.5253,24.4817 11.093,34.8846 14.0865,41.6177C 15.8437,45.5721 28.8476,46.5057 25.9505,47.5474C -1.51242,57.4354 31.4427,94.563 46.8196,85.3365C 52.6581,81.8339 62.7916,64.5942 64.2238,62.1269L 64.916,74.3352C 64.916,75.2766 65.6784,76.0396 66.6197,76.0396C 67.5625,76.0396 68.3241,75.2766 68.3241,74.3352L 69.0169,62.1269C 70.4478,64.5942 80.582,81.8339 86.4205,85.3365C 101.799,94.563 134.754,57.4354 107.292,47.5474C 104.393,46.5057 117.397,45.5721 119.155,41.6177C 122.147,34.8846 118.715,24.4803 129.398,13.9817C 132.092,11.3326 133.573,7.93475 133.242,3.82999 Z "
Fill="{TemplateBinding Foreground}"
Stretch="Uniform"
Width="133.334" Height="87.0643"
/>
</Canvas>
</ControlTemplate>
<ControlTemplate x:Key="ButterflyPathButtonTemplate" TargetType="Button">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal">
</vsm:VisualState>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation
Duration="0"
Storyboard.TargetName="BackgroundContent"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
To="Red"
/>
<ColorAnimation
Duration="0"
Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
To="Red"
/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation
Duration="0"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
Storyboard.TargetName="Background"
To="Red"
/>
<ColorAnimation
Duration="0"
Storyboard.TargetName="BackgroundContent"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
To="White"
/>
<ColorAnimation
Duration="0"
Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
To="White"
/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation
Duration="0"
Storyboard.TargetName="BackgroundContent"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
To="Gray"
/>
<ColorAnimation
Duration="0"
Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
To="Gray"
/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused" />
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid x:Name="Background"
Background="Transparent">
<!-- TODO: build custom control with BackgroundContentTemplate property needed? -->
<ContentControl x:Name="BackgroundContent"
Foreground="{TemplateBinding Foreground}"
Template="{StaticResource ButterflyPathTemplate}" Background="Black"
/>
</Grid>
</Border>
<!--Default ContentPresenter changed to TextBlock:-->
<TextBlock x:Name="ContentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"
Text="{TemplateBinding Content}"
/>
<Rectangle x:Name="DisabledVisualElement"
IsHitTestVisible="false"
Opacity="0"
/>
<Rectangle x:Name="FocusVisualElement"
IsHitTestVisible="false"
Opacity="0"
/>
</Grid>
</ControlTemplate>
<Style x:Key="VectorButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Foreground" Value="Green" />
<Setter Property="Padding" Value="0,90,0,0" />
<Setter Property="Template" Value="{StaticResource ButterflyPathButtonTemplate}" />
</Style>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Button
Content="Yes"
Style="{StaticResource VectorButtonStyle}"
/>
<Button Grid.Row="1"
Content="Nope"
IsEnabled="False"
Style="{StaticResource VectorButtonStyle}"
/>
</Grid>
</UserControl>