.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，并在样式 setter 中指定渐变。这应该可以解决问题：

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

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

.Net (WPF): ToggleButton linear gradient border

.net

c#

wpf

button

togglebutton