未应用WPF悬停边框效果_Wpf_Xaml_User Interface

未应用WPF悬停边框效果
wpf xaml user-interface
未应用WPF悬停边框效果,wpf,xaml,user-interface,Wpf,Xaml,User Interface,当鼠标悬停在WPF中的控件上时，我尝试（但失败）更改单选按钮上圆圈边框的颜色。我的样式的WPF如下所示： <Style TargetType="RadioButton" x:Key="RadioButtonStyling" BasedOn="{StaticResource {x:Type RadioButton}}"> <Style.Triggers> &l
当鼠标悬停在WPF中的控件上时，我尝试（但失败）更改单选按钮上圆圈边框的颜色。我的
样式的WPF如下所示：
<Style TargetType="RadioButton"
        x:Key="RadioButtonStyling"
        BasedOn="{StaticResource {x:Type RadioButton}}">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="BorderBrush" Value="Red" />
        </Trigger>
    </Style.Triggers>
</Style

<RadioButton Style="{StaticResource RadioButtonStyling}" ... />


问题是radiobutton的模板中已经有鼠标悬停触发器
这将按名称在border元素上设置borderbrush，因此将覆盖触发器将控件上的边框设置为的值
以下是win 10模板的修改工作版本，该模板在鼠标悬停时设置红色圆圈：
    <ControlTemplate x:Key="RadioButtonControlTemplate1" TargetType="{x:Type RadioButton}">
        <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Border x:Name="radioButtonBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="100" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1,1,2,1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                <Grid x:Name="markGrid" Margin="2">
                    <Ellipse x:Name="optionMark" Fill="#FF212121" MinWidth="6" MinHeight="6" Opacity="0"/>
                </Grid>
            </Border>
            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="HasContent" Value="True">
                <Setter Property="FocusVisualStyle">
                    <Setter.Value>
                        <Style>
                            <Setter Property="Control.Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <Rectangle Margin="14,0,0,0" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Setter.Value>
                </Setter>
                <Setter Property="Padding" Value="4,-1,0,0"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" TargetName="radioButtonBorder" Value="#FFE6E6E6"/>
                <Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FFBCBCBC"/>
                <Setter Property="Fill" TargetName="optionMark" Value="#FF707070"/>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" TargetName="radioButtonBorder" Value="#FFF3F9FF"/>
                <Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="Red"/>
                <Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Background" TargetName="radioButtonBorder" Value="#FFD9ECFF"/>
                <Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF3C77DD"/>
                <Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
            </Trigger>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="Opacity" TargetName="optionMark" Value="1"/>
            </Trigger>
            <Trigger Property="IsChecked" Value="{x:Null}">
                <Setter Property="Opacity" TargetName="optionMark" Value="0.56"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>



关键部分是这个触发器：
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" TargetName="radioButtonBorder" Value="#FFF3F9FF"/>
            <Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="Red"/>
            <Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
        </Trigger>



我将原始值更改为“红色”
我还按触发器的顺序向下移动了触发器，所以它是在我被激活之后
这些是我对提取的默认win10模板所做的唯一更改。
问题是radiobutton的模板中已经有鼠标悬停触发器
这将按名称在border元素上设置borderbrush，因此将覆盖触发器将控件上的边框设置为的值
以下是win 10模板的修改工作版本，该模板在鼠标悬停时设置红色圆圈：
    <ControlTemplate x:Key="RadioButtonControlTemplate1" TargetType="{x:Type RadioButton}">
        <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Border x:Name="radioButtonBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="100" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1,1,2,1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                <Grid x:Name="markGrid" Margin="2">
                    <Ellipse x:Name="optionMark" Fill="#FF212121" MinWidth="6" MinHeight="6" Opacity="0"/>
                </Grid>
            </Border>
            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="HasContent" Value="True">
                <Setter Property="FocusVisualStyle">
                    <Setter.Value>
                        <Style>
                            <Setter Property="Control.Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <Rectangle Margin="14,0,0,0" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Setter.Value>
                </Setter>
                <Setter Property="Padding" Value="4,-1,0,0"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" TargetName="radioButtonBorder" Value="#FFE6E6E6"/>
                <Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FFBCBCBC"/>
                <Setter Property="Fill" TargetName="optionMark" Value="#FF707070"/>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" TargetName="radioButtonBorder" Value="#FFF3F9FF"/>
                <Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="Red"/>
                <Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Background" TargetName="radioButtonBorder" Value="#FFD9ECFF"/>
                <Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF3C77DD"/>
                <Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
            </Trigger>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="Opacity" TargetName="optionMark" Value="1"/>
            </Trigger>
            <Trigger Property="IsChecked" Value="{x:Null}">
                <Setter Property="Opacity" TargetName="optionMark" Value="0.56"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>



关键部分是这个触发器：
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" TargetName="radioButtonBorder" Value="#FFF3F9FF"/>
            <Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="Red"/>
            <Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
        </Trigger>



我将原始值更改为“红色”
我还按触发器的顺序向下移动了触发器，所以它是在我被激活之后
这些是我对提取的默认win10模板所做的唯一更改。
WPF中的每个控件都有各种状态，如不活动、鼠标悬停、按下或禁用。如果您想修改某些状态，样式上的简单设置器将不起作用，因为控件模板中已经定义了将覆盖您的触发器
因此，您需要创建一个自定义控件模板。可以使用Visual Studio或Blend等工具自动提取可编辑的默认控件模板。提取后，您将获得一个或多个样式和一个笔刷列表，如下所示
<SolidColorBrush x:Key="RadioButton.Static.Background" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="RadioButton.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="RadioButton.Static.Glyph" Color="#FF212121"/>
<SolidColorBrush x:Key="RadioButton.MouseOver.Background" Color="#FFF3F9FF"/>
<SolidColorBrush x:Key="RadioButton.MouseOver.Border" Color="#FF5593FF"/>
<SolidColorBrush x:Key="RadioButton.MouseOver.Glyph" Color="#FF212121"/>
<!-- ...and so on. -->

<Style x:Key="OptionMarkFocusVisual">
   <!-- ...style used for displaying focus. -->
</Style>
<Style x:Key="RadioButtonStyle" TargetType="{x:Type RadioButton}">
   <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
   <Setter Property="Background" Value="{StaticResource RadioButton.Static.Background}"/>
   <Setter Property="BorderBrush" Value="{StaticResource RadioButton.Static.Border}"/>
   <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
   <Setter Property="BorderThickness" Value="1"/>
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type RadioButton}">
            <!-- ...control template to display the radio button -->
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>



在您的情况下，您只需覆盖鼠标悬停状态的边框笔刷


然后将更改后的样式应用于单选按钮
<RadioButton Style="{DynamicResource RadioButtonStyle}"/>

WPF中的每个控件都有各种状态，如不活动、鼠标悬停、按下或禁用。如果您想修改某些状态，样式上的简单设置器将不起作用，因为控件模板中已经定义了将覆盖您的触发器
因此，您需要创建一个自定义控件模板。可以使用Visual Studio或Blend等工具自动提取可编辑的默认控件模板。提取后，您将获得一个或多个样式和一个笔刷列表，如下所示
<SolidColorBrush x:Key="RadioButton.Static.Background" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="RadioButton.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="RadioButton.Static.Glyph" Color="#FF212121"/>
<SolidColorBrush x:Key="RadioButton.MouseOver.Background" Color="#FFF3F9FF"/>
<SolidColorBrush x:Key="RadioButton.MouseOver.Border" Color="#FF5593FF"/>
<SolidColorBrush x:Key="RadioButton.MouseOver.Glyph" Color="#FF212121"/>
<!-- ...and so on. -->

<Style x:Key="OptionMarkFocusVisual">
   <!-- ...style used for displaying focus. -->
</Style>
<Style x:Key="RadioButtonStyle" TargetType="{x:Type RadioButton}">
   <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
   <Setter Property="Background" Value="{StaticResource RadioButton.Static.Background}"/>
   <Setter Property="BorderBrush" Value="{StaticResource RadioButton.Static.Border}"/>
   <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
   <Setter Property="BorderThickness" Value="1"/>
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type RadioButton}">
            <!-- ...control template to display the radio button -->
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>



在您的情况下，您只需覆盖鼠标悬停状态的边框笔刷


然后将更改后的样式应用于单选按钮
<RadioButton Style="{DynamicResource RadioButtonStyle}"/>


单选按钮没有那么简单。您必须先覆盖radiobutton控件的controltemplate，然后才能更改radiobutton控件中该小圆部分的边框颜色。如果您在VS2019中，这几天相当简单。只需右键单击单选按钮并选择“编辑样式”。这将创建一种样式，用于扩展radiobutton的内部工作方式，以便您可以仅更改椭圆上的边框颜色，椭圆是控件的一部分，指示它已被选中。radiobutton并不是那么简单。您必须先覆盖radiobutton控件的controltemplate，然后才能更改radiobutton控件中该小圆部分的边框颜色。如果您在VS2019中，这几天相当简单。只需右键单击单选按钮并选择“编辑St”