Click here to Skip to main content
15,843,727 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I cant understand why the colors are not applying

C#
<StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                <RadioButton Content="Use Login OTP" Style="{StaticResource {x:Type ToggleButton}}" Padding="12,8,12,8" GroupName="View"/>
                <RadioButton Content="Use Login Code" Style="{StaticResource {x:Type ToggleButton}}" Padding="12,8,12,8" GroupName="View"/>
                <RadioButton Content="Use Secret Pin" Style="{StaticResource {x:Type ToggleButton}}" Padding="12,8,12,8" GroupName="View"/>
            </StackPanel>

C#
<SolidColorBrush x:Key="StashOTPOptionFontBrush" Color="#DDDDDD"/>

<LinearGradientBrush x:Key="StashOTPOptionBGBrush" StartPoint="0,0" EndPoint="0,1">
    <GradientStop Offset="0" Color="#888888"/>
    <GradientStop Offset="1" Color="#222222"/>
</LinearGradientBrush>

<SolidColorBrush x:Key="StashOTPOptionBorderBrush" Color="#333333"/>
<LinearGradientBrush x:Key="CheckedBrush" StartPoint="0,0" EndPoint="0,1">
    <GradientStop Offset="0" Color="#555555"/>
    <GradientStop Offset="1" Color="#111111"/>
</LinearGradientBrush>

<ControlTemplate x:Key="ToggleButtonLeft" TargetType="{x:Type ToggleButton}">
    <Border Name="Border" Background="{StaticResource StashOTPOptionBGBrush}" BorderBrush="{StaticResource StashOTPOptionBorderBrush}" BorderThickness="1" CornerRadius="5,0,0,5">
        <ContentPresenter HorizontalAlignment="Center" Margin="{TemplateBinding Padding}" VerticalAlignment="Center" Content="{TemplateBinding Content}" TextBlock.FontWeight="Bold" TextBlock.Foreground="{StaticResource StashOTPOptionFontBrush}"/>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="ToggleButton.IsMouseOver" Value="true">
            <Setter TargetName="Border" Property="Background" Value="#808080"/>
        </Trigger>
        <Trigger Property="IsChecked" Value="true">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource CheckedBrush}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ToggleButtonMid" TargetType="{x:Type ToggleButton}">
    <Border Name="Border" Background="{StaticResource StashOTPOptionBGBrush}" BorderBrush="{StaticResource StashOTPOptionBorderBrush}" BorderThickness="0,1,0,1" CornerRadius="0" />
    <ControlTemplate.Triggers>
        <Trigger Property="ToggleButton.IsMouseOver" Value="true">
            <Setter TargetName="Border" Property="Background" Value="#808080"/>
        </Trigger>
        <Trigger Property="IsChecked" Value="true">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource CheckedBrush}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ToggleButtonRight" TargetType="{x:Type ToggleButton}">
    <Border Name="Border" Background="{StaticResource StashOTPOptionBGBrush}" BorderBrush="{StaticResource StashOTPOptionBorderBrush}" BorderThickness="1" CornerRadius="0, 5, 5, 0" >
        <ContentPresenter HorizontalAlignment="Center" Margin="{TemplateBinding Padding}" VerticalAlignment="Center" Content="{TemplateBinding Content}" TextBlock.FontWeight="Bold" TextBlock.Foreground="{StaticResource StashOTPOptionFontBrush}"/>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="ToggleButton.IsMouseOver" Value="true">
            <Setter TargetName="Border" Property="Background" Value="#808080"/>
        </Trigger>
        <Trigger Property="IsChecked" Value="true">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource CheckedBrush}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>


What I have tried:

It only works when the color is applied directly to the element
Posted
Updated 18-Feb-23 5:17am
Comments
Graeme_Grant 18-Feb-23 8:06am    
Are they in a resource block?

Did a quick test of your brush:
XML
<Window.Resources>
    <LinearGradientBrush x:Key="StashOTPOptionBGBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Offset="0" Color="#888888"/>
        <GradientStop Offset="1" Color="#222222"/>
    </LinearGradientBrush>
</Window.Resources>

<Grid Background="{StaticResource StashOTPOptionBGBrush}">

</Grid>

Works fine.

Now for the ControlTemplate as a style:
XML
<Window.Resources>
    <LinearGradientBrush x:Key="StashOTPOptionBGBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Offset="0" Color="#888888"/>
        <GradientStop Offset="1" Color="#222222"/>
    </LinearGradientBrush>
    <Style x:Key="MyRadioButtonStyle" TargetType="RadioButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="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="White"
                               Background="{StaticResource StashOTPOptionBGBrush}"/>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="Checked" Property="Visibility" Value="Visible"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

Then to apply:
XML
<Grid>
    <RadioButton HorizontalAlignment="Center"
                 VerticalAlignment="Center"
                 Content="Check if wanted"
                 Style="{StaticResource MyRadioButtonStyle}"/>
</Grid>
 
Share this answer
 
I just modified it a bit to my liking. Looks fabulous.

C#
<LinearGradientBrush x:Key="StashOTPOptionBGBrush" StartPoint="0,0" EndPoint="0,1">
    <GradientStop Offset="0" Color="#96A3AB"/>
    <GradientStop Offset="1" Color="#4E5B66"/>
</LinearGradientBrush>

<Style x:Key="StashOTPOption" TargetType="{x:Type RadioButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
                <Border Name="OTPOptionBorder" CornerRadius="5 5 5 5">
                    <Label x:Name="OTPOptionText" Content="{TemplateBinding Content}" Foreground="#FF7553" Background="#4E5B66" FontSize="20"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="ToggleButton.IsMouseOver" Value="true">
                        <Setter TargetName="OTPOptionBorder" Property="BorderBrush" Value="#FF7553"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="true">
                        <Setter TargetName="OTPOptionText" Property="Background" Value="{StaticResource StashOTPOptionBGBrush}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900