none
How can I edit RadioButton's clicked circle colour in the ControlTemplate RRS feed

  • Question

  • The RadioButton's clicked circle (the inner circle when it's clicked) shows as green in XP. I'd like to change this colour.

    In Blend, I right-clicked on my RadioButton, and selected the Edit Control Parts (Template) option, then the Edit A Copy.. option and saved it to my ResourceDictionary. I know have the following code:

    <LinearGradientBrush x:Key="CheckRadioFillNormal">  
            <GradientStop Color="#FFD2D4D2" Offset="0"/>  
            <GradientStop Color="#FFFFFFFF" Offset="1"/>  
        </LinearGradientBrush> 
        <LinearGradientBrush x:Key="CheckRadioStrokeNormal">  
            <GradientStop Color="#FF004C94" Offset="0"/>  
            <GradientStop Color="#FF003C74" Offset="1"/>  
        </LinearGradientBrush> 
        <Style x:Key="CheckRadioFocusVisual">  
            <Setter Property="Control.Template">  
                <Setter.Value> 
                    <ControlTemplate> 
                        <Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="14,0,0,0" SnapsToDevicePixels="true"/>  
                    </ControlTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style> 
        <Style x:Key="RadioBld" TargetType="{x:Type RadioButton}">  
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>  
            <Setter Property="Background" Value="{StaticResource CheckRadioFillNormal}"/>  
            <Setter Property="BorderBrush" Value="{StaticResource CheckRadioStrokeNormal}"/>  
            <Setter Property="BorderThickness" Value="1"/>  
            <Setter Property="Template">  
                <Setter.Value> 
                    <ControlTemplate TargetType="{x:Type RadioButton}">  
                        <BulletDecorator Background="Transparent">  
                            <BulletDecorator.Bullet> 
                                <Microsoft_Windows_Themes:BulletChrome Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" IsChecked="{TemplateBinding IsChecked}" IsRound="true" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>  
                            </BulletDecorator.Bullet> 
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>  
                        </BulletDecorator> 
                        <ControlTemplate.Triggers> 
                            <Trigger Property="HasContent" Value="true">  
                                <Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/>  
                                <Setter Property="Padding" Value="2,0,0,0"/>  
                            </Trigger> 
                            <Trigger Property="IsEnabled" Value="false">  
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>  
                            </Trigger> 
                        </ControlTemplate.Triggers> 
                    </ControlTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style> 

    My question is - how can I change the Green colour here??? (is it the BulletDecorator.Bullet?)
    Monday, July 14, 2008 5:25 PM

Answers

  • Technically speaking, you could implement your own BulletChrome and pass it to BulletDecorator.Bullet, but if you want to change the look of a standard theme aware WPF control, you might need to completely replace its ControlTemplate, and introduce whatever shape you like as the RadioButton' glyph circle.

    The following RadioButton's custom style is something I copied from Expression Blend which could help you get speed up with styling RadioButton control:

    <!-- Simple Radio Button -->
    <Style TargetType="{x:Type RadioButton}">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="FocusVisualStyle" Value="{DynamicResource RadioButtonFocusVisual}"/>
        <Setter Property="Background" Value="{DynamicResource NormalBrush}"/>
        <Setter Property="BorderBrush" Value="{DynamicResource NormalBorderBrush}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RadioButton}">
           
                    <!-- BulletDecorator is used to provide baseline alignment between the checkmark and the Content -->
                    <BulletDecorator Background="Transparent">
                        <BulletDecorator.Bullet>
                            <Grid Width="13" Height="13">
                                <Ellipse x:Name="Ellipse_Border" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"/>
                                <Ellipse Margin="4" x:Name="CheckMark" Fill="{DynamicResource GlyphBrush}"/>
                            </Grid>
                        </BulletDecorator.Bullet>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
                    </BulletDecorator>
               
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="false">
                            <Setter Property="Visibility" Value="Collapsed" TargetName="CheckMark"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Fill" Value="{DynamicResource MouseOverBrush}" TargetName="Ellipse_Border"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Fill" Value="{DynamicResource PressedBrush}" TargetName="Ellipse_Border"/>
                            <Setter Property="Stroke" Value="{DynamicResource GlyphBrush}" TargetName="Ellipse_Border"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Fill" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Ellipse_Border"/>
                            <Setter Property="Stroke" Value="#40000000" TargetName="Ellipse_Border"/>
                            <Setter Property="Foreground" Value="#80000000"/>
                        </Trigger>
                   
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    Styling a control is a dedicated effort which always involve rewriting a control's whole template rather than simply changing a property or introducing a style trigger or setter etc.

    Hope this helps
    • Marked as answer by Neal Hudson Thursday, July 17, 2008 6:18 PM
    Thursday, July 17, 2008 4:10 AM

All replies

  • Anyone know how to turn the selected circle in a RadioButton from green to red?
    Tuesday, July 15, 2008 8:40 AM
  • Those two brushes at the top look promising - have you tried changing their colors?

    Really, are you sure you want to do this? For starters the dot isn't necessarily green. The radio button will currently adapt itself to match whatever theme the user is using. This could be classic, luna blue, luna silver, luna olive, royale or aero. This adjustment happens automatically and ensures the user is comfortable with your application. Do you want to give this up so you can have a fixed dot of a different color?
    Controls for WPF and Windows Forms at http://www.divelements.co.uk
    Tuesday, July 15, 2008 8:56 AM
  • Thanks Tim - yea I tried changing all the colours that are part of this template - none of them are for the dot.

    I know what you are saying about the colour being part of the theme - that's why I think it's the code in the BulletDecorator.Bullet that holds this info:
    <BulletDecorator.Bullet>  
       <Microsoft_Windows_Themes:BulletChrome Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" IsChecked="{TemplateBinding IsChecked}" IsRound="true" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>   
    </BulletDecorator.Bullet> 

    But yea, I want to change it to Red. The RadioButton is part of another control, with the dot to indicate if there is Bleeding (it's a medical system).

    Tuesday, July 15, 2008 9:25 AM
  • Anyone done anything with BulletDecorator.Bullet?
    Wednesday, July 16, 2008 10:22 AM
  • Technically speaking, you could implement your own BulletChrome and pass it to BulletDecorator.Bullet, but if you want to change the look of a standard theme aware WPF control, you might need to completely replace its ControlTemplate, and introduce whatever shape you like as the RadioButton' glyph circle.

    The following RadioButton's custom style is something I copied from Expression Blend which could help you get speed up with styling RadioButton control:

    <!-- Simple Radio Button -->
    <Style TargetType="{x:Type RadioButton}">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="FocusVisualStyle" Value="{DynamicResource RadioButtonFocusVisual}"/>
        <Setter Property="Background" Value="{DynamicResource NormalBrush}"/>
        <Setter Property="BorderBrush" Value="{DynamicResource NormalBorderBrush}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RadioButton}">
           
                    <!-- BulletDecorator is used to provide baseline alignment between the checkmark and the Content -->
                    <BulletDecorator Background="Transparent">
                        <BulletDecorator.Bullet>
                            <Grid Width="13" Height="13">
                                <Ellipse x:Name="Ellipse_Border" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"/>
                                <Ellipse Margin="4" x:Name="CheckMark" Fill="{DynamicResource GlyphBrush}"/>
                            </Grid>
                        </BulletDecorator.Bullet>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
                    </BulletDecorator>
               
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="false">
                            <Setter Property="Visibility" Value="Collapsed" TargetName="CheckMark"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Fill" Value="{DynamicResource MouseOverBrush}" TargetName="Ellipse_Border"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Fill" Value="{DynamicResource PressedBrush}" TargetName="Ellipse_Border"/>
                            <Setter Property="Stroke" Value="{DynamicResource GlyphBrush}" TargetName="Ellipse_Border"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Fill" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Ellipse_Border"/>
                            <Setter Property="Stroke" Value="#40000000" TargetName="Ellipse_Border"/>
                            <Setter Property="Foreground" Value="#80000000"/>
                        </Trigger>
                   
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    Styling a control is a dedicated effort which always involve rewriting a control's whole template rather than simply changing a property or introducing a style trigger or setter etc.

    Hope this helps
    • Marked as answer by Neal Hudson Thursday, July 17, 2008 6:18 PM
    Thursday, July 17, 2008 4:10 AM
  • Thanks for the help Marco
    Thursday, July 17, 2008 6:18 PM