ToggleButton向右推

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

为什么这种风格需要足够多的余量才能让它坐得太远......我想你会希望控件占据其父项的整个空间并随之扩展？

下面是引用的文章的代码的完整性的缘故：

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

它没有考虑到如何检查当按钮被移动（旋钮沿着×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"/> 

宽度尝试改变画布宽度到外部。就像这样：

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