UWP - How to bind a Xaml Path within ToggleButton to the ToggleButton's Foreground Color

Question

I have a toggle button that contains a xaml path.

I want to set the fill color of the path to the foreground color of the toggle button, so that when the button is not pressed its black, when its pressed its white.

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

How can I do this>

Answer 1

You can create a ControlTemplate for the ToggleButton,and then configure Fill property for shapes where in each 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>

Answer 2

You need change VisualStates in your ToggleButton's style.