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

Styling radio button

1 Answer 172 Views

Buttons

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

This question is locked. New answers and comments are not allowed.

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"/>

<DoubleAnimation Duration="0" To="-0.498" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ellipse" 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

Accepted

answered on 23 Nov 2010, 09:09 PM

368554-radiobuttoncustomstyle.zip

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