内椭圆不在中心位置

时间:2017-03-07 08:07:11

标签: wpf xaml radio-button

我需要使用动画自定义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>

先谢谢。

2 个答案:

答案 0 :(得分:1)

您的父Grid容器是13,而您的椭圆的大小是8。

由于13/8 = 1.625,当使得measure()/ arrange()通过以将其设置为水平中心时,间距不能等于内椭圆的中心 - 因此可以预期偏移。

所以你的答案只是简单的数学,如果你想让它正确地将你的Grid父容器大小正确地改为像Height="12" Width="12"那样可以整除的东西,它将按你的要求居中。

希望这有帮助,欢呼!

答案 1 :(得分:0)

感谢克里斯,您的解决方案无法正常工作,在更改为14为Grid和8为Ellipse后,其工作正常。我仍然无法理解确切的原因。