CODEWITHSUNDEEP
c#wpfxaml
IveGotThePawa
IveGotThePawa

Reputation: 45

XAML ToggleButton with TextBlock and a Checkbox

I am trying to create a WPF ToggleButton with a TextBox and a CheckBox as it's control template.

Here is what I have so far:

    <Style TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <StackPanel Orientation="Horizontal">
                    <TextBlock x:Name="toggleButtonTextBlock" 
                               Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}, Path=Content}"/>
                    <CheckBox  x:Name="toggleButtonCheckBox" VerticalAlignment="Center" Margin="2" 
                               IsChecked="{Binding RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}, Path=IsChecked, Mode=TwoWay}" >
                    </CheckBox>
                </StackPanel>
                <ControlTemplate.Triggers>
                    <Trigger Property="ToggleButton.IsChecked" Value="True">
                        <Setter TargetName="toggleButtonTextBlock" Property="TextDecorations" Value="Underline"/>
                        <Setter TargetName="toggleButtonCheckBox" Property="IsChecked" Value="True"/>
                    </Trigger>
                    <Trigger Property="ToggleButton.IsChecked" Value="False">
                        <Setter TargetName="toggleButtonTextBlock" Property="TextDecorations" Value="{x:Null}"/>
                        <Setter TargetName="toggleButtonCheckBox" Property="IsChecked" Value="False"/>
                    </Trigger>
                    <Trigger Property="ToggleButton.IsChecked" Value="{x:Null}">
                        <Setter TargetName="toggleButtonTextBlock" Property="TextDecorations" Value="{x:Null}"/>
                        <Setter TargetName="toggleButtonCheckBox" Property="IsChecked" Value="False"/>
                    </Trigger>
                    <Trigger Property="ToggleButton.IsMouseOver" Value="True">
                        <Setter TargetName="toggleButtonTextBlock" Property="TextDecorations" Value="Underline"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

If I click the Text of the ToggleButton, the text is properly underlined and the CheckBox is checked. But if I click the CheckBox, the text is not properly underlined (and the ToggleButton is not changed to IsChecked=True).

How do I get the ToggleButton to be IsChecked=True (and having the text underlined) when clicking the CheckBox?

It should be simple I guess, but being fairly inexperienced at XAML, this seems beyond my comprehension.

Thanks for your Help

Upvotes: 2

Views: 2811

Answers (1)

Ryan Emerle
Ryan Emerle

Reputation: 15811

You can simplify your triggers. In WPF, if the trigger evaluates to false then the target element/property will return to its previous state. Your binding on toggleButtonCheckBox is sufficient to set the IsChecked property on the ToggleButton; you don't need to set it in the trigger.

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="ToggleButton">
            <StackPanel Orientation="Horizontal">
                <TextBlock x:Name="toggleButtonTextBlock" 
                           Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}, Path=Content}"/>
                <CheckBox x:Name="toggleButtonCheckBox" 
                          VerticalAlignment="Center" 
                          Margin="2" 
                          IsChecked="{Binding RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}, Path=IsChecked, Mode=TwoWay}" >
                </CheckBox>
            </StackPanel>
            <ControlTemplate.Triggers>
                <!-- Will return to previous state if false -->
                <Trigger Property="ToggleButton.IsChecked" Value="True">
                    <Setter TargetName="toggleButtonTextBlock" 
                            Property="TextDecorations" 
                            Value="Underline"/>
                </Trigger>
                <Trigger Property="ToggleButton.IsMouseOver" Value="True">
                    <Setter TargetName="toggleButtonTextBlock" 
                            Property="TextDecorations"
                            Value="Underline"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

Upvotes: 2

Related Questions