CODEWITHSUNDEEP
c#wpftriggerscontroltemplatetogglebutton
user3294629
user3294629

Reputation: 95

ControlTemplate triggers on ToggleButton

I am trying to create a Style for many ToggleButtons and need a trigger for when the ToggleButton IsChecked to change the button's border to Red (originally Gray when unchecked).

<Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border BorderThickness="3"
                            CornerRadius="4" Background="{TemplateBinding Background}">
                            <Label Content="{TemplateBinding Content}" FontFamily="../../Fonts/#Pokemon Pixel Font" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>       
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="ToggleButton.IsChecked" Value="True">
                            <Setter Property="FontSize" Value="25"/>
                            <Setter Property="ToggleButton.BorderBrush" Value="Red"/>
                        </Trigger>
                        <Trigger Property="ToggleButton.IsChecked" Value="False">
                            <Setter Property="FontSize" Value="20"/>
                            <Setter Property="ToggleButton.BorderBrush" Value="Gray"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>           
        </Setter>
    </Style>

The FontSize change (larger font size when IsChecked) works, but the button's BorderBrush isn't; no border shows up at all, not even the Gray border for when the togglebutton is unchecked. What am I doing wrong here? Thank you in advance!

Upvotes: 0

Views: 1487

Answers (2)

Anatoliy Nikolaev
Anatoliy Nikolaev

Reputation: 22702

In this case you need to pass a BorderBrush value to the Style by using a TemplateBinding:

TemplateBinding: Links the value of a property in a control template to the value of some other exposed property on the templated control.

In fact, TemplateBinding automatically converted into this construction:

Been:

Property="{TemplateBinding Path=SomePath}"

Became:

Property="{Binding Path=SomePath, RelativeSource={RelativeSource Mode=TemplatedParent}}"

Example:

<Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="SnapsToDevicePixels" Value="True" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Name="Border"
                        BorderThickness="3"
                        CornerRadius="4"
                        BorderBrush="{TemplateBinding BorderBrush}" <--- Here
                        Background="{TemplateBinding Background}">

                    <Label Content="{TemplateBinding Content}"
                            FontFamily="Verdana" 
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center" />
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="ToggleButton.IsChecked" Value="True">
                        <Setter Property="FontSize" Value="25" />
                        <Setter Property="BorderBrush" Value="Red" />
                    </Trigger>

                    <Trigger Property="ToggleButton.IsChecked" Value="False">
                        <Setter Property="FontSize" Value="20" />
                        <Setter Property="BorderBrush" Value="Gray" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Upvotes: 1

Sankarann
Sankarann

Reputation: 2665

Change like this,

<Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border x:Name="border" BorderThickness="3"
                        CornerRadius="4" Background="{TemplateBinding Background}">
                        <Label Content="{TemplateBinding Content}" FontFamily="../../Fonts/#Pokemon Pixel Font" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>       
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="ToggleButton.IsChecked" Value="True">
                        <Setter Property="FontSize" Value="25"/>
                        <Setter Property="ToggleButton.BorderBrush" Value="Red"/>
                    </Trigger>
                    <Trigger Property="ToggleButton.IsChecked" Value="False">
                        <Setter Property="FontSize" Value="20"/>
                        <Setter TargetName="border" Property="Border.BorderBrush" Value="Gray"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>           
    </Setter>
</Style>

Upvotes: 1

Related Questions