.Net (WPF): ToggleButton linear gradient border

Question

I have been working on a project recently in which i'm trying to create a toggle button with a linear gradient border colour, but i can't find a a solution. I achieve that result on a normal Button but i'm struggling to find a way to do the same thing on a toggle button.

Toggle button on left and normal button on right (desiderate result) https://i.sstatic.net/rNaPX.png

Button code: (working)

 <Button Content="a" HorizontalAlignment="Center" Margin="198,160,1017,85" VerticalAlignment="Center" Width="65" Height="65" FontFamily="Calibri" FontWeight="Bold" FontSize="40" Click="buttonPressed" Uid="a" Foreground="White" BorderThickness="3" Background="#FF4C8389">
            <Button.BorderBrush>
                <LinearGradientBrush EndPoint="1,0" MappingMode="RelativeToBoundingBox" StartPoint="0,1">
                    <GradientStop Color="#FF7BC7CB"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </Button.BorderBrush>
        </Button>

Toggle Button:

<ToggleButton HorizontalAlignment="Left" Margin="120,160,0,0" Padding="5" Width="65" FontWeight="Bold" FontSize="24" Click="capslockPressed" Uid="capslock"  Height="65" FontFamily="Calibri" VerticalAlignment="Top">
            <ToggleButton.Style>
                <Style TargetType="{x:Type ToggleButton}">
                    <Setter Property="Content" Value="↑"  />
                    <Setter Property="Background" Value="#FF4C8389"/>
                    <Setter Property="Foreground" Value="White"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ToggleButton}">
                                <Border Background="{TemplateBinding Background}" BorderBrush="#FF9CCFCF" BorderThickness="3">
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Content" Value="↑"/>
                            <Setter Property="Background" Value="#9ec41d"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ToggleButton.Style>
        </ToggleButton>

Thanks in advice for any help!!

Answer 1

If you replace the default template, you should specify which element should render your gradient using TemplateBinding. You should use TemplateBinding for BorderBrush in template and specify your gradient in style setter. This should do the trick:

<ToggleButton HorizontalAlignment="Left" Margin="120,160,0,0" Padding="5" Width="65" FontWeight="Bold" FontSize="24" Click="capslockPressed" Uid="capslock"  Height="65" FontFamily="Calibri" VerticalAlignment="Top">
                    <ToggleButton.Style>
                        <Style TargetType="{x:Type ToggleButton}">
                            <Setter Property="Content" Value="↑"  />
                            <Setter Property="Background" Value="#FF4C8389"/>
                            <Setter Property="BorderBrush">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="1,0" MappingMode="RelativeToBoundingBox" StartPoint="0,1">
                                        <GradientStop Color="#FF7BC7CB"/>
                                        <GradientStop Color="White" Offset="1"/>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Foreground" Value="White"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                                        <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="3">
                                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                        </Border>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                </Trigger>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter Property="Content" Value="↑"/>
                                    <Setter Property="Background" Value="#9ec41d"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </ToggleButton.Style>
</ToggleButton>

You can also specify the gradient for ToggleButton (not style) just like you did for regular button:

<ToggleButton HorizontalAlignment="Left" Margin="120,160,0,0" Padding="5" Width="65" FontWeight="Bold" FontSize="24" Click="capslockPressed" Uid="capslock"  Height="65" FontFamily="Calibri" VerticalAlignment="Top">
                    <ToggleButton.BorderBrush>
                        <LinearGradientBrush EndPoint="1,0" MappingMode="RelativeToBoundingBox" StartPoint="0,1">
                            <GradientStop Color="#FF7BC7CB"/>
                            <GradientStop Color="White" Offset="1"/>
                        </LinearGradientBrush>
                    </ToggleButton.BorderBrush>
                    <ToggleButton.Style>
                            <Style TargetType="{x:Type ToggleButton}">
                            <Setter Property="Content" Value="↑"  />
                            <Setter Property="Background" Value="#FF4C8389"/>
                            <Setter Property="Foreground" Value="White"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                                        <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="3">
                                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                        </Border>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                </Trigger>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter Property="Content" Value="↑"/>
                                    <Setter Property="Background" Value="#9ec41d"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </ToggleButton.Style>
</ToggleButton>