イメージはこんな感じ。
クリックすると黒い境界が動いてON<->OFFが切り替わる。
Template内にサイズを持たせているので微妙なんだけどねぇ。
XAMLを貼付けておく。
<ControlTemplate x:Key="ToggleSwitchControlTemplate" TargetType="ToggleButton">
<Grid Height="22">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2" To="Checked"/>
<VisualTransition GeneratedDuration="0:0:0.2" To="Unchecked"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked"/>
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" To="-45" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="grid" d:IsOptimized="True">
<DoubleAnimation.EasingFunction>
<CircleEase EasingMode="EaseIn"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Canvas>
<Canvas.Clip>
<RectangleGeometry Rect="0,0,55,22" />
</Canvas.Clip>
<Grid x:Name="grid" Height="22" Width="100" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<CompositeTransform TranslateX="0"/>
</Grid.RenderTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="45"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="45"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Background="White" BorderThickness="2,2,0,2" BorderBrush="Gray">
<Border Margin="2,2,0,2" Background="#FF41B1E1">
<TextBlock Text="ON" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Foreground="White"/>
</Border>
</Border>
<Border Grid.Column="1" Background="Black"/>
<Border Grid.Column="2" Background="White" BorderThickness="0,2,2,2" BorderBrush="Gray">
<Border Margin="0,2,2,2" Background="Gray">
<TextBlock Text="OFF" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Foreground="White"/>
</Border>
</Border>
</Grid>
</Canvas>
</Grid>
</ControlTemplate>
0 件のコメント:
コメントを投稿