Setting different content based on property value - wpf

Question

I am kind of lost what strategy to take. I need to do the following:
I have a toggle button as a base class. This button has all the properties as normal button, plus IsChecked, which tells us whether button is toggled or not.
I want to create a style (or a template) for ToggleButton. Basically it must inherit original style from ToggleButton, and add this:
IsChecked=True: Set ToolTip to "Collapse" and show this content (minus sign)
<Path Margin="2" Stroke="ForeGround property on control" Data="M0,5 H10" StrokeThickness="3" />
IsChecked=False, Set ToolTip tp "Expand" and show this content (plus sign)
<Path Margin="2" Stroke="ForeGround property on control" Data="M0,5 H10 M5,0 V10" StrokeThickness="3" />
I tried several approaches and always came up with some exception that I could not resolve.
Another approach can be to have one content only (plus sign), but divided to two lines:
<Grid>
<Path Margin="2" Stroke="ForeGround property on control" Data="M0,5 H10" StrokeThickness="3" />
<Path x:Name="verticalLine" Margin="2" Stroke="ForeGround property on control" Data="M5,0 V10" StrokeThickness="3" />
</Grid>
And them hange visibility of verticalLine based on expanded / collapsed state.
I made some progress:
<Style x:Key="myToggleButtonStyle" TargetType="ToggleButton" BasedOn="{StaticResource ToggleButtonStyle}">
<Setter Property="ContentTemplate">
<Setter.Value>
<Grid>
<Path Margin="2" Stroke="Black" Data="M0,5 H10" StrokeThickness="3" />
<Path x:Name="verticalLine" Margin="2" Stroke="Black" Data="M5,0 V10" StrokeThickness="3" />
</Grid>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.Target="verticalLine" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.Target="verticalLine" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
The only thing that I cannot do now is set Stroke to Foreground color of ToggleButton. I have tried all I rememberd, from TemplatedParent to AncestorType, and no success.

Answer 1

Try to change the Path.Data according to the ToggleButtons IsCheckedproperty:
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="ToolTip" Value="Collapsed"/>
<Setter Property="Content">
<Setter.Value>
<Path Margin="2" Stroke="{Binding Foreground, RelativeSource={RelativeSource AncestorType=ToggleButton}}" StrokeThickness="3">
<Path.Style>
<Style TargetType="Path">
<Setter Property="Data" Value="M0,5 H10 M5,0 V10 "/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ToggleButton}, Path=IsChecked}" Value="True">
<Setter Property="Data" Value="M0,5 H10"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="ToolTip" Value="Expanded"/>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>

Answer 2

Ok, here is the final solution:
<Style x:Key="MyToggleButtonStyle" TargetType="ToggleButton" BasedOn="{StaticResource ToggleButtonStyle}}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Path Margin="4" Data="M0,5 H10" Stretch="UniformToFill" Stroke="{TemplateBinding Control.Foreground}" StrokeThickness="3" />
<Path x:Name="verticalLine" Margin="4" Data="M5,0 V10" Stretch="UniformToFill" Stroke="{TemplateBinding Control.Foreground}" StrokeThickness="3" />
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="verticalLine" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="verticalLine" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>