WPF MVVM，Binding和Converter的简单使用

需求：窗口中有红黄蓝三个矩形，显示其中一个矩形时隐藏另外两个矩形。

运行效果：

 

xaml代码

<Window x:Class="WpfBinding.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:WpfBinding"
        mc:Ignorable="d"
        xmlns:converter="clr-namespace:WpfBinding.Converters"
        Title="MainWindow" Height="397.2" Width="552.8">
    <Window.Resources>
        <ResourceDictionary>
            <converter:MyConverter x:Key="MyConverter"></converter:MyConverter>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <Grid Visibility="{Binding color ,Converter={StaticResource MyConverter},ConverterParameter=red}" 
              HorizontalAlignment="Left" Height="60" Margin="70,50,0,0" 
              VerticalAlignment="Top" Width="110" OpacityMask="Black" Background="Red" />
        <Grid Visibility="{Binding color ,Converter={StaticResource MyConverter},ConverterParameter=yellow}" 
              HorizontalAlignment="Left" Height="60" Margin="70,120,0,0" 
              VerticalAlignment="Top" Width="110" OpacityMask="Black" Background="Yellow" />
        <Grid Visibility="{Binding color ,Converter={StaticResource MyConverter},ConverterParameter=blue}" 
              HorizontalAlignment="Left" Height="60" Margin="70,190,0,0" 
              VerticalAlignment="Top" Width="110" OpacityMask="Black" Background="Blue" />
        <TextBox Text="{Binding color}" HorizontalAlignment="Left" Height="23" Margin="250,50,0,0" TextWrapping="Wrap" 
            VerticalAlignment="Top" 
            Width="120"/>
        <Button Content="red" HorizontalAlignment="Left" Margin="250,91,0,0" VerticalAlignment="Top"  Width="120" Click="Button_Click_red" />
        <Button Content="yellow" HorizontalAlignment="Left" Margin="250,115,0,0" VerticalAlignment="Top" Width="120" Click="Button_Click_yellow"/>
        <Button Content="blue" HorizontalAlignment="Left" Margin="250,139,0,0" VerticalAlignment="Top" Width="120" Click="Button_Click_blue"/>
    </Grid>
</Window>

xaml.cs代码

using System.Windows;

namespace WpfBinding
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        WPFMVVMExample model = new WPFMVVMExample();
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = model;
        }

        private void Button_Click_red(object sender, RoutedEventArgs e)
        {
            model.color = WPFColor.red;
        }
        private void Button_Click_yellow(object sender, RoutedEventArgs e)
        {
            model.color = WPFColor.yellow;
        }
        private void Button_Click_blue(object sender, RoutedEventArgs e)
        {
            model.color = WPFColor.blue;
        }

    }
}

WPFMVVMExample.cs（MVVM）

using System.ComponentModel;

namespace WpfBinding
{
    public class WPFMVVMExample : INotifyPropertyChanged
    {

        private WPFColor _color;
        public WPFColor color
        {
            get
            {
                return _color;
            }
            set
            {
                _color = value;
                NotifyPropertyChanged("color");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        public void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
    public enum WPFColor
    {
        red,
        yellow,
        blue
    }
}

MyConverter.cs（转换器）

using System;
using System.Globalization;
using System.Windows;
using System.Windows.Data;

namespace WpfBinding.Converters
{

    public class MyConverter : IValueConverter
    {
        /// <summary>
        /// 源到目标
        /// </summary>
        /// <returns></returns>
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value != null && parameter != null)
            {
                if ((parameter as string).Equals("red") && ((WPFColor)value) == WPFColor.red)
                {
                    return Visibility.Visible;
                }
                else if ((parameter as string).Equals("yellow") && ((WPFColor)value) == WPFColor.yellow)
                {
                    return Visibility.Visible;
                }
                else if ((parameter as string).Equals("blue") && ((WPFColor)value) == WPFColor.blue)
                {
                    return Visibility.Visible;
                }
                else
                {
                    return Visibility.Hidden;
                }
            }
            else
            {
                // 无法解析value时隐藏
                return Visibility.Hidden;
            }
        }

        /// <summary>
        /// 目标到源
        /// </summary>
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return value;
        }
    }

}