WPF中的滑块开/关开关

我正在寻找一个WPF教程，介绍如何在iPhone上创建滑动开关

---

下面是一个示例（“发送所有流量”选项）

我还没有看到关于这个问题的教程，但我想您可以从启动Expression Blend并在其上添加复选框开始。然后选中复选框，转到主菜单-对象->编辑样式->编辑副本

这将使Blend生成复选框的默认样式，以便您可以修改它。看看那里的情况如何，你就能取得一些成果

基本上（除了颜色和笔刷之类的东西），您需要查看连接到IsChecked属性的触发器。 例如，当IsChecked为True时，将矩形移动到其中一侧，显示“开”字并隐藏“关”字。要对此设置动画，只需添加触发器输入和输出动画

UPD： 我花了10-15分钟在blend中制作了一个“原型”：

---

如果您感兴趣，我还建议您阅读WPF中的样式和模板。

我喜欢arconaut的漂亮原型，并添加了一些代码以使边框更圆

您必须从网格声明中删除“Background”属性，并在网格声明和第一个TextBlock声明之间添加以下行：

<Border
    x:Name="back"
    CornerRadius="3,3,3,3"
    BorderThickness="1"
    BorderBrush="#FFC0CCD9"
    >
    <Rectangle Fill="#FFC0CCD9"/>
</Border>

---

我根据arconaut用橙色和蓝色写的帖子创建了一些样式

截图：

我希望我的风格更接近iOS设备的开/关开关风格。这种样式的一个区别是，滑动动画只滑动开关，而不滑动下面的指示器。也许如果我能找到时间，我会这样修改它。在此之前，我想分享我的结果。这并不完美，但这里是代码

<LinearGradientBrush x:Key="CheckedBlue" StartPoint="0,0" EndPoint="0,1">
  <GradientStop Color="#FF285AB3" Offset="0" />
  <GradientStop Color="#FF4184EC" Offset="0.5" />
  <GradientStop Color="#FF558BED" Offset="0.5" />
  <GradientStop Color="#FF7DACF0" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="CheckedOrange" StartPoint="0,0" EndPoint="0,1">
  <GradientStop Color="#FFCA6A13" Offset="0" />
  <GradientStop Color="#FFF67D0C" Offset="0.2" />
  <GradientStop Color="#FFFE7F0C" Offset="0.2" />
  <GradientStop Color="#FFFA8E12" Offset="0.5" />
  <GradientStop Color="#FFFF981D" Offset="0.5" />
  <GradientStop Color="#FFFCBC5A" Offset="1" />
</LinearGradientBrush>
<SolidColorBrush x:Key="CheckedOrangeBorder" Color="#FF8E4A1B" />
<SolidColorBrush x:Key="CheckedBlueBorder" Color="#FF143874" />
<Style x:Key="OrangeSwitchStyle" TargetType="{x:Type CheckBox}">
  <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />
  <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type CheckBox}">
        <ControlTemplate.Resources>
          <Storyboard x:Key="OnChecking">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="slider" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
              <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="53" />
            </DoubleAnimationUsingKeyFrames>
          </Storyboard>
          <Storyboard x:Key="OnUnchecking">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="slider" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
              <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
          </Storyboard>
        </ControlTemplate.Resources>
        <DockPanel x:Name="dockPanel">
          <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding ContentTemplate}" RecognizesAccessKey="True" VerticalAlignment="Center" />
          <Grid>
            <Border x:Name="BackgroundBorder" BorderBrush="#FF939393" BorderThickness="1" CornerRadius="3" Height="27" Width="94">
              <Border.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                  <GradientStop Color="#FFB5B5B5" Offset="0" />
                  <GradientStop Color="#FFDEDEDE" Offset="0.1" />
                  <GradientStop Color="#FFEEEEEE" Offset="0.5" />
                  <GradientStop Color="#FFFAFAFA" Offset="0.5" />
                  <GradientStop Color="#FFFEFEFE" Offset="1" />
                </LinearGradientBrush>
              </Border.Background>
              <Grid>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition /><ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Ellipse x:Name="Off" Width="14" Height="14" Stroke="#FF7A7A7A" StrokeThickness="2" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" />
                <Line x:Name="On" X1="0" Y1="0" X2="0" Y2="14" Stroke="#FF7A7A7A" StrokeThickness="2" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" />
              </Grid>
            </Border>
            <Border BorderBrush="#FF939393" HorizontalAlignment="Left" x:Name="slider" Width="41" Height="27" BorderThickness="1" CornerRadius="3" RenderTransformOrigin="0.5,0.5" Margin="0">
              <Border.RenderTransform>
                <TransformGroup>
                  <ScaleTransform ScaleX="1" ScaleY="1" />
                  <SkewTransform AngleX="0" AngleY="0" />
                  <RotateTransform Angle="0" />
                  <TranslateTransform X="0" Y="0" />
                </TransformGroup>
              </Border.RenderTransform>
              <Border.Background>
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                  <GradientStop Color="#FFF0F0F0" Offset="0" />
                  <GradientStop Color="#FFCDCDCD" Offset="0.1" />
                  <GradientStop Color="#FFFBFBFB" Offset="1" />
                </LinearGradientBrush>
              </Border.Background>
            </Border>
          </Grid>
        </DockPanel>
        <ControlTemplate.Triggers>
          <Trigger Property="IsChecked" Value="True">
            <Trigger.ExitActions>
              <BeginStoryboard Storyboard="{StaticResource OnUnchecking}" x:Name="OnUnchecking_BeginStoryboard" />
            </Trigger.ExitActions>
            <Trigger.EnterActions>
              <BeginStoryboard Storyboard="{StaticResource OnChecking}" x:Name="OnChecking_BeginStoryboard" />
            </Trigger.EnterActions>
            <Setter TargetName="On" Property="Stroke" Value="White" />
            <Setter TargetName="Off" Property="Stroke" Value="White" />
            <!-- Change Orange or Blue color here -->
            <Setter TargetName="BackgroundBorder" Property="Background" Value="{StaticResource CheckedOrange}" />
            <Setter TargetName="BackgroundBorder" Property="BorderBrush" Value="{StaticResource CheckedOrangeBorder}" />
          </Trigger>
          <Trigger Property="IsEnabled" Value="False">
            <!-- ToDo: Add Style for Isenabled == False -->
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

---

我刚刚发布了一个与此相关的条目，它提供了适当的滑动动作、完整的可配置性，并且不需要固定大小（我很恼火，因为我在网上找不到任何提供这种解决方案的东西）

你可以在这里找到它：

---

我知道现在回答这个问题已经晚了，但希望它能帮助将来的任何人。

好吧，我开始完成同样的任务，但示例与生产代码有点距离。例如，如果将文本放入控件（如打开/关闭或文本的本地化版本），则答案是必须定义控件的大小，因为渲染控件后无法修改动画或模板触发器。这为您提供了一个“一刀切”的解决方案，该解决方案不适用于本地化文本

我的解决方案是使用控件加载的事件a动态创建控件的模板

<LinearGradientBrush x:Key="CheckedBlue" StartPoint="0,0" EndPoint="0,1">
  <GradientStop Color="#FF285AB3" Offset="0" />
  <GradientStop Color="#FF4184EC" Offset="0.5" />
  <GradientStop Color="#FF558BED" Offset="0.5" />
  <GradientStop Color="#FF7DACF0" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="CheckedOrange" StartPoint="0,0" EndPoint="0,1">
  <GradientStop Color="#FFCA6A13" Offset="0" />
  <GradientStop Color="#FFF67D0C" Offset="0.2" />
  <GradientStop Color="#FFFE7F0C" Offset="0.2" />
  <GradientStop Color="#FFFA8E12" Offset="0.5" />
  <GradientStop Color="#FFFF981D" Offset="0.5" />
  <GradientStop Color="#FFFCBC5A" Offset="1" />
</LinearGradientBrush>
<SolidColorBrush x:Key="CheckedOrangeBorder" Color="#FF8E4A1B" />
<SolidColorBrush x:Key="CheckedBlueBorder" Color="#FF143874" />
<Style x:Key="OrangeSwitchStyle" TargetType="{x:Type CheckBox}">
  <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />
  <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type CheckBox}">
        <ControlTemplate.Resources>
          <Storyboard x:Key="OnChecking">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="slider" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
              <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="53" />
            </DoubleAnimationUsingKeyFrames>
          </Storyboard>
          <Storyboard x:Key="OnUnchecking">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="slider" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
              <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
          </Storyboard>
        </ControlTemplate.Resources>
        <DockPanel x:Name="dockPanel">
          <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding ContentTemplate}" RecognizesAccessKey="True" VerticalAlignment="Center" />
          <Grid>
            <Border x:Name="BackgroundBorder" BorderBrush="#FF939393" BorderThickness="1" CornerRadius="3" Height="27" Width="94">
              <Border.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                  <GradientStop Color="#FFB5B5B5" Offset="0" />
                  <GradientStop Color="#FFDEDEDE" Offset="0.1" />
                  <GradientStop Color="#FFEEEEEE" Offset="0.5" />
                  <GradientStop Color="#FFFAFAFA" Offset="0.5" />
                  <GradientStop Color="#FFFEFEFE" Offset="1" />
                </LinearGradientBrush>
              </Border.Background>
              <Grid>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition /><ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Ellipse x:Name="Off" Width="14" Height="14" Stroke="#FF7A7A7A" StrokeThickness="2" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" />
                <Line x:Name="On" X1="0" Y1="0" X2="0" Y2="14" Stroke="#FF7A7A7A" StrokeThickness="2" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" />
              </Grid>
            </Border>
            <Border BorderBrush="#FF939393" HorizontalAlignment="Left" x:Name="slider" Width="41" Height="27" BorderThickness="1" CornerRadius="3" RenderTransformOrigin="0.5,0.5" Margin="0">
              <Border.RenderTransform>
                <TransformGroup>
                  <ScaleTransform ScaleX="1" ScaleY="1" />
                  <SkewTransform AngleX="0" AngleY="0" />
                  <RotateTransform Angle="0" />
                  <TranslateTransform X="0" Y="0" />
                </TransformGroup>
              </Border.RenderTransform>
              <Border.Background>
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                  <GradientStop Color="#FFF0F0F0" Offset="0" />
                  <GradientStop Color="#FFCDCDCD" Offset="0.1" />
                  <GradientStop Color="#FFFBFBFB" Offset="1" />
                </LinearGradientBrush>
              </Border.Background>
            </Border>
          </Grid>
        </DockPanel>
        <ControlTemplate.Triggers>
          <Trigger Property="IsChecked" Value="True">
            <Trigger.ExitActions>
              <BeginStoryboard Storyboard="{StaticResource OnUnchecking}" x:Name="OnUnchecking_BeginStoryboard" />
            </Trigger.ExitActions>
            <Trigger.EnterActions>
              <BeginStoryboard Storyboard="{StaticResource OnChecking}" x:Name="OnChecking_BeginStoryboard" />
            </Trigger.EnterActions>
            <Setter TargetName="On" Property="Stroke" Value="White" />
            <Setter TargetName="Off" Property="Stroke" Value="White" />
            <!-- Change Orange or Blue color here -->
            <Setter TargetName="BackgroundBorder" Property="Background" Value="{StaticResource CheckedOrange}" />
            <Setter TargetName="BackgroundBorder" Property="BorderBrush" Value="{StaticResource CheckedOrangeBorder}" />
          </Trigger>
          <Trigger Property="IsEnabled" Value="False">
            <!-- ToDo: Add Style for Isenabled == False -->
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>