Inner ellipse is not in centre position - wpf

Question

I need to customise the RadioButton with animation and I modified inner ellipse for an animation. But the inner ellipse is not loaded in Centre position, any solution for this?
I have used the style and the sample code is given below. I have just used the DoubleAnimation for the inner ellipse.
<Style x:Key="RadioButtonStyle" TargetType="RadioButton">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="LightGray"/>
<Setter Property="Foreground" Value="#333333"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="Padding" Value="10 0"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid x:Name="Root" Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation To="0.3" Duration="0" Storyboard.TargetName="Content" Storyboard.TargetProperty="(UIElement.Opacity)"/>
<DoubleAnimation To="0.6" Duration="0" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Opacity)"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimation From="8" To="0" Duration="0:0:0.2" Storyboard.TargetName="CheckVisual" Storyboard.TargetProperty="(FrameworkElement.Width)"/>
<DoubleAnimation From="8" To="0" Duration="0:0:0.2" Storyboard.TargetName="CheckVisual" Storyboard.TargetProperty="(FrameworkElement.Height)"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation From="0" To="8" Duration="0:0:0.2" Storyboard.TargetName="CheckVisual" Storyboard.TargetProperty="(FrameworkElement.Width)"/>
<DoubleAnimation From="0" To="8" Duration="0:0:0.2" Storyboard.TargetName="CheckVisual" Storyboard.TargetProperty="(FrameworkElement.Height)"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate">
<Storyboard>
<DoubleAnimation From="0" To="1" Duration="0" Storyboard.TargetName="IndeterminateVisual" Storyboard.TargetProperty="(UIElement.Opacity)"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation From="0" To="1" Duration="0" Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="(UIElement.Opacity)"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid x:Name="grid" Margin="1" Width="13" Height="13" VerticalAlignment="Center" Background="Transparent" HorizontalAlignment="Left">
<Ellipse x:Name="normal"
SnapsToDevicePixels="True"
Stretch="Uniform"
Stroke="{TemplateBinding BorderBrush}"
Fill="{TemplateBinding Background}"/>
<Ellipse x:Name="CheckVisual"
SnapsToDevicePixels="True"
Fill="#1ba1e2"
Stretch="Uniform"
Width="0"
Height="0"/>
<Path x:Name="IndeterminateVisual" Fill="White" Margin="3" Opacity="0">
<Path.Data>
<GeometryGroup>
<EllipseGeometry Center="3.5 3.5" RadiusX="3.5" RadiusY="3.5"/>
<RectangleGeometry Rect="1 3 5 1"/>
</GeometryGroup>
</Path.Data>
</Path>
<Ellipse x:Name="FocusVisual" Stroke="Gray" Opacity="0"/>
</Grid>
<ContentPresenter x:Name="Content"
Grid.Column="1"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Left"
Margin="0,4,0,0">
<RadioButton HorizontalAlignment="Left"
IsChecked="True"
Content="Not Required"
Style="{StaticResource RadioButtonStyle}"
GroupName="Display"/>
<RadioButton HorizontalAlignment="Left"
GroupName="Display"
Content="Required "
Style="{StaticResource RadioButtonStyle}"
Margin="35,0,0,0"/>
</StackPanel>
</Grid>
Thanks in Advance.

Answer 1

Your parent Grid container is 13, and your ellipse is at size is 8.
Since 13 / 8 = 1.625, the spacing can not be equal to center the inner ellipse when it makes the measure()/arrange() pass to set it horizontal center -- so the offset would be expected.
So your answer is just simple math, if you want it to center correctly change your Grid parent container size to something divisible like Height="12" Width="12" and it will be centered as you require.
Hope this helps, cheers!

Answer 2

Thank chris, your solution is not working, where its working fine after changing to 14 for Grid and 8 for Ellipse. Still I cant understand the exact reason.