wpf自定义checkbox开关控件样式例子

xaml代码:

 代码如下 复制代码
<UserControl x:Class="Kaitone.DetectiveHelper.UI.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="24" d:DesignWidth="60">
    <Grid x:Name="LayoutRoot"
          Background="Transparent"
          Width="60" Height="24">
        <Border BorderBrush="#cccccc"
                BorderThickness="1" Margin="4,2"
                Padding="0" CornerRadius="8" Background="#2ecc71">
            <Rectangle Name="fillRectangle"
                       Fill="#e74c3c" RadiusX="8" RadiusY="8"
                       Visibility="Collapsed"/>
        </Border>
        <Border Name="slideBorder"
                BorderBrush="#aaaaaa"
                BorderThickness="1"
                HorizontalAlignment="Left" CornerRadius="15" Width="24" Height="24">
            <Rectangle Stroke="Brown"
                       Fill="#FFF1F1F1"
                       StrokeThickness="0"
                       Width="22" RadiusX="15" RadiusY="15"/>
        </Border>
    </Grid>
</UserControl>

Cs代码:主要是重构一http://www.111cn.net些事件和返回参数:

 代码如下 复制代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace Kaitone.DetectiveHelper.UI.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);
        }
    }
}
时间: 2024-12-16 13:47:10

wpf自定义checkbox开关控件样式例子的相关文章

WPF自定义控件与样式(8)-ComboBox与自定义多选控件MultComboBox

原文:WPF自定义控件与样式(8)-ComboBox与自定义多选控件MultComboBox 一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 下拉选择控件ComboBox的自定义样式及扩展: 自定义多选控件MultiComboBox: 二.下拉选择控件ComboBox的自定义样式及扩展 2.1基本样式 先看看基础效果图:   从功能上ComboBox有

自定义文件上传控件样式-input透明法

自定义文件上传控件样式-input透明法. 作为一个刚入坑不久的程序小白,今天和一个自定义<input type="file">控件的工作斗智斗勇了一上午.通过各种膜拜大神们的资料,总算最后有了一个还算看的过去的解决方案,来记录一下. 页面中,<input type="file">控件的默认显示 在Chrome中是这样: 在IE里是这样: 要如何使它变成下面这样,点击此区域也能上传文件呢? 原理:将input放进一个具有背景的div标签中,并

在Android开发中使用自定义组合控件的例子_Android

一.定义一个XML布局文件setting_item_view.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height=

WPF:DataTemplateSelector设置控件不同的样式

原文 WPF:DataTemplateSelector设置控件不同的样式 最近想实现这么个东西,一个ListBox, 里面的ListBoxItem可能是文本框.下拉框.日期选择控件等等. 很自然的想到了DataTemplateSelector,并且事先定义好各类DataTemplate以显示不同的控件. 先定义好各类资源     <Window.Resources>         <DataTemplate x:Key="textBox">          

android自定义开关控件-SlideSwitch的实例

iphone上有开关控件,很漂亮,其实android4.0以后也有switch控件,但是只能用在4.0以后的系统中,这就失去了其使用价值,而且我觉得它的界面也不是很好看.最近看到了百度魔拍上面的一个控件,觉得很漂亮啊,然后反编译了下,尽管没有混淆过,但是还是不好读,然后就按照自己的想法写了个,功能和百度魔拍类似. 下面是百度魔拍的效果和SlideSwitch的效果 一.原理 继承自view类,override其onDraw函数,把两个背景图(一个灰的一个红的)和一个开关图(圆开关)通过canva

UWP入门(四)--设置控件样式

原文:UWP入门(四)--设置控件样式 官方定义:可以使用 XAML 框架通过多种方式自定义应用的外观. 通过样式可以设置控件属性,并重复使用这些设置,以便保持多个控件具有一致的外观. 可分享至不同elements的资源中 创建可重用的style,并且这一资源可以分享至整单页面.多页面.整个 app,甚至不同的app? how to keep up with style in different app (pre-build theme) 预建主题 2. 直接看简单的Demo <Page.Res

Silverlight重写控件样式

在实际开发应用中,Silverlight默认控件样式并不能满足我们所有的需求,特别是对华丽界面的构造,需 要对现有控件进行皮肤重写.WPF/Silverlight中使用xaml描述界面,类似Css,它们同样有Style和Template .目前微软开源工具包中集成的均是复杂类型控件,如何修改它们的样式确实难倒了不少朋友,那么本节以分 析为主,结合对常用的NumericUpDown控件向大家讲解如何对现有控件进行样式重写. 首先打开工具包中的示例项目: 接着找到NumericUpDownSampl

【Silverlight】Bing Maps开发应用与技巧二:自定义图钉标注控件和动态ToolPa

[Silverlight]Bing Maps开发应用与技巧二:自定义图钉标注控件和动态ToolPanel 在Bing Maps Silverlight Control中以及为我们提供了地图图钉控件Pushpin,我曾经在<使用图钉层(Pushpin layer)及地图图层(MapLayer)>一文中介绍过他的使用方法,本篇主要介绍如何自定义图钉标注控件以及对他的一些扩展,比如实现图钉的动态ToolPanel. 关于图钉的UI外观的设计这里就不详细介绍了,通过Blend可以快速的构建UI界面.首

bootstrap switch开关控件

问题描述 bootstrap switch开关控件 bootstrap switch开关控件 首次F5刷新进入的时候一直为on 然而当来回切换页面后 显示正常 把样式去掉获取到的值是正确的,但加上样式后就没显示出来 解决方案 加上样式后就没显示出来 请问你加的是什么样式呢?样式可能会影响显示的哦. 解决方案二: 就这个bootstrap的开关样子 解决方案三: 参考这个http://blog.csdn.net/shaobingj126/article/details/17611365