WPF 滑块开关 转换器 对XML的操作

今天大清早起床打开微信朋友圈看到大学同学院一哥们发的结婚的照片，在此遥祝一对新人：新婚快乐，百年好合！这哥们大学时时班长，结婚也来了好多同学，不由得觉得吾等屌丝大学确实留下了很多遗憾~哦，对了，这哥们还跟我现在在一个公司的不同部门里，听说他也混的如鱼得水，祝福！

转到正题，今天想记录的知识点有三个：

1.wpf样式实现安卓和苹果移动终端上的滑块式开关；

2.wpf转换器的使用；

3.c#对xml文件的操作；

说说需求，项目上要手动打开配置文件修改里面的值，确切来说是在true和false中间切换里面一个配置的值。想着给客户上线使用，让他们打开配置文件切换值肯定是不好的，就想着做个图形界面的开关。觉得手机终端的滑块式开关不错，就自己写了一个。先看手机上的滑块式开关是什么样的：

对，就要这种效果。

先看XAML界面的代码吧：

<Window x:Class="ModifyConfig.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:ModifyConfig"
        Title="MainWindow"
        Width="525"
        Height="350">
    <Window.Resources>

        <local:GradeState x:Key="GradeState" />
        
        <Style x:Key="CheckRadioFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="14,0,0,0"
                                   SnapsToDevicePixels="true"
                                   Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
                                   StrokeDashArray="1 2"
                                   StrokeThickness="1" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="SliderCheckBox" TargetType="{x:Type CheckBox}">
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type CheckBox}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="StoryboardIsChecked">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="CheckFlag" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="14" />
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="StoryboardIsCheckedOff">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="CheckFlag" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="14" />
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <BulletDecorator Background="Transparent" SnapsToDevicePixels="true">
                            <BulletDecorator.Bullet>
                                <Border x:Name="ForegroundPanel"
                                        Width="35"
                                        Height="20"
                                        BorderThickness="1"
                                        CornerRadius="10">
                                    <Canvas>
                                        <Border x:Name="CheckFlag"
                                                Width="19"
                                                Height="18"
                                                VerticalAlignment="Center"
                                                Background="{Binding Converter={StaticResource GradeState} }"
                                                BorderThickness="1"
                                                CornerRadius="10"
                                                RenderTransformOrigin="0.5,0.5">
                                            <Border.RenderTransform>
                                                <TransformGroup>
                                                    <ScaleTransform />
                                                    <SkewTransform />
                                                    <RotateTransform />
                                                    <TranslateTransform />
                                                </TransformGroup>
                                            </Border.RenderTransform>
                                            <Border.Effect>
                                                <DropShadowEffect Direction="180" ShadowDepth="1" />
                                            </Border.Effect>
                                        </Border>
                                    </Canvas>
                                </Border>
                            </BulletDecorator.Bullet>
                            <ContentPresenter Margin="{TemplateBinding Padding}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="Center"
                                              RecognizesAccessKey="True"
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </BulletDecorator>
                        <ControlTemplate.Triggers>
                            <Trigger Property="HasContent" Value="true">
                                <Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}" />
                                <Setter Property="Padding" Value="4,0,0,0" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="ForegroundPanel" Property="Background" Value="LightGreen" />
                                <Trigger.EnterActions>
                                    <BeginStoryboard x:Name="BeginStoryboardCheckedTrue" Storyboard="{StaticResource StoryboardIsChecked}" />
                                    <RemoveStoryboard BeginStoryboardName="BeginStoryboardCheckedFalse" />
                                </Trigger.EnterActions>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="False">
                                <Setter TargetName="ForegroundPanel" Property="Background" Value="LightGray" />
                                <Trigger.EnterActions>
                                    <BeginStoryboard x:Name="BeginStoryboardCheckedFalse" Storyboard="{StaticResource StoryboardIsCheckedOff}" />
                                    <RemoveStoryboard BeginStoryboardName="BeginStoryboardCheckedTrue" />
                                </Trigger.EnterActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Canvas>
        <TextBlock Text="是否开启考试模式:" Canvas.Left="27" Canvas.Top="12" />
        <CheckBox Width="200"
                  Height="23"
                  Style="{DynamicResource SliderCheckBox}" 
                  x:Name="Switch_IsExamMode"
                  Click="IsExamMode_Click" Canvas.Left="132" Canvas.Top="12" />

    </Canvas>
</Window>

下面的是后台cs文件的代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
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;
using System.Xml;
using System.Globalization;

namespace ModifyConfig
{    
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        /// <summary>
        /// 是否考试模式
        /// </summary>
        private bool _isExamMode;

        /// <summary>
        /// 是否考试模式
        /// </summary>
        public bool IsExamMode
        {
            get { return _isExamMode; }
            set { _isExamMode = value; }
        }

        /// <summary>
        /// 主窗口初始化
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();
            Switch_IsExamMode.IsChecked = GetIsExamMode();
            IsExamMode = (bool)Switch_IsExamMode.IsChecked;
            Switch_IsExamMode.DataContext = IsExamMode;
        }
        /// <summary>
        /// 点击开关触发的事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void IsExamMode_Click(object sender, RoutedEventArgs e)
        {
            IsExamMode = (bool)Switch_IsExamMode.IsChecked;
            Switch_IsExamMode.DataContext = IsExamMode;
            SetIsExamMode();
        }
        /// <summary>
        /// 得到XML文件中的节点值
        /// </summary>
        /// <returns></returns>
        private bool GetIsExamMode()
        {
            XmlDocument xmlDoc = new XmlDocument();
            xmlDoc.Load(@"......configPlatform.System.Config");
            XmlNodeList accountList = xmlDoc.SelectSingleNode("configuration").ChildNodes;
            foreach (XmlNode account in accountList)
            {
                if (account.Name == "add" && account.Attributes["key"].Value.ToString() == "InExamMode")
                {
                    return account.Attributes["value"].Value == "True" ? true : false;
                }
            }
            return false;
        }
        /// <summary>
        /// 向xml文件中写入值
        /// </summary>
        private void SetIsExamMode()
        {
            XmlDocument xmlDoc = new XmlDocument();
            xmlDoc.Load(@"......configPlatform.System.Config");
            XmlNodeList accountList = xmlDoc.SelectSingleNode("configuration").ChildNodes;
            foreach (XmlNode account in accountList)
            {
                if (account.Name == "add")
                {
                    //if account exists
                    if ("InExamMode" == account.Attributes["key"].Value.ToString())
                    {
                        if ((bool)Switch_IsExamMode.IsChecked)
                        {
                            account.Attributes["value"].Value = "True";
                        }
                        else
                        {
                            account.Attributes["value"].Value = "False";
                        }
                        xmlDoc.Save(@"......configPlatform.System.Config");
                    }
                }
            }
        }
    }
    /// <summary>
    /// 转换器
    /// </summary>
    public class GradeState : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value == null)
                return null;
            dynamic data = value;
            if ((bool)data)
                return new SolidColorBrush(Colors.Green);
            else
                return new SolidColorBrush(Colors.Gray);
        }
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

样式实现滑块开关没什么难度，说说转换器，转换器的使用，1.增加一个转换器的类，它继承于接口IValueConverter，2.实现该接口的两个方法，Convert(object value, Type targetType, object parameter, CultureInfo culture)和ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)；第二个方法一般都是throw new NotImplementedException();3.XAML界面资源里声明该转换器（第10行）；4.XAML界面需要转换的地方使用该转换器（第58行）。

xml文件的操作我这边比较简单，有读取节点属性值和设置节点值两个功能。

下面是我们的配置文件Platform.System.Config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <add key="TradeMainVersion" value="1" />
  <add key="IsDebugMode" value="False" />
  <add key="IsStartHardDiskNumber" value="False" />
  <add key="PlatformTitle" value="综合业务前端系统" />
  <add key="PagesDirectory" value="TellerSysPages" />
  <add key="UpdateApplication" value="TellerSystem.Update.exe" />
  <add key="TempFilePath" value="tmp/" />
  <add key="ConfigFilePath" value="TellerSysconf/" />
  <!--是否启动动画-->
  <add key="AnimationEnable" value="True" />
  <!--是否启用权限控制-->
  <add key="IsPowerCheckByUser" value="False" />
  <!--启用项目层更新交易dll True:项目层更新，False:底层更新 -->
  <add key="IsFromProjectDownLoadTradeDll" value="False" />
  <!--是否启用客户端更新-->
  <add key="IsUpdateCheckForClient" value="True" />
  <!--是否越过支付密码器检查-->
  <add key="IsSkipCheckPayPassword" value="True" />
  <!--是否越过验印流水检查-->
  <add key="IsSkipCheckYanYinWater" value="True" />
  <!--是否启用考试模式-->
  <add key="InExamMode" value="False" />
  <!--是否外设调试模式-->
  <add key="InDeviceDebugMode" value="True" />
</configuration>

看看最后的运行结果：

关闭时：

开启时：

下载源码压缩包链接：http://files.cnblogs.com/files/zhangyongheng/ModifyConfig.rar

2015-05-05 10:43:53