UWP - 如何将 ToggleButton 中的 Xaml 路径绑定到 ToggleButton 的前景色答案

【问题标题】：UWP - How to bind a Xaml Path within ToggleButton to the ToggleButton's Foreground ColorUWP - 如何将 ToggleButton 中的 Xaml 路径绑定到 ToggleButton 的前景色
【发布时间】：2016-12-28 11:29:53
【问题描述】：

我有一个包含 xaml 路径的切换按钮。

我想将路径的填充颜色设置为切换按钮的前景色，这样当按钮未按下时为黑色，按下时为白色。

        <ToggleButton>
            <Path Data="M5.08333,4.5 L10.8333,4.33333 L17.3749,8.24242 L6.97926,10.6125 C6.97926,10.6125 7.35392,5.18685 5.08333,4.5 z" Fill="#FFF4F4F5" Height="6.291" Stretch="Fill" UseLayoutRounding="False" Width="12.292"/>
        </ToggleButton>

我该怎么做>

【问题讨论】：

标签： uwp uwp-xaml

【解决方案1】：

您可以为ToggleButton 创建一个ControlTemplate，然后为shapes 配置Fill 属性，其中每个VisualState。

<Page.Resources>
    <ControlTemplate x:Key="ToggleButtonWithShapes" TargetType="ToggleButton">
        <Border
            Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}">
            <Grid>
                <Path
                    x:Name="shapes"
                    Width="60"
                    Height="20"
                    Data="M5.08333,4.5 L10.8333,4.33333 L17.3749,8.24242 L6.97926,10.6125 C6.97926,10.6125 7.35392,5.18685 5.08333,4.5 z"
                    Fill="Black"
                    Stretch="Fill"
                    UseLayoutRounding="True" />
            </Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Pressed">
                        <VisualState.Setters>
                            <Setter Target="shapes.Fill" Value="White" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="CheckedPressed">
                        <VisualState.Setters>
                            <Setter Target="shapes.Fill" Value="Black" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Border>
    </ControlTemplate>
</Page.Resources>

【讨论】：

谢谢。这可行，但我以这种方式失去了所有默认动画。我需要做些什么来保留这些动画？
@ariqyad 你可以参考ToggleButton styles and templates，为每个VisualState创建Storyboard。

【解决方案2】：

您需要更改 ToggleButton 样式中的 VisualStates。

【讨论】：

如何从 VisualState 引用我的路径？