Reputation: 1
I want to implement a ToggleButton that adapts its content to its IsChecked state. I defined a style with style triggers, and it works fine as long as I put only text as content - but for my case, I want a Grid as content (with multiple overlaying Labels inside).
<Style TargetType="ToggleButton" x:Key="MyStyle">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Name="Bd">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content">
<Setter.Value>
<Grid>
<Label>🚩</Label>
<Label>/</Label>
</Grid>
</Setter.Value>
</Setter>
<Setter TargetName="Bd" Property="Background" Value="Green" />
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Content">
<Setter.Value>
<Label>🚩</Label>
</Setter.Value>
</Setter>
<Setter TargetName="Bd" Property="Background" Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
If I set the content value to my Grid, it works as long as there is no other ToggleButton around. If I place multiple ToggleButtons of the same style, and then checking/unchecking them, they all show a strange behavior; their content disappears and reappears randomly (while the background color adapts correctly). My workaround is, to remove the ContentControl in the style and place the Grid instead, and setting the visibility of the desired control inside the Grid by name in the control template trigger.
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid Name="Bd">
<Label>🚩</Label>
<Label Name="MyLabel">/</Label>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Visibility" TargetName="MyLabel" Value="Collapsed"/>
<Setter TargetName="Bd" Property="Background" Value="Green" />
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Visibility" TargetName="MyLabel" Value="Visible"/>
<Setter TargetName="Bd" Property="Background" Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
But this doesn't explain the strange behavior. I'd be happy if you have any ideas and I could learn more about this.
Upvotes: 0
Views: 43