.Net（WPF）：ToggleButton線性漸變邊框

Question

我最近一直在從事一個項目，在該項目中，我試圖創建具有線性漸變邊框顏色的切換按鈕，但找不到解決方案。 我在普通的Button上實現了該結果，但是我正在努力尋找一種在切換按鈕上執行相同操作的方法。

左側切換按鈕，右側切換普通按鈕（詳細結果） 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 for 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>