我需要使用动画自定义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>
先谢谢。
答案 0 :(得分:1)
您的父Grid
容器是13,而您的椭圆的大小是8。
由于13/8 = 1.625,当使得measure()/ arrange()通过以将其设置为水平中心时,间距不能等于内椭圆的中心 - 因此可以预期偏移。
所以你的答案只是简单的数学,如果你想让它正确地将你的Grid
父容器大小正确地改为像Height="12" Width="12"
那样可以整除的东西,它将按你的要求居中。
希望这有帮助,欢呼!
答案 1 :(得分:0)
感谢克里斯,您的解决方案无法正常工作,在更改为14为Grid和8为Ellipse后,其工作正常。我仍然无法理解确切的原因。