Styling radio button

2 posts, 1 answers
  1. Parvinder
    Parvinder  avatar
    1 posts
    Member since:
    Nov 2010

    Posted 18 Nov 2010 Link to this post

    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.
     
  2. Answer
    Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 23 Nov 2010 Link to this post

    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
  3. DevCraft banner
Back to Top