我使用样式中的 ControlTemplate 重新设置了按钮的样式，其中包含将背景反转为黑色和前景反转为白色的 VisualStateManager MouseOver 状态。
然后我使用这个样式按钮来承载一个 Path 对象，其 Fill 属性设置为 Black。
当触发鼠标悬停状态时，如何使包含在按钮内容中的 Path 对象的 Fill 属性更改为白色，而无需将 Path 移动到 ControlTemplate 本身，这意味着为每个按钮创建单独的样式？
问问题
2375 次
1 回答
1
您的填充超出了Button. 我看到两种方法来处理这个问题：
i) 将您的内部Path（Button可能就Grid在.Border x:Name="Background"ControlTemplate TargetType="Button"x:NameButton
ii) 使用您Path的Button内容，然后为此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>
于 2012-07-25T04:55:15.317 回答