WPF快速入门学习笔记

WPF快速上手

VS2019 和 .Net5

创建项目就选 WPF 应用程序

XAML布局学习

使用XAML语法

GridPanel

由行和列组成，元素用 Grid.column和Grid.Row指定放在Grid中的位置。不填写就放在第一个

<Grid>
	...
</Grid>

StackPanel

是一个可以将自身内容横向或纵向排列的容器

<StackPanel HorizontalAlignment="Center">
    <TextBox Width="200"/>
    <TextBox Width="200"/>
</StackPanel>

WrapPanel

控件在一行里，超出设定的换行规格，将会自动换行

Canvas

任意布局用，拖放控件在哪就在那

<Canvas>
	<Button RenderTransformOrigin="2.65,4.64" Canvas.Left="235" Canvas.Top="182"/>
</Canvas>

案例1:简易用户密码登录样式

C#的代码里通过标签的Name属性来获取控件对象 通过.来调用属性、方法

<Window x:Class="WpfAppDemo.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:WpfAppDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <TextBlock Text="账号" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <TextBox Width="300" Height="30"  ></TextBox>
        </StackPanel>
        <TextBox Grid.Row="1" Width="300" Height="30"  ></TextBox>
        <Button Grid.Row="2" Width="200" Height="40" Content="Login" Name="LoginBtn" Click="doLogin"  />
    </Grid>
</Window>

控件

官方文档：https://docs.microsoft.com/zh-cn/dotnet/desktop/wpf/controls/controls-by-category?view=netframeworkdesktop-4.8

内置控件

依赖属性

依赖属性在wpf主要扮演数据驱动中的重要角色，它能配合绑定一起实时数据更新、UI显示、动画、自定义控件等。

普通的属性也能实现实时数据更新，但需要额外实现一套通知（实现INotifyPropertyChanged接口)

<TextBox Name="TxtB" Text="{Binding Path=Text,ElementName=TxtA}" /> // 让文本框B的内容跟A的一致

数据绑定

  1. 绑定目标 (某个控件)
  2. 绑定属性 (依赖项属性，如Text，Content Text="{Bingding Name,Mode=TwoWay}")
  3. 绑定模式 (TwoWay(默认的)、OneWay(仅源改变时，改变目标的属性)、OneWayToSource)
  4. 绑定数据源 （单个变量如int、double、string或者List。存储在DataContext中)
  5. 关联资源 (在每一个窗体中，都有一个DataContext，它是一个Object类型主要用来存储绑定资源。)

在MainWindow类中的构造函数 用DataContext =new 某个数据类();创建唯一的数据上下文对象

https://docs.microsoft.com/zh-cn/dotnet/desktop/wpf/data/data-binding-overview?view=netdesktop-5.0

命令

命令是控件的一个属性Command=""{Binding LogingCommand}" CommandParameter="{Binding ElementName=ChxboxPwd,Path=IsChecked}"，有点像js的onclick事件去触发函数。同时要控件支持这个属性。代码里面的Path就是ChxboxPwd这个控件里的IsChecked属性。让它作为命令的参数

MVVM



写法可以参考资中的github仓库

资源



style就像css，trigger就像伪类选择器：hover这类的。但是用起来麻烦多 了

然后控件用Style="{StaticResource Btn Style}"来添加样式

Convert

<Button Foreground="{Binding Color,Converter={StaticResource MyColorConvert}}" />

MyColorConvert 定义在<Window.Resources>标签下的<cvt:ColorConvert x:Key="MyColorConvert"/>

cvt定义在约束空间中，指向写着转换器的那个路径

模板

模板应用在View层，它的主要作用是修改控件的样式、交互、数据展示。模板主要分为，DataTemplate和ControlTemplate。
ControlTemplate它决定了控件“长成什么样子”，并让开发者有机会在控件原有的内部逻辑基础上扩展自己的逻辑。
DataTemplate是数据内容的展示方式，一条数据显示成什么样子，是简单的文本还是直观的图形就由它来决定了。

可重用是最大的好处。有点点像Vue.js里的组件化

线程

子线程修改UI线程里的对象 容易出现锁死。所以最好用委托来处理

Application.Current.Dispatchere.Invoke(()=>{
    //your login...
})

项目

参考资料

posted @ 2021-03-16 14:48  禾几元  阅读(285)  评论(0)    收藏  举报