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

Posted lonelyxmas

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了准备.Net转前端开发-WPF界面框架那些事,值得珍藏的8个问题相关的知识,希望对你有一定的参考价值。

原文:准备.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

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

以上是关于准备.Net转前端开发-WPF界面框架那些事,值得珍藏的8个问题的主要内容,如果未能解决你的问题,请参考以下文章

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

.NET6: 开发基于WPF的摩登三维工业软件

JavaScript与C#的互操作示例

vue调用接口那些事

前端开发和其他类别工程师配合的那些事!

接口自动化测试平台开发那些事2(架构)