在WP7中更改单选按钮边框颜色和点颜色

时间:2012-03-13 13:45:16

标签: windows-phone-7

我在.xaml文件中有一个单选按钮,如下所示:

<RadioButton IsChecked="True" Style="{StaticResource rdbResultsView}" 
                                 Template="{StaticResource RadioButtonControlTemplate1}"></RadioButton>

风格是:

<Style x:Key="rdbResultsView" TargetType="RadioButton">
        <Setter Property="Foreground" Value="Transparent"/>
        <Setter Property="Background" Value="White" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalAlignment" Value="Center" />
</Style>

模板是:

<ControlTemplate x:Key="RadioButtonControlTemplate1" TargetType="RadioButton">
        <Grid Background="Transparent" >
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="MouseOver"/>
                    <VisualState x:Name="Pressed" >
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledCheckBackground" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedDarkCheckBackground" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedLightCheckBackground" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckMark" Storyboard.TargetProperty="Fill">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxCheckBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Disabled">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledCheckBackground" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledDarkCheckBackground" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledLightCheckBackground" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckMark" Storyboard.TargetProperty="Fill">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxCheckDisabledBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="CheckStates">
                    <VisualState x:Name="Checked">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckMark" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unchecked" />
                    <VisualState x:Name="Indeterminate"/>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid Margin="{StaticResource PhoneTouchTargetLargeOverhang}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="32"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Ellipse x:Name="EnabledCheckBackground" IsHitTestVisible="False" VerticalAlignment="Center" HorizontalAlignment="Left" Fill="{TemplateBinding Background}" Height="32" Width="32"/>
                <Canvas Opacity="{StaticResource PhoneDarkThemeOpacity}" IsHitTestVisible="False" VerticalAlignment="Center" HorizontalAlignment="Left" Height="32" Width="32">
                    <Ellipse x:Name="PressedDarkCheckBackground" Fill="{StaticResource PhoneRadioCheckBoxPressedBrush}" Height="32" Width="32" Visibility="Collapsed"/>
                    <Ellipse x:Name="DisabledDarkCheckBackground" Fill="{StaticResource PhoneRadioCheckBoxDisabledBrush}" Height="32" Width="32" Visibility="Collapsed"/>
                </Canvas>
                <Canvas Opacity="{StaticResource PhoneLightThemeOpacity}" IsHitTestVisible="False" VerticalAlignment="Center" HorizontalAlignment="Left" Height="32" Width="32">
                    <Ellipse x:Name="PressedLightCheckBackground" Fill="{StaticResource PhoneRadioCheckBoxPressedBrush}" Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="{StaticResource PhoneStrokeThickness}" Height="32" Width="32" Visibility="Collapsed"/>
                    <Ellipse x:Name="DisabledLightCheckBackground" Fill="{StaticResource PhoneRadioCheckBoxDisabledBrush}" Stroke="{StaticResource PhoneDisabledBrush}" StrokeThickness="{StaticResource PhoneStrokeThickness}" Height="32" Width="32" Visibility="Collapsed"/>
                </Canvas>
                <Ellipse x:Name="CheckMark" IsHitTestVisible="False" Visibility="Collapsed" Fill="#009DDF" Height="16" Width="16" HorizontalAlignment="Center" VerticalAlignment="Center" />
                <ContentControl x:Name="ContentContainer" Grid.Column="1" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" Margin="12,0,0,0" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" Foreground="{TemplateBinding Foreground}" />
            </Grid>
        </Grid>
    </ControlTemplate>

在这里,我可以通过更改RadioButtonControlTemplate1来改变单选按钮中点的颜色:

<Ellipse x:Name="CheckMark" IsHitTestVisible="False" Visibility="Collapsed" Fill="#009DDF" Height="16" Width="16" HorizontalAlignment="Center" VerticalAlignment="Center" />

但是这里如何更改RadioButton边框颜色(BorderBrush)?

2 个答案:

答案 0 :(得分:4)

it is possible制作样式和模板的副本(Blend对此很有帮助)

然后编辑模板并修改颜色。

答案 1 :(得分:2)

我得到了答案,这可能对其他人有帮助。我更改了模板RadioButtonControlTemplate1。在模板中,我们有一个名为EnabledCheckBackground的Eclipse。我删除了那个eclipse并添加了这样的Border Tag:

<Border BorderBrush="#5D6892" 
        BorderThickness="4"
        CornerRadius="20"
        Height="32"
        Width="32"
        x:Name="EnabledCheckBackground"
        IsHitTestVisible="False"
        VerticalAlignment="Center"
        HorizontalAlignment="Left"
        Background="{TemplateBinding Background}"></Border>