This is a migrated thread and some comments may be shown as answers.

Styling radio button

1 Answer 123 Views
Buttons
This is a migrated thread and some comments may be shown as answers.
Parvinder
Top achievements
Rank 1
Parvinder asked on 18 Nov 2010, 11:05 AM
Hi, 

I m trying to customize RadRadioButton Styling in MS Blend-4 and following is the code of Style

<Style x:Key="RadRadioButtonStyle_TopMenuBar" TargetType="telerik:RadRadioButton">
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder_Normal}"/>
        <Setter Property="Background" Value="{StaticResource ControlBackground_Normal}"/>
        <Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="3"/>
        <Setter Property="CornerRadius" Value="{StaticResource ControlOuterBorder_CornerRadius}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadRadioButton">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Disabled"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#FF7F7F7F" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#00DFDEDE" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#FF303032" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#FF272729" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#FF272729" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#FF656567" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="0.293" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Offset)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(Shape.StrokeThickness)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#FF7F7F7F" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="1.203" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="2.125" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="3" Storyboard.TargetProperty="(Rectangle.RadiusX)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="3" Storyboard.TargetProperty="(Rectangle.RadiusY)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="0.878" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="0.878" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[3].(GradientStop.Offset)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#00CFCFCF" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Padding)" Storyboard.TargetName="textBlock">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Thickness>0</Thickness>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="3" Storyboard.TargetProperty="(Rectangle.RadiusX)" Storyboard.TargetName="rectangle_Copy" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="3" Storyboard.TargetProperty="(Rectangle.RadiusY)" Storyboard.TargetName="rectangle_Copy" d:IsOptimized="True"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="rectangle_Copy">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Thickness>0,0,0,18</Thickness>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0" To="0.263" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Offset)" Storyboard.TargetName="rectangle_Copy" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="0.509" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="rectangle_Copy" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="rectangle_Copy" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#FFD2D2D2" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="rectangle_Copy" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#FFBCBDBD" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="rectangle_Copy" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#FF959697" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle_Copy" d:IsOptimized="True"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)" Storyboard.TargetName="rectangle_Copy">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <VerticalAlignment>Stretch</VerticalAlignment>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ellipse">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Thickness>1,3,1,13</Thickness>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="ellipse" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#FFD2D2D2" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="ellipse" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#FF666769" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="ellipse" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="ellipse" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="-0.498" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ellipse" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="rectangle_Copy" d:IsOptimized="True"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked"/>
                                <VisualState x:Name="Indeterminate"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <!--<Telerik_Windows_Controls_Chromes:ButtonChrome BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" BorderThickness="{Binding BorderThickness, RelativeSource={RelativeSource TemplatedParent}}" Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}" CornerRadius="{TemplateBinding CornerRadius}" RenderNormal="{TemplateBinding IsBackgroundVisible}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderFocused="{TemplateBinding IsFocused}" RenderChecked="{TemplateBinding IsChecked}" RenderEnabled="{TemplateBinding IsEnabled}" telerik:StyleManager.Theme="{StaticResource Theme}" Style="{StaticResource ButtonChromeStyle_TopMenuBar}"/>-->
                        <Rectangle x:Name="rectangle" RadiusX="1" RadiusY="1" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <CompositeTransform/>
                            </Rectangle.RenderTransform>
                            <Rectangle.Stroke>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Offset="0"/>
                                    <GradientStop Color="Transparent" Offset="1"/>
                                    <GradientStop Color="Transparent" Offset="0.5"/>
                                    <GradientStop Color="#002B87CA" Offset="0.802"/>
                                </LinearGradientBrush>
                            </Rectangle.Stroke>
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="Transparent" Offset="0"/>
                                    <GradientStop Color="Transparent" Offset="1"/>
                                    <GradientStop Color="Transparent" Offset="0.421"/>
                                    <GradientStop Color="Transparent" Offset="0.42"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <Rectangle x:Name="rectangle_Copy" RadiusX="1" RadiusY="1" RenderTransformOrigin="0.5,0.5" Margin="0,0,0,18">
                            <Rectangle.RenderTransform>
                                <CompositeTransform/>
                            </Rectangle.RenderTransform>
                            <Rectangle.Stroke>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Offset="0"/>
                                    <GradientStop Color="Transparent" Offset="1"/>
                                    <GradientStop Color="Transparent" Offset="0.5"/>
                                    <GradientStop Color="#002B87CA" Offset="0.802"/>
                                </LinearGradientBrush>
                            </Rectangle.Stroke>
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="Transparent" Offset="0"/>
                                    <GradientStop Color="Transparent" Offset="1"/>
                                    <GradientStop Color="Transparent" Offset="0.421"/>
                                    <GradientStop Color="Transparent" Offset="0.42"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <Ellipse x:Name="ellipse" Margin="1,3,1,13" RenderTransformOrigin="0.5,0.5">
                            <Ellipse.RenderTransform>
                                <CompositeTransform/>
                            </Ellipse.RenderTransform>
                            <Ellipse.Fill>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="Transparent" Offset="0"/>
                                    <GradientStop Color="Transparent" Offset="1"/>
                                    <GradientStop Color="Transparent" Offset="0.421"/>
                                </LinearGradientBrush>
                            </Ellipse.Fill>
                            <Ellipse.Stroke>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Offset="0"/>
                                    <GradientStop Color="Transparent" Offset="1"/>
                                    <GradientStop Color="Transparent" Offset="0.5"/>
                                    <GradientStop Color="#002B87CA" Offset="0.802"/>
                                </LinearGradientBrush>
                            </Ellipse.Stroke>
                        </Ellipse>
                        <TextBlock x:Name="textBlock" Margin="{TemplateBinding Padding}" TextWrapping="Wrap" Text="{TemplateBinding Content}" d:LayoutOverrides="Width, Height" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Its working for Unckecked & Checked, the problem is when i m trying to add Mouse-Over Effect the Checked effect is getting lost so at a time only 1 effect is working (Checked or MouseOver)

So how to make both working in RadRadioButton 

Thanx in advanced.
 

1 Answer, 1 is accepted

Sort by
0
Accepted
Tina Stancheva
Telerik team
answered on 23 Nov 2010, 09:09 PM
Hi Parvinder ,

I already attached a sample project to the support thread you started. However, I will attach the sample project here as well and post the same answer, if anyone else encounters the same issues:

In order to edit the "MouseOverChecked" visual state you need to edit the ButtonChrome element's ControlTemplate as well as the RadRadioButton's template. Also, you can replace the RadRadioButton ContentPresenter with a TextBlock, but it would be best to keep the ButtonChrome element and edit its ControlTemplate to include the two Rectangles and the Ellipse. Then you will be able to edit the Checked visual states both for the ButtonChrome element and for the RadRadioButton. Also you can modify the "MouseOverChecked" visual state in the ButtonChrome ControlTemplate.


Regards,
Tina Stancheva
the Telerik team
Browse the videos here>> to help you get started with RadControls for Silverlight
Tags
Buttons
Asked by
Parvinder
Top achievements
Rank 1
Answers by
Tina Stancheva
Telerik team
Share this question
or