Question

我在一个Style中使用ControlTemplate重新调整了一个Button，它包含一个VisualStateManager MouseOver状态，它将背景反转为黑色，将前景反转为白色。

然后我使用这个样式按钮来托管Path对象，并将其Fill属性设置为Black。

当触发MouseOver状态时，如何使包含在Button内容中的Path对象的Fill属性更改为White，而不必将Path移动到ControlTemplate本身，这意味着为每个按钮创建一个单独的Style ？

Answer 1

您的填充位于Button的Visual State Manager“上下文”之外。我认为有两种方法可以解决这个问题：

i）将Path带到Button内（可能就在Grid Border x:Name="Background"下ControlTemplate TargetType="Button"内），给它x:Name 1}}与Button的可视状态管理器一起使用。

ii）使用Path作为Button内容，然后为此Button内容添加专用的可视状态管理器。您可能会使用i:EventTrigger EventName="Click"作为内容（see an example of this）。

如果您想为基本相同的按钮使用不同的Path视觉效果，则您必须使用其中任何一种方法违反DRY原则。（制作自定义控件是最终的解决方案，但在这里你失去了速度和短期便利的好处）。

以下示例使用选项（i），看起来像this：

Vector Based Button Violating the DRY Principle

和此：

<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>

将VisualStateManager应用于ControlTemplate和Content

1 个答案: