Question

我已经将article的代码格式复制到如何制作iOS样式切换按钮。

效果很好，唯一的问题就是坐在右侧，看起来很大的余量正在移动它......

<ToggleButton 
    Style="{StaticResource AnimatedSwitch}" 
    Height="30" 
    Grid.Column="1" 
    Width="50" 
    Margin="-20, 4, 0, 5"
    Checked="ToggleButton_Checked" 
    Unchecked="ToggleButton_OnUnchecked"/>

为什么这种风格需要这么大的余量才能让它坐得太远...我想你会希望控件占据其父级的整个空间并随之缩放？ / p>

为了完整起见，参考文章中的代码：

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Page.Resources>
      <ResourceDictionary>
         <Style x:Key="AnimatedSwitch" TargetType="{x:Type ToggleButton}">
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="Background" Value="#FAFAFB" />
            <Setter Property="BorderBrush" Value="#EAEAEB" />
            <Setter Property="Template">
               <Setter.Value>
                  <ControlTemplate TargetType="ToggleButton">
                     <Viewbox Stretch="Uniform">
                        <Canvas Name="Layer_1" Width="20" Height="20" Canvas.Left="10" Canvas.Top="0">
                           <Ellipse  Canvas.Left="0" Width="20" Height="20" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.5"/>
                           <Ellipse  Canvas.Left="15" Width="20" Height="20" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.5"/>
                           <Border Canvas.Left="10" Width="15" Height="20" Name="rect416927" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0.5,0,0.5"/>
                           <Ellipse x:Name="ellipse"  Canvas.Left="0" Width="20" Height="20" Fill="White" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.3">
                              <Ellipse.RenderTransform>
                                 <TranslateTransform X="0" Y="0" />
                              </Ellipse.RenderTransform>
                              <Ellipse.BitmapEffect>
                                 <DropShadowBitmapEffect Softness="0.1" ShadowDepth="0.7" Direction="270" Color="#BBBBBB"/>
                              </Ellipse.BitmapEffect>
                           </Ellipse>
                        </Canvas>
                     </Viewbox>
                     <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True" >
                           <Trigger.EnterActions>
                              <BeginStoryboard>
                                 <Storyboard>
                                    <ColorAnimation Storyboard.TargetProperty="Background.Color" To="#52D468" Duration="0:0:0.2" />
                                    <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="#41C955" Duration="0:0:0.2" />
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ellipse">
                                       <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                                       <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="15" KeySpline="0, 1, 0.6, 1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                 </Storyboard>
                              </BeginStoryboard>
                           </Trigger.EnterActions>
                           <Trigger.ExitActions>
                              <BeginStoryboard>
                                 <Storyboard>
                                    <ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FAFAFB" Duration="0:0:0.2" />
                                    <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="#EAEAEB" Duration="0:0:0.2" />
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ellipse">
                                       <SplineDoubleKeyFrame KeyTime="0" Value="15"/>
                                       <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0" KeySpline="0, 0.5, 0.5, 1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                 </Storyboard>
                              </BeginStoryboard>
                           </Trigger.ExitActions>
                        </Trigger>
                     </ControlTemplate.Triggers>
                  </ControlTemplate>
               </Setter.Value>
            </Setter>
         </Style>
      </ResourceDictionary>
   </Page.Resources>
   <Grid>
      <ToggleButton Style="{StaticResource AnimatedSwitch}" Height="80"/>
   </Grid>
</Page>

Answer 1

问题似乎出在这一行：

<Canvas Name="Layer_1" Width="20" Height="20" Canvas.Left="10" Canvas.Top="0">

没有考虑按钮在选中时的移动方式（旋钮沿x平移了15个像素）。所以一定是：

<Canvas Name="Layer_1" Width="35" Height="20" Canvas.Left="10" Canvas.Top="0">

现在你可以使用

<ToggleButton Style="{StaticResource AnimatedSwitch}" HorizontalAlignment="Right" Height="80"/>

以便将按钮精确定位在右边缘。

Answer 2

我阅读了切换按钮的模板，在这里，你可以看到，有一个画布，里面有一些椭圆。

第二个从第一个移位15。这样做，会超出宽度为20的画布表面。

<Canvas Name="Layer_1" Width="20" Height="20" Canvas.Left="10" Canvas.Top="0">
      <Ellipse  Canvas.Left="0" Width="20" Height="20" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.5"/>
      <Ellipse  Canvas.Left="15" Width="20" Height="20" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.5"/>

尝试将画布宽度更改为 35 。像这样：

<Canvas Name="Layer_1" Width="35" Height="20" Canvas.Left="10" Canvas.Top="0">

ToggleButton推向右边

2 个答案: