从头开始WPF（1）

为什么用wpf而不是winform

1. XML 使用xml标记语言来代替winform的Designer.cs
2. 生成了逻辑树和可视化树。其中包含依赖属性，路由事件，样式模板，留到日后细讲。
3. 数据绑定 就是Binding。可谓是wpf的精髓之一，通过它可以非常快捷的实现mvvm。
4. 布局的改变，不在是winform中默认的坐标式布局（在wpf为Canvas）。拥有流式布局StackPanel，会自动换行的WrapPanel，边界式布局DockPanel，网格布局Grid,
5. WPF core版本,虽然不用mono只能在window上运行。但是可以使用aspcore里面的类对象了，更加方便

XML

将view视图的设计操作从过程是代码中脱离（其实还是可以再过程是代码中编辑布局的），将会在编译程序的时候生成二进制文件（BAML格式的，体积压缩）嵌入到DLL或者EXE中。
熟悉了xml之后编辑起来非常方便
这里我添加了一个button控件并且设置他的水平居中和垂直居中都为center，默认Stretch，细节日后再讲

<Grid>
    <Button Content="sdf" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>

之后我给他的button中添加一个图片

<Grid>
    <Button VerticalAlignment="Center" HorizontalAlignment="Center">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <materialDesign:PackIcon Kind="FoodAppleOutline" Margin="-5 0 5 0"/>
            <TextBlock Text="sdf" Grid.Column="1"/>
        </Grid>
    </Button>
</Grid>

这个就是xml以及wpf的魅力，他的富内容和xml结合起来可以非常快捷的编辑出一个非常漂亮的视图（这里我用了一个皮肤组件，日后再聊）

逻辑树和可视化数

简单的来说，可视化树代表你界面上所有的渲染在屏幕上的元素。而逻辑树就是一层层的对象形成的树形结构了。
拿上面我写的一个button来举例子。下图中，前面的图标就是icon，‘sdf’就是textblock。他们的父级中就有button。这就是树形结构

逻辑树比可视树多了数据的管理，例如依赖属性，路由事件，样式继承等。
wpf 中所有的依赖属性其实都是DependencyObject对象。具体解释可以自行百度，这里是微软的解释: 依赖属性介绍。日后再聊
路由事件其实和html里面的事件冒泡差不多。日后再聊
样式模板其实也和html的css类似。日后再聊

MVVM模式下的Binding

binding默认的位置是从DataContext这个属性中查找。这个属性在FrameworkElement中被申明。控件都是继承于FrameworkElement的所以都有这个属性。
command在wpf中被定义为命令，即都要实现这个接口ICommand，里面包含了这个命令是否可以被执行（CanExecute），是否可以被执行更改事件（CanExecuteChanged）以及执行函数（Execute）。
我们接下来定义一个Say的command。

 public class Say : ICommand
    {
        public event EventHandler CanExecuteChanged;

        public bool CanExecute(object parameter)
        {
            return true;
        }

        public void Execute(object parameter)
        {
            MessageBox.Show("sdf");
        }
    }

然后再添加一个test.class，在其中添加一个name和say的属性

   public  class test
    {
        public test() {
            Name = "222";
            Say = new Say();
                 
        }
        public string Name { get; set; }
        public Say Say { get; set; }
    }

重新生成项目，确保没有出错。然后再mainwindow中输入这段代码。

 <Window.DataContext>
        <local:test/>
    </Window.DataContext>

并且更改原先的button

<Button VerticalAlignment="Center" HorizontalAlignment="Center"  Command="{Binding Say}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <materialDesign:PackIcon Kind="FoodAppleOutline" Margin="-5 0 5 0" />
                <TextBlock Text="{Binding Name}" Grid.Column="1"/>
            </Grid>
        </Button>

之后重新运行。点击按钮。

效果就是这样样子，吧逻辑放入到datacontext中，实现了视图和逻辑的拆分（mvvm）。还有一些第三方库可以快捷的搭建，日后再聊。

布局格式

所有的布局都是继承自Panel的

具体细节不同多水。接下来秀一个WrapPanel的可升缩布局。
代码：

<Grid >
        <ListView>
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel  Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListView}, Path=ActualWidth}"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <Button Content="sdf" Width="150"/>
            <Button Content="sdf" Width="150"/>
            <Button Content="sdf" Width="150"/>
            <Button Content="sdf" Width="150"/>
            <Button Content="sdf" Width="150"/>
            <Button Content="sdf" Width="150"/>
            <Button Content="sdf" Width="150"/>
            <Button Content="sdf" Width="150"/>
            <Button Content="sdf" Width="150"/>
            <Button Content="sdf" Width="150"/>
            <Button Content="sdf" Width="150"/>
            <Button Content="sdf" Width="150"/>
            <Button Content="sdf" Width="150"/>
            <Button Content="sdf" Width="150"/>
        </ListView>
    </Grid>

具体解释日后再聊

WPF core

wpf core已经出来一段时间了，但是在编辑界面并不支持他的实时显示。当然可以魔改，可以效果并不怎样。优势当然是可以无缝调用aspcore写的类了，例如在aspcore中写的viewmode。当然不是wpfcore可以使用这个viewmodel。不过要在viewmodel的项目文件上改一个东西。

  <PropertyGroup>
    <TargetFrameworks>netstandard2.0;net4.5</TargetFrameworks>
  </PropertyGroup>

挖坑

挖坑正式开始。日后我会不定期的吧后续的内容补上。
欢迎加入Q群聊天交流（虽然不是我的群）：874752819
我的联系qq：1442241179.