Hi,
I m trying to customize RadRadioButton Styling in MS Blend-4 and following is the code of 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.
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.