內部橢圓不在中心位置

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，和你的橢圓是在大小爲8

自13/8 = 1.625，間隔可以不是當它使得該措施（）等於居中內橢圓/ arrange（）通過將其設置爲水平中心 - 因此可以預期偏移量。

所以你的答案只是簡單的數學，如果你想它正確居中改變你的Grid父容器大小爲Height="12" Width="12"可以劃分的東西，它會按照你的要求居中。

希望這有助於，歡呼！

Answer 2

謝謝克里斯，你的解決方案是行不通的，在改爲14網格和8橢圓後其工作的罰款。我仍然無法理解確切的原因。