WPF可切换按钮,iOS风格

定义一个按钮样式

<Window x:Class="WpfApp2可切换按钮.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp2可切换按钮"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="450"
        Width="800">
    <Window.Resources>
        <local:ToggleBtnCornorRadiusCvt x:Key="BtnCornorRadiusCvt"></local:ToggleBtnCornorRadiusCvt>


        <Style x:Key="ToggleButtonStyle1"
               TargetType="{x:Type ToggleButton}">
            <Setter Property="FocusVisualStyle"
                    Value="{x:Null}" />
            <Setter Property="Background"
                    Value="White" />
            <Setter Property="BorderBrush"
                    Value="Gray" /> 
            <Setter Property="BorderThickness"
                    Value="1" />
            <Setter Property="HorizontalContentAlignment"
                    Value="Center" />
            <Setter Property="VerticalContentAlignment"
                    Value="Center" />
            <Setter Property="Padding"
                    Value="1" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}"> 
                        <Grid>
                            <Border Name="bd"
                                    Background="White"
                                    BorderBrush="Gray"
                                    BorderThickness="1" 
                                    CornerRadius="{Binding ActualHeight,RelativeSource={RelativeSource Self},Converter={StaticResource  BtnCornorRadiusCvt}}"></Border>
                            <Ellipse Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}"
                                     Stroke="Gray"
                                     Fill="White"
                                     HorizontalAlignment="Left"
                                     Name="ec"></Ellipse>
                        </Grid>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked"
                                     Value="True">
                                <Setter Property="HorizontalAlignment"
                                        Value="Right"
                                        TargetName="ec"></Setter>
                                <Setter Property="Background"
                                        Value="Green"
                                        TargetName="bd"></Setter>
                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <ToggleButton Style="{DynamicResource ToggleButtonStyle1}"></ToggleButton>
    </Grid>
</Window>

  

定义一个转换器

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Data;

namespace WpfApp2可切换按钮
{
   public class ToggleBtnCornorRadiusCvt:IValueConverter

    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if(value is double  d)
            {
                return d / 2;
            }

            return 0;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

  效果图

原文地址:https://www.cnblogs.com/congqiandehoulai/p/15254257.html