选中复选框时更改边框的背景
本文关键字：边框 背景 复选框 | 更新日期: 2023-09-27 18:22:25
我可以使用选中的事件来更改边界背景的颜色，并在每次选中/取消选中单选按钮时手动更改背景颜色，但我想使用转换器或视觉状态管理器或任何其他有效的方式来实现同样的效果，那么如何实现它呢？下面是xaml
<Border x:Name="br1" Background="Blue" >
<RadioButton Checked="radio1_Checked" x:Name="radio1" />
</Border>
<Border x:Name="br2" Background="Blue" >
<RadioButton Checked="radio2_Checked" x:Name="radio2" />
</Border>
我想在选中和取消选中单选按钮时更改边框背景的颜色，以便如何实现
根据您要处理的工作量、灵活性和可重用性，有几种不同的解决方案。
编辑：下面的代码适用于Windows（Phone）8.1 RT，而不适用于Windows Phone Silverlight。不过，把它留在这里供将来参考，因为Silverlight无论如何都会被Windows 10上的Windows Runtime所取代
由于标准RadioButton已经在其视觉树中内置了边框，为了获得最高的灵活性和可重用性，我创建了一个从RadioButton派生的自定义控件（在visual Studio项模板中称为模板控件）。
我提供了CheckedBrush和UncheckedBrush（默认红色/透明），这样您就可以根据自己的意愿进行自定义。在XAML中设置其中一个值将覆盖默认值。
自定义控件的代码：
public sealed class MyRadioButton : RadioButton
{
public MyRadioButton()
{
this.DefaultStyleKey = typeof(MyRadioButton);
UnCheckedBrush = new SolidColorBrush(Colors.Transparent);
CheckedBrush = new SolidColorBrush(Colors.Red);
this.Checked += (sender, args) =>
{
this.CustomBackground = CheckedBrush;
};
this.Unchecked += (sender, args) =>
{
this.CustomBackground = UnCheckedBrush;
};
}
public static readonly DependencyProperty CustomBackgroundProperty = DependencyProperty.Register(
"CustomBackground", typeof (Brush), typeof (MyRadioButton), new PropertyMetadata(default(Brush)));
public static readonly DependencyProperty CheckedBrushProperty = DependencyProperty.Register(
"CheckedBrush", typeof(Brush), typeof(MyRadioButton), new PropertyMetadata(default(Brush)));
public static readonly DependencyProperty UnCheckedBrushProperty = DependencyProperty.Register(
"UnCheckedBrush", typeof(Brush), typeof(MyRadioButton), new PropertyMetadata(default(Brush)));
public Brush CustomBackground
{
get { return (Brush) GetValue(CustomBackgroundProperty); }
set { SetValue(CustomBackgroundProperty, value); }
}
public Brush CheckedBrush
{
get { return (Brush) GetValue(CheckedBrushProperty); }
set { SetValue(CheckedBrushProperty, value); }
}
public Brush UnCheckedBrush
{
get { return (Brush) GetValue(UnCheckedBrushProperty); }
set { SetValue(UnCheckedBrushProperty, value); }
}
}
下一步是在Themes/Generic.xaml文件中提供样式，这是一个从默认RadioButton样式稍微调整过的样式（用于背景）：
<Style TargetType="local:MyRadioButton">
<Setter Property="Foreground" Value="{ThemeResource RadioButtonContentForegroundThemeBrush}"/>
<Setter Property="Padding" Value="1,4,0,0" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MyRadioButton">
<Border Background="{TemplateBinding CustomBackground}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundEllipse"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonPointerOverBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundEllipse"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonPointerOverBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonPointerOverForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundEllipse"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonPressedBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundEllipse"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonPressedBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonPressedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundEllipse"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonDisabledBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundEllipse"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonDisabledBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonContentDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="CheckGlyph"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FocusVisualWhite"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<DoubleAnimation Storyboard.TargetName="FocusVisualBlack"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="29" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid VerticalAlignment="Top">
<Ellipse x:Name="BackgroundEllipse"
Width="23"
Height="23"
UseLayoutRounding="False"
Fill="{ThemeResource RadioButtonBackgroundThemeBrush}"
Stroke="{ThemeResource RadioButtonBorderThemeBrush}"
StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" />
<Ellipse x:Name="CheckGlyph"
Width="13"
Height="13"
UseLayoutRounding="False"
Opacity="0"
Fill="{ThemeResource RadioButtonForegroundThemeBrush}" />
<Rectangle x:Name="FocusVisualWhite"
Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
StrokeEndLineCap="Square"
StrokeDashArray="1,1"
Opacity="0"
StrokeDashOffset="1.5"
Width="29"
Height="29" />
<Rectangle x:Name="FocusVisualBlack"
Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
StrokeEndLineCap="Square"
StrokeDashArray="1,1"
Opacity="0"
StrokeDashOffset="0.5"
Width="29"
Height="29" />
</Grid>
<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Grid.Column="1"
AutomationProperties.AccessibilityView="Raw"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
与默认模板相比，唯一更改的是删除"背景"属性并更改"边界"控件上的"背景"。
你已经做好了使用它的准备：
<StackPanel Margin="100">
<RadioButton Content="Check 1" />
<local:MyRadioButton CheckedBrush="Blue" Content="Check 2" />
<local:MyRadioButton CheckedBrush="Green" Content="Check 3" />
</StackPanel>
我将实现一个视图模型类（请参阅MVVM模式）并实现两个DependencyPropery，一个带有复选框状态，另一个带有边框颜色。使用数据绑定将相应的XAML属性绑定到这些属性。复选框状态更改时，还会引发边框颜色的PropertyChanged事件。完成。