CODEWITHSUNDEEP
wpf
blPA
blPA

Reputation: 57

WPF Radio Button Background Color

How do I set the background color of a RadioButton? My RadioButton is in a simple grid. Thanks!

<RadioButton Name="Temp" Grid.Row="1" Grid.Column="0" GroupName="SetType" Content="Temporary Sets" Margin="60,0,0,0" Checked="Radio_Checked"
                     Background="Red" Foreground="White" />

Upvotes: 1

Views: 4950

Answers (2)

blPA
blPA

Reputation: 57

Here is how I completed my RadioButton. Thanks Iron.

        <ControlTemplate x:Key="RedRadio" TargetType="{x:Type RadioButton}">
        <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Background="Transparent">
            <Grid>
                <Ellipse x:Name="TargetEllipse" Width="14" Height="14">
                    <Ellipse.Fill>
                        <SolidColorBrush x:Name="FillBrush" Color="#D4D4D4"/>
                    </Ellipse.Fill>
                    <Ellipse.Stroke>
                        <SolidColorBrush x:Name="StrokeBrush" Color="#434343"/>
                    </Ellipse.Stroke>
                </Ellipse>
                <Ellipse x:Name="CheckedEllipse" Width="8" Height="8" Fill="#444444" Visibility="Collapsed"/>
            </Grid>
            <Border CornerRadius="4" Margin="3 0 0 0" Padding="2 0 5 0"
                    Background="{TemplateBinding Background}">
                <Label Margin="2 0 0 0"
                   Content="{TemplateBinding Content}"
                   Foreground="{TemplateBinding Foreground}"
                   Background="{TemplateBinding Background}"/>
            </Border>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="MouseOver">
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="FillBrush" Storyboard.TargetProperty="Color" To="#969696" Duration="0:0:0.01"/>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </StackPanel>
        <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="True">
                <Setter TargetName="CheckedEllipse" Property="Visibility" Value="Visible"/>
                <Setter TargetName="TargetEllipse" Property="Stroke" Value="#040404"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

Upvotes: 1

Iron
Iron

Reputation: 946

To set the background of the Text, you should override the template of the RadioButton, to bind the Text container's Backgroud to the RadioButton's Background. Just try something like this:

<RadioButton Content="Temporary Sets" Background="Red" Foreground="White" >
    <RadioButton.Template>
        <ControlTemplate TargetType="{x:Type RadioButton}">
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                <Grid>
                    <Ellipse Width="16" Height="16" Fill="{TemplateBinding Background}"
                             Stroke="{TemplateBinding BorderBrush}"
                             StrokeThickness="{TemplateBinding BorderThickness}"/>
                    <Ellipse x:Name="Checked" Width="10" Height="10" Fill="Black" Visibility="Collapsed"/>
                </Grid>
                <Label Margin="5 0 0 0" Content="{TemplateBinding Content}"
                       Foreground="{TemplateBinding Foreground}"
                       Background="{TemplateBinding Background}"/>
            </StackPanel>
            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter TargetName="Checked" Property="Visibility" Value="Visible"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </RadioButton.Template>
</RadioButton>

Upvotes: 3

Related Questions