内側の楕円が中心位置にありません

Question

アニメーションでRadioButtonをカスタマイズし、アニメーションの内部楕円を変更する必要があります。しかし、内側の楕円はセンターの位置に読み込まれていません。

私はスタイルを使用しており、サンプルコードは次のとおりです。私はちょうどDoubleAnimationを内側の楕円に使用しました。

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

ありがとうございました。

Answer 1

あなたの親Grid容器13であり、そしてあなたの楕円のサイズで13/8は= 1.625 8

である、間隔は、それが（測定を行ったとき、内側楕円の中心を等しくすることはできません）/ alignge（）を渡して水平中心に設定します。オフセットが必要です。

答えが単純な数学であるため、正確に中心にしたい場合は、Grid親コンテナのサイズをHeight="12" Width="12"のように割り切れるものに変更し、必要に応じて中央に配置します。

願わくは、これがうれしい！

Answer 2

ありがとうございました。あなたの解決策は動作していません。グリッドでは14、楕円では8に変更しても問題はありません。それでも私は正確な理由を理解することはできません。