CODEWITHSUNDEEP
wpfstylestogglebutton
Vahid
Vahid

Reputation: 5444

How to set Border property for ToggleButton in WPF

I'm trying to style a ToggleButton. But for some odd reason I can't set the Border property. The border is not displayed.

What I'm getting is:

enter image description here

What I want is:

enter image description here

<Style x:Key="MyToggleButton" TargetType="ToggleButton">
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="TextOptions.TextFormattingMode" Value="Display"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Margin" Value="0 -1 0 0"/>
    <Setter Property="FontSize" Value="11"/>
    <Setter Property="BorderThickness" Value="0 1 1 0"/>
    <Setter Property="BorderBrush" Value="Green"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border x:Name="Border" 
                        Width="62" 
                        Height="19">
                    <ContentPresenter HorizontalAlignment="Center" 
                                      VerticalAlignment="Center" 
                                      Margin="-2 -3 0 0"
                                      RecognizesAccessKey="True" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Border" Property="Cursor" Value="Hand"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter TargetName="Border" Property="Background">
                            <Setter.Value>
                                <ImageBrush TileMode="FlipY" ImageSource="pack://application:,,,/Main/Resources/dark/images/tab_normal_bg.png" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="Border" Property="Background">
                            <Setter.Value>
                                <ImageBrush TileMode="FlipY" ImageSource="pack://application:,,,/Main/Resources/dark/images/tab_pressed_bg.png" />
                            </Setter.Value>
                        </Setter>

                    </Trigger>

                    <Trigger Property="IsChecked" Value="False">
                        <Setter Property="Foreground" Value="LightGray"/>
                    </Trigger>
                </ControlTemplate.Triggers>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Upvotes: 1

Views: 2912

Answers (1)

McGarnagle
McGarnagle

Reputation: 102723

You do have to actually make use of the properties BorderBrush and BorderThickness within the control template. It's not enough to just set the properties -- the framework does not make any assumptions about how they are to be used in the template.

            <Border x:Name="Border" 
                    Width="62" 
                    Height="19"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">

Upvotes: 3

Related Questions