程序开源网站搜索网站排名

原文:准备.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, "隧道");}#endregionprivate 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。

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