极品分享

C# WPF 用户控件方式 做开关按钮样式


用户控件xaml代码:

<UserControl x:Class="Easy5.WPF.Controls.ToggleSwitchButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="36" d:DesignWidth="96">
    <Grid x:Name="LayoutRoot"
          Background="Transparent"
          Width="96" Height="36">
        <Border BorderBrush="BurlyWood"
                BorderThickness="2" Margin="4,2"
                Padding="4">
            <Rectangle Name="fillRectangle"
                       Fill="Red"
                       Visibility="Collapsed"/>
        </Border>
        <Border Name="slideBorder"
                BorderBrush="DarkGray"
                BorderThickness="4,0"
                HorizontalAlignment="Left">
            <Rectangle Stroke="Black"
                       Fill="Black"
                       StrokeThickness="2"
                       Width="20"/>
            
        </Border>
    </Grid>
</UserControl>


用户控件xaml.cs代码

using System.Windows;using System.Windows.Input;using System.Windows.Controls;namespace Easy5.WPF.Controls
{    /// <summary>
    /// ToggleSwitchButton.xaml 的交互逻辑    /// </summary>
    public partial class ToggleSwitchButton : UserControl
    {        public static readonly DependencyProperty IsCheckedProperty =
            DependencyProperty.Register("IsChecked", typeof (bool), typeof (ToggleSwitchButton), new PropertyMetadata(default(bool), OnIsCheckedChanged));        public event RoutedEventHandler Checked;        public event RoutedEventHandler UnChecked;        public bool IsChecked
        {            get { return (bool) GetValue(IsCheckedProperty); }            set { SetValue(IsCheckedProperty, value); }
        }   

        public ToggleSwitchButton()
        {
            InitializeComponent();
        }        private static void OnIsCheckedChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
        {
            (obj as ToggleSwitchButton).OnIsCheckedChanged(args);
        }        private void OnIsCheckedChanged(DependencyPropertyChangedEventArgs args)
        {
            fillRectangle.Visibility = IsChecked ? Visibility.Visible : Visibility.Collapsed;
            slideBorder.HorizontalAlignment = IsChecked ? HorizontalAlignment.Right : HorizontalAlignment.Left;            if (IsChecked && Checked != null)
            {
                Checked(this, new RoutedEventArgs());
            }            if (!IsChecked && UnChecked != null)
            {
                UnChecked(this, new RoutedEventArgs());
            }
        }        protected override void OnMouseLeftButtonUp(MouseButtonEventArgs args)
        {
            args.Handled = true;
            IsChecked ^= true;            base.OnMouseLeftButtonUp(args);
        }

    }
}


在需要使用该开关控件的界面xaml中调用该用户控件:

<Window x:Class="Easy5.WPF.Controls.Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:easy5button="clr-namespace:Easy5.WPF.Controls;assembly=Easy5.WPF.Controls"
        xmlns:button="clr-namespace:Easy5.WPF.Controls;assembly=Easy5.WPF.Controls"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel>
            <button:ToggleSwitchButton
                Checked="ToggleSwitchButton_OnChecked"
                UnChecked="ToggleSwitchButton_OnUnChecked"/>
        </StackPanel>
    </Grid>
</Window>


在需要使用该开关的界面xaml.cs中增加该用户控件的方法

//选中
private void ToggleSwitchButton_OnChecked(object sender, RoutedEventArgs e)
{
  //选中时的业务逻辑
}

//未选中
private void ToggleSwitchButton_OnUnChecked(object sender, RoutedEventArgs e)
{
  //未选中时的业务逻辑
}


该用户控件的外观挺丑的,需要的自己做调整吧!

2020-05-20 0 /
NET学习
/
标签: 

评论回复

回到顶部