.Net (WPF)：ToggleButton 线性渐变边框

Question

我最近一直在做一个项目，我正在尝试创建一个带有线性渐变边框颜色的切换按钮，但我找不到解决方案。 我在普通按钮上实现了该结果，但我正在努力寻找在切换按钮上执行相同操作的方法。

左侧的切换按钮和右侧的普通按钮（理想结果） https://i.stack.imgur.com/rNaPX.png

按钮代码：（工作）

 <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>

切换按钮：

<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>

感谢任何帮助的建议！

Answer 1

如果您替换默认模板，您应该使用TemplateBinding 指定应该呈现渐变的元素。 您应该在模板中将TemplateBinding 用于BorderBrush，并在样式设置器中指定渐变。 这应该可以解决问题：

<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>

您还可以为ToggleButton 指定渐变（不是样式），就像您为常规按钮所做的那样：

<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>