准备.Net转前端开发-WPF界面框架那些事，值得珍藏的8个问题

题外话

    不出意外，本片内容应该是最后一篇关于.Net技术的博客，做.Net的伙伴们忽喷忽喷。.Net挺好的，微软最近在跨平台方面搞的水深火热，更新也比较频繁，而且博客园的很多大牛也写的有跨平台相关技术的博客。做.Net开发块五年时间，个人没本事，没做出啥成绩。想象偶像梅球王，年龄都差不多，为啥差别就这么大。不甘平庸，想趁机会挑战下其他方面的技术，正好有一个机会转前段开发。

    对于目前正在从事或者工作中会用到WPF技术开发的伙伴，此片内容不得不收藏，本片介绍的八个问题都是在WPF开发工作中经常使用到并且很容易搞错的技术点。能轻车熟路的掌握这些问题，那么你的开发效率肯定不会低。

WPF相关链接

No.1 准备.Net转前端开发-WPF界面框架那些事，搭建基础框架

No.2 准备.Net转前端开发-WPF界面框架那些事，UI快速实现法

No.3 准备.Net转前端开发-WPF界面框架那些事，值得珍藏的8个问题

8个问题归纳

No.1.WrapPane和ListBox强强配合；

No.2.给数据绑定转换器Converter传多个参数；

No.3.搞清楚路由事件的两种策略：隧道策略和冒泡策略；

No.4.Conveter比你想象的强大；

No.5.ItemsControl下操作指令的绑定；

No.6.StaticResource和DynamicResource区别；

No.7.数据的几种绑定形式；

No.8.附加属性和依赖属性；

八大经典问题

1. WrapPane和ListBox强强配合

    重点：WrapPanel在ListBox面板中的实现方式

    看一张需求图片，图片中需要实现的功能是：左边面板显示内容，右边是一个图片列表，由于图片比较多，所以在左向左拖动中间分隔线时，图片根据右栏的宽度的增加，每行可显示多张图片。功能是很简单，但有些人写出这个功能需要2个小时，而有些人只需要十几分钟。

    循序渐进，我们先实现每行显示一张图片，直接使用StackPanel重写ItemPanel模板，并设置Orientation为Vertical。实现结果如下：

   源代码如下：

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="2" />
            <ColumnDefinition Width="120" />
        </Grid.ColumnDefinitions>
        <Border BorderBrush="Green" Grid.Column="0">
            <Image Source="{Binding ElementName=LBoxImages, Path=SelectedItem.Source}" />
        </Border>
        <GridSplitter Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" BorderThickness="1" BorderBrush="Green" />
        <ListBox Name="LBoxImages" Grid.Column="2">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <Image Source="/Images/g1.jpg" Width="100" Height="80" />
            <Image Source="/Images/g2.jpg" Width="100" Height="80" />
            <Image Source="/Images/g3.jpg" Width="100" Height="80" />
            <Image Source="/Images/g4.jpg" Width="100" Height="80" />
            <Image Source="/Images/g5.jpg" Width="100" Height="80" />
            <Image Source="/Images/g7.jpg" Width="100" Height="80" />
            <Image Source="/Images/g8.jpg" Width="100" Height="80" />
        </ListBox>
    </Grid>

    分析执行结果图，游览显示的图片列表，不管ListBox有多宽，总是只显示一行，现在我们考虑实现每行根据ListBox宽度自动显示多张图片。首先，StackPanel是不支持这样的显示，而WrapPanel可动态排列每行。所以需要把StackPanel替换为WrapPanel并按行优先排列。修改代码ItemsPanelTemplate代码：

<ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>

    再看看显示结果：

    和我们的预期效果不一样，为什么会这样？正是这个问题让很多人花几个小时都没解决。第一个问题：如果要实现自动换行我们得限制WrapPanel的宽度，所以必须显示的设置宽度，这个时候很多人都考虑的是把WrapPanel的宽度和ListBox的宽度一致。代码如下：

<ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=Width}" />
                </ItemsPanelTemplate>
</ListBox.ItemsPanel>

    需要强调的是，这样修改后结果还是一样的。为什么会这样？第二个问题：这里出现的问题和CSS和HTML相似，ListBox有边框，所以实际显示内容的Width小于ListBox的Width。而你直接设置WrapPanel的宽度等于ListBox的宽度，肯定会显示不完，所以滚动条还是存在。因此，我们必须让WrapPanel的Width小于ListBox的Width。我们可以写个Conveter，让WrapPanel的Width等于ListBox的Width减去10个像素。Converter代码如下：

public class SubConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if(value == null)
            {
                throw new ArgumentNullException("value");
            }
            int listBoxWidth;
            if(!int.TryParse(value.ToString(), out listBoxWidth))
            {
                throw new Exception("invalid value!");
            }
            int subValue = 0;
            if(parameter != null)
            {
                int.TryParse(parameter.ToString(), out subValue);
            }
            return listBoxWidth - subValue;
        }

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

    为WrapPanel的Width绑定添加Converter，代码如下：

<ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualWidth, Converter={StaticResource SubConverter}, ConverterParameter=10}" />
                </ItemsPanelTemplate>

     这下就大功告成，看看结果效果，是不是每行自动显示多张图片了？

   

2.给数据绑定转换器Converter传多个参数

    重点：MultiBinding和IMultiValueConverter。

    看看下面功能图片：

    上图中，有报警、提示、总计三个统计数。总计数是报警和提示数量的总和，如果报警和提示数发生变化，总计数自动更新。其实这个功能也非常简单，很多人实现的方式是定义一个类，包含三个属性。代码如下：

public class Counter : INotifyPropertyChanged
    {
        private int _alarmCount;
        public int AlarmCount
        {
            get { return _alarmCount; }
            set
            {
                if(_alarmCount != value)
                {
                    _alarmCount = value;
                    OnPropertyChanged("AlarmCount");
                    OnPropertyChanged("TotalCount");
                }
            }
        }

        private int _messageCount;
        public int MessageCount
        {
            get { return _messageCount; }
            set
            {
                if(_messageCount != value)
                {
                    _messageCount = value;
                    OnPropertyChanged("MessageCount");
                    OnPropertyChanged("TotalCount");
                }
            }
        }

        public int TotalCount
        {
            get { return AlarmCount + MessageCount; }
        }
    }

    这里明显有个问题时，如果统计的数量比较多，那么TotalCount需要加上多个数，并且每个数据属性都得添加OnPropertyChanged("TotalCount")触发界面更新TotalCount数据。接下来我们就考虑考虑用Converter去实现该功能，很多人都知道IValueConverter，但有些还没怎么使用过IMultiValueConverter接口。IMultiValueConverter可接收多个参数。通过IMultiValueConverter，可以让我们不添加任何后台代码以及耦合的属性。IMultiValueConverter实现代码如下：

public class AdditionConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            if(values == null || values.Length != 2)
            {
                return 0;
            }
            int alarmCount = 0;
            if(values[0] != null)
            {
                int.TryParse(values[0].ToString(), out alarmCount);
            }
            int infoCount = 0;
            if(values[1] != null)
            {
                int.TryParse(values[1].ToString(), out infoCount);
            }

            return (alarmCount + infoCount).ToString();
        }

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

    接下来就是通过MultiBinding实现多绑定。代码如下：

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <StackPanel Margin="10" Grid.Column="0" Orientation="Horizontal" Background="Red">
            <Label VerticalAlignment="Center" Content="报警：" />
            <TextBox Name="TBoxAlarm" Background="Transparent" Height="30" Width="60" VerticalContentAlignment="Center" VerticalAlignment="Center" />
        </StackPanel>
        <StackPanel Margin="10" Grid.Column="1" Orientation="Horizontal" Background="Green">
            <Label VerticalAlignment="Center" Content="提示：" />
            <TextBox Name="TBoxInfo" Background="Transparent" Height="30" Width="60" VerticalContentAlignment="Center" VerticalAlignment="Center" />
        </StackPanel>
        <StackPanel Margin="10" Grid.Column="2" Orientation="Horizontal" Background="Gray">
            <Label VerticalAlignment="Center" Content="总计：" />
            <TextBox Name="TBoxTotal" Background="Transparent" Height="30" Width="60" VerticalContentAlignment="Center" VerticalAlignment="Center">
                <TextBox.Text>
                    <MultiBinding Converter="{StaticResource AdditionConverter}">
                        <Binding ElementName="TBoxAlarm" Path="Text" />
                        <Binding ElementName="TBoxInfo" Path="Text" />
                    </MultiBinding>
                </TextBox.Text>
            </TextBox>
        </StackPanel>
    </Grid>

   这里，我们没有修改任何后台代码以及添加任何Model属性。这里这是举个简单的例子，说明MultiBinding和IMultiValueConverter怎样使用。

3.搞清楚路由事件的两种策略：隧道策略和冒泡策略

    WPF中元素的事件响由事件路由控制，事件的路由分两种策略：隧道和冒泡策略。要解释着两种策略，太多文字都是废话，直接上图分析：

    上图中包含三个Grid，它们的逻辑树层次关系由上到下依次为Grid1->Grid1_1->Grid1_1_1。例如我们鼠标左键单击Grid1_1_1,隧道策略规定事件的传递方向由树的最上层往下传递，在上图中传递的顺序为Grid1->Grid1_1->Grid1_1_1。而路由策略规定事件的传递方向由逻辑树的最下层往上传递，就像冒泡一样，从最下面一层一层往上冒泡，传递的顺序为Grid1_1_1->Grid1_1->Grid1。如果体现在代码上，隧道策略和冒泡策略有特征？

    （1）元素的事件一般都是隧道和冒泡成对存在，隧道事件包含前缀Preiview，而冒泡事件不包含Preview。就拿鼠标左键单击事件举例，隧道事件为PreviewMouseLeftButtonDown，而冒泡事件为MouseLeftButtonDown。

    （1）隧道策略事件先被触发，隧道策略触发完后才触发冒泡策略事件。例如单击Grid1_1_1，整个路由事件的触发顺序为：Grid1(隧道)->Grid1_1(隧道)->Grid1_1_1(隧道)->Grid1_1_1(冒泡)->Grid1_1(冒泡)->Grid1(冒泡)。

    （3）路由事件的EventArgs为RoutedEventArgs，包含Handle属性。如果在触发顺序的某个事件上设置了Handle等于true，那么它之后的隧道事件和冒泡事件都不会触发了。

    接下来我们就写例子分析，先看看界面的代码：

<Grid Width="400" Height="400" Background="Green" Name="Grid1" PreviewMouseLeftButtonDown="Grid1_PreviewMouseLeftButtonDown" MouseLeftButtonDown="Grid1_MouseLeftButtonDown">
        <Grid Width="200" Height="200" Background="Red" Name="Grid1_1" PreviewMouseLeftButtonDown="Grid1_1_PreviewMouseLeftButtonDown" MouseLeftButtonDown="Grid1_1_MouseLeftButtonDown">
            <Grid Width="100" Height="100" Background="Yellow" Name="Grid1_1_1" PreviewMouseLeftButtonDown="Grid1_1_1_PreviewMouseLeftButtonDown" MouseLeftButtonDown="Grid1_1_1_MouseLeftButtonDown">
            </Grid>
        </Grid>
    </Grid>

    我们为每个Grid都配置了隧道事件PreviewMouseLeftButtonDown，冒泡事件MouseLeftButtonDown。然后分别实现事件内容：

public partial class RoutedEventWindow : Window
    {
        public RoutedEventWindow()
        {
            InitializeComponent();
        }
        #region 隧道策略
        private void Grid1_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            PrintEventLog(sender, e, "隧道");
            e.Handled = true;
        }

        private void Grid1_1_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            PrintEventLog(sender, e, "隧道");
        }

        private void Grid1_1_1_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            PrintEventLog(sender, e, "隧道");
        }

        #endregion

        private void PrintEventLog(object sender, RoutedEventArgs e, string action)
        {
            var host = sender as FrameworkElement;
            var source = e.Source as FrameworkElement;
            var orignalSource = e.OriginalSource as FrameworkElement;
            Console.WriteLine("策略:{3}, sender: {2}, Source: {0}, OriginalSource: {1}", source.Name, orignalSource.Name, host.Name, action);
        }

        #region 冒泡策略

        private void Grid1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            PrintEventLog(sender, e, "冒泡策略");
        }

        private void Grid1_1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            PrintEventLog(sender, e, "冒泡策略");
        }

        private void Grid1_1_1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            PrintEventLog(sender, e, "冒泡策略");
        }

        #endregion
    }

    事件的代码很简单，都调用了PrintEventLog方法，打印每个事件当前触发元素(sender)以及触发源(e.Source)和原始源(e.OriganlSource)。现在我们就把鼠标移到Grid1_1_1上面（黄色），单击鼠标鼠标左键。打印的日志结果为：

策略:隧道, sender: Grid1, Source: Grid1_1_1, OriginalSource: Grid1_1_1
策略:隧道, sender: Grid1_1, Source: Grid1_1_1, OriginalSource: Grid1_1_1
策略:隧道, sender: Grid1_1_1, Source: Grid1_1_1, OriginalSource: Grid1_1_1
策略:冒泡策略, sender: Grid1_1_1, Source: Grid1_1_1, OriginalSource: Grid1_1_1
策略:冒泡策略, sender: Grid1_1, Source: Grid1_1_1, OriginalSource: Grid1_1_1
策略:冒泡策略, sender: Grid1, Source: Grid1_1_1, OriginalSource: Grid1_1_1

    分析打印的日志是不是和我们上面描述的特征一样，先触发隧道事件（Grid1->Grid1_1->Grid1_1_1），然后再触发冒泡事件（Grid1_1_1->Grid1_1->Grid1），并且和我们描述的事件传递方向也一致？如果还不信我们可以跟进一步测试，我们知道最后一个被触发的隧道事件是Grid1_1_1上的Grid1_1_1_PreviewMouseLeftButtonDown，如果我在该事件上设置e.Handle等于true，按理来说，后面的3个冒泡事件都不会触发。代码如下：

private void Grid1_1_1_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            PrintEventLog(sender, e, "隧道");
            e.Handled = true;
        }

   输出结果如下：

策略:隧道, sender: Grid1, Source: Grid1_1_1, OriginalSource: Grid1_1_1
策略:隧道, sender: Grid1_1, Source: Grid1_1_1, OriginalSource: Grid1_1_1
策略:隧道, sender: Grid1_1_1, Source: Grid1_1_1, OriginalSource: Grid1_1_1

    结果和我们之前描的推理一致，后面的3个冒泡事件确实没有触发。弄清楚路由事件的机制非常重要，因为在很多时候我们会遇到莫名其妙的问题，例如我们为ListBoxItem添加MouseRightButtonDown事件，但始终没有被触发。究其原因，正是因为ListBox自己处理了该事件，设置Handle等于true。那么，ListBox包含的元素的MouseRightButtonDown肯定不会被触发。

4.Conveter比你想象的强大

    什么时候会用到Converter？做WPF的开发人员经常会遇到Enable状态转换Visibility状态、字符串转Enable状态、枚举转换字符串状态等。我们一般都知道IValueConverter接口，实现该接口可以很容易的处理上面这些情况。下面是Enable转Visibility代码：

public class EnableToVisibilityConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if(value == null || !(value is bool))
            {
                throw new ArgumentNullException("value");
            }
            var result = (bool)value;

            return result ? Visibility.Visible : Visibility.Collapsed;
        }

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

    另外一种情况，例如我们在列表中显示某些数据，如果我们想给这些数据加上单位，方法有很多，但用converter实现的应该比较少见。这种情况我们可以充分利用IValueConverter的Convert方法的parameter参数。实现代码如下：

/// <param name="value">数字</param>
 /// <param name="targetType"></param>
/// <param name="parameter">单位</param>
/// <param name="culture"></param>
 /// <returns></returns>
  public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
 {
            if(value == null)
            {
                return string.Empty;
            }
            if(parameter == null)
            {
                return value;
            }
            return value.ToString() + " " + parameter.ToString();
}

    界面代码如下：

<TextBlock Text="{Binding Digit, Converter={StaticResource UnitConverter}, ConverterParameter='Kg'}"></TextBlock>

    稍微复杂的情况，如果需要根据2个甚至多个值转换为一个结果。例如我们需要根据一个人的身高、存款、颜值，输出高富帅、一般、矮穷矬3个状态。这种情况IValueConverter已不再满足我们的要求，但Converter给我们提供了IMultiValueConverter接口。该接口可同时接收多个参数。按照前面的需求实现Converter，代码如下：

public class PersonalStatusConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            //values:身高、颜值、存款
            if (values == null || values.Length != 3)
            {
                throw new ArgumentException("values");
            }
            int height; //身高
            int faceScore; //颜值
            decimal savings; //存款

            try
            {
                if(int.TryParse(values[0].ToString(), out height) && 
                   int.TryParse(values[1].ToString(), out faceScore) &&
                   decimal.TryParse(values[2].ToString(), out savings))
                {
                    //高富帅条件:身高180 CM以上、颜值9分以上、存款1000万以上
                    if(height >=180 && faceScore >=9 && savings >= 10000 * 1000)
                    {
                        return "高富帅";
                    }
                    //矮穷矬条件：身高不高于10CM，颜值小于1，存款不多于1元
                    if(height <= 10 && faceScore <= 1 && savings <= 1)
                    {
                        return "矮穷矬";
                    }
                }
            }
            catch (Exception ex){}

            return "身份未知";
        }

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

    实现了IMultiValueConverter接口后，我们还得知道怎样使用。这里我们还得配合MultiBinding来实现绑定多个参数。下面就根据一个测试例子看看如何使用它，代码如下：

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="5" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel VerticalAlignment="Center" Orientation="Horizontal" Grid.Row="0">
            <Label Content="身高(CM)：" />
            <TextBox  Name="TBoxHeight"  Width="60"/>
            <Label Content="颜值(0-10)：" />
            <TextBox Name="TBoxScore" Width="60" />
            <Label Content="存款（元）：" />
            <TextBox Name="TBoxSaving" Width="100" />
        </StackPanel>
        <StackPanel Grid.Row="2" Orientation="Horizontal" VerticalAlignment="Center">
            <Label Content="测试结果：" />
            <TextBox IsReadOnly="True" Width="150">
                <TextBox.Text>
                    <MultiBinding Converter="{StaticResource PersonalStatusConverter}">
                        <Binding ElementName="TBoxHeight" Path="Text" />
                        <Binding ElementName="TBoxScore" Path="Text" />
                        <Binding ElementName="TBoxSaving" Path="Text" />
                    </MultiBinding>
                </TextBox.Text>
            </TextBox>
        </StackPanel>
    </Grid>

    通过代码可以看出MultiBinding和IMultiValueConverter一般都是同时使用的。

    测试界面如下：

    通过上面的介绍，我们应该知道怎样使用IValueConverter和IMultiValueConverter接口了。

5.ItemsControl下操作指令的绑定

    先看看下面的列表，展示人的头像、个人信息，并且提供删除功能。如下所示：

 

    这里最想说的是关于Delete操作的指令绑定，这一点很容易出问题。有些时候我们绑定了指令，但是单击Delete按钮没有任何反应。这里涉及到两个数据源，一个是列表集合数据源，一个是指令上下文数据源。例如上面的列表存放在UserControl里边，一般ListItem的数据源来源于List的ItemsSource，而按钮的Command来源于UserControl数据源。下面是实现的界面代码：

<Window x:Class="HeaviSoft.Wpf.ErrorDemo.PortraitWindow"
        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:HeaviSoft.Wpf.ErrorDemo"
        xmlns:converter="clr-namespace:HeaviSoft.Wpf.ErrorDemo.Conveters"
        mc:Ignorable="d"
        Title="是不是美女" Height="400" Width="600">
    <Window.Resources>
        <converter:SubConverter x:Key="SubConverter"></converter:SubConverter>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Background" Value="Transparent"/>
        </Style>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="FontFamily" Value="KaiTi" />
            <Setter Property="Foreground" Value="Honeydew" />
        </Style>
    </Window.Resources>
    <ListBox ItemsSource="{Binding PortaitList}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Converter={StaticResource SubConverter}, ConverterParameter=10, Path=ActualWidth}" BorderThickness="0, 0, 0, 1" BorderBrush="Gray">
                    <DockPanel  VerticalAlignment="Center" LastChildFill="False">
                        <Image Margin="5, 0" DockPanel.Dock="Left" Source="{Binding Photo}" Width="40" Height="40" />
                        <TextBlock DockPanel.Dock="Left" Text="{Binding Name}" VerticalAlignment="Center" />
                        <TextBlock DockPanel.Dock="Left" Text=", " VerticalAlignment="Center" />
                        <TextBlock DockPanel.Dock="Left" Text="{Binding Birthday}" VerticalAlignment="Center" />
                        <TextBlock DockPanel.Dock="Left" Text=", "  VerticalAlignment="Center" />
                        <TextBlock DockPanel.Dock="Left" Text="{Binding Vocation}" VerticalAlignment="Center" />
                        <Button Margin="0,3, 5, 3" Padding="4, 2" 
                                Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:PortraitWindow}}, Path=DataContext.DeleteCommand}" CommandParameter="{Binding .}" DockPanel.Dock="Right" Content="Delete" />
                    </DockPanel>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Window>

   数据源代码：

public class PortaitViewModel : ModelBase
    {
        public PortaitViewModel(IEnumerable<Portait> portaits)
        {
            PortaitList = new ObservableCollection<Portait>(portaits);
        }

        public ObservableCollection<Portait> PortaitList { get; set; }

        private ICommand _deleteCommand;
        public ICommand DeleteCommand
        {
            get
            {
                return _deleteCommand ?? new UICommand()
                {
                    Executing = (parameter) =>
                    {
                        PortaitList.Remove(parameter as Portait);
                    }
                };
            }
        }
    }

    首先，PortraitWindow绑定数据源PortaitViewModel，ListBox绑定了一个集合属性PortaitList，所以ListItem对应集合中的一项，也就是一个Portrait对象。我们重点要看的是Button如何绑定Command。这里再单独把Button代码贴出来：

<Button Margin="0,3, 5, 3" Padding="4, 2" 
                                Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:PortraitWindow}}, Path=DataContext.DeleteCommand}" CommandParameter="{Binding .}" DockPanel.Dock="Right" Content="Delete" />

    Button是在ListItem中，我们刚才说ListItem的数据源为一个Portrait对象，所以我们CommandParameter可直接绑定对象{Binding .}，而Command需要切换到PortraitWindow的数据上下文中，这里我们使用了RelativeSource，向上遍历查找逻辑树PortraitWindow，并绑定它的数据DataContext.DeleteCommand。需要要强调的是x:Type要写PortraitWindow而不是Window，否则有时候会出问题的。

    界面执行结果如下：

6.StaticResource和DynamicResource区别

    先不忙描述这两者的区别，看看应用场景。一般的系统都支持多主题和多语言，我们知道主题和语言都是资源。既然都是资源，那么就涉及到如何引用资源，用StaticResource还是DynamicResource？主题和语言资源的引用必须满意一个条件，就是我在系统运行过程中，切换主题或语言之后，我们的界面资源马上也被切换，也就是随时支持更新。带着这样一个场景，再看看两者的区别：

    （1）StaticResource只被加载一次，DynamicResource每次改变都可重新引用。

    （2）一般使用DynamicResource的地方都可以使用StaticResource代替。因为DynamicResource只能用着设置依赖属性的值，而StaticResource可被用到任何地方。例如下面的这种情况就是可使用StaticResource但不能使用DynamicResource：

<Window xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”>
    <Window.Resources>
        <Image x:Key=”zoom” Height=”21” Source=”zoom.gif”/>
    </Window.Resources>
    <StackPanel>
        <StaticResource ResourceKey=”zoom”/>
    </StackPanel>
</Window>

    （3）DynamicResource比StaticResource占用更多的开销，因为它需要额外的跟踪，跟踪哪些地方引用了Dynamic资源。如果资源更新了，引用它的地方也会被更新到。

    （4）很多人可能觉得DynamicResource加载时间比StaticResource长，但恰恰相反。因为在加载界面时，所有StaticResource引用都会马上加载出来；而DynamicResource只会在真正使用时才会加载。

7.数据的几种绑定形式

    Binding这个类有时候真把开发人员搞糊涂，特别是它的几个属性，像Mode、UpdateSourceTrigger、NotifyOnSourceUpdated、NotifyOnTargetUpdated。所以，想要熟练使用Binding，这几个属性不得不掌握。

    (1).Mode属性

    是一个枚举值，枚举项包括Default、TwoWay（双向绑定）、OneWay、OneWayToSource、OneTime。Default是一个强大的枚举项，为什么这么说？如果我们跟踪代码，控件的Binding的Mode属性一般为Default。Default其实就是后面几个枚举中的一种情况，具体是哪一种要根据控件的选择。例如一个TextBox，那么Default为TwoWay模式。如果是一个TextBlock，那么Default为OneWay模式。所以一般情况下，不建议设置Mode。下图是Mode示意图，通过图片可以很清楚的了解这几个模式：

    (2).UpdateSourceTrigger

    更新数据源触发器，分析Mode的示意图，可看出只有在TwoWay和OneWayToSource情况下才会更新Source。UpdateSourceTrigger也是一个枚举，枚举项包括：Default、Explicit、LostFocus、PropertyChanged。和Mode相似，控件默认绑定的UpdateSourceTrigger一般为Default，也是根据不同的情况选择后面的几个枚举值。实际情况，一般触发器都是为LostFocus，所以有些时候我们需要值发生变化马上更新数据源，那么必须设置UpdateSourceTrigger=”PropertyChanged”。

    （3）NotifyOnSourceUpdated和NotifyOnTargetUpdated

    其实这两个属性一般都不用配置，NotifyOnSourceUpdated表示当通过控件更新了数据源后是否触发SourceUpdated事件。NotifyOnTargetUpdated恰好相反，表示当通过数据源更新了控件数据后，是否触发TargetUpdated事件。既然这两个属性控制是否触发事件，那么这些事件从哪来的？这里要提到Binding的SourceUpdatedEvent和TargetUpdatedEvent事件。下面一段代码就是连个事件的添加方式：

Binding.AddSourceUpdatedHandler(TBoxResult, new EventHandler<DataTransferEventArgs>((sender1 ,e1) => { /*更新数据源被触发*/ }));
Binding.AddTargetUpdatedHandler(TBoxResult, new EventHandler<DataTransferEventArgs>((sender1, e1) => { /*更新控件数据被触发*/}));

8.附加属性和依赖属性

    我们先看看两者的实现代码由什么区别，依赖属性和附加属性实现代码如下：

#region 依赖属性
        public static readonly DependencyProperty MyWidthDependencyProperty = DependencyProperty.Register("MyWidth", typeof(int), typeof(CustomControl), new FrameworkPropertyMetadata(
         (d, e) =>
         {
             if (d is CustomControl)
             {
             }
         }));

        public int MyWidth
        {
            get { return (int)GetValue(MyWidthDependencyProperty); }
            set { SetValue(MyWidthDependencyProperty, value); }
        }

        #endregion

        #region 附加属性
        public static readonly DependencyProperty MyHeightDependencyProperty = DependencyProperty.RegisterAttached("MyHeight", typeof(int), typeof(CustomControl), new FrameworkPropertyMetadata(
         (d, e) =>
         {
             if (d is CustomControl)
             {
             }
         }));

        public static void SetMyHeight(DependencyObject obj, int value)
        {
            obj.SetValue(MyHeightDependencyProperty, value);
        }

        public static int GetMyHeight(DependencyObject obj)
        {
            return (int)obj.GetValue(MyHeightDependencyProperty);
        }
        #endregion

    依赖属性和附加属性的声明方式比较相似，不同的地方一方面依赖属性调用Register方法，而附加属性调用RegisterAttached方法。另一方面，依赖属性一般需要定义一个CLR属性来使用，而依赖属性需要定义静态的Get和Set方法使用。接下来再看看怎样使用依赖属性和附加属性，代码如下：

<local:CustomControl Grid.Row="1" x:Name="CControl"
                Width="{Binding ElementName=CControl, Path=MyWidth}" 
                Height="{Binding ElementName=CControl, Path=MyHeight}"
                MyHeight="{Binding ElementName=TBoxHeight, Path=Text}" 
                local:CustomControl.MyWidth="{Binding ElementName=TBoxWidth, Path=Text}" 
                Background="Green" Margin="10" />

    在界面上我们可以直接像使用一般属性一样使用依赖属性：MyHeight=””，而使用附加属性一般都是类名.附加属性：local:CustomControl.MyWidth=”“。附加属性我们见到得也比较多，例如Grid.Row、Grid.RowSpan、DockPanel.Dock等。通过上面的分析，我们总结出两者的区别：

    （1）两者很相似，都需要定义XXXProperty的静态只读属性；

    （2）依赖属性使用Register方法注册，而附加属性使用RegisterAttached注册；

    （3）依赖属性一般需要定义一个CLR属性来使用，而附加属性需要定义Set和Get两个静态方法；

    （4）依赖属性定义后，附加的类一直拥有这个依赖属性。而附加属性只是需要的时候才附加上去，可有可无；

    （5）依赖属性和附加属性都可用于扩展类的属性。但附加属性可用于界面布局，像Grid的Grid.Row和DockPanel的Dock属性。

源代码

    完整的代码存放在GitHub上，代码路径：https://github.com/heavis/WpfDemo。

如果本篇内容对大家有帮助，请点击页面右下角的关注。如果觉得不好，也欢迎拍砖。你们的评价就是博主的动力！下篇内容，敬请期待！