WPF学习笔记

容器控件:

  • Grid
  • stackPanel
  • WrapPanel
  • DockPanel
  • UniformGrid

Grid:

  • Grid.RowDefinitions
    • RowDefinition
  • Grid.ColumnDefinitions
    • ColumnDefinition

第一行的高度是第二行的2倍

XML 复制代码
<RowDefinition Height="2*"/> 100 auto

占2列的空间

XML 复制代码
<Border Grid.ColumnSpan="2" Background="Red"/>

stackPanel:

一般用来修饰部分容器,一般是垂直居中的水平

水平排列

XML 复制代码
<StackPanel Orientation="Horizontal">

WrapPanel:

默认是贴着上面水平,会自动换行

DockPanel:

最后一个元素会填充剩余的空间

最后一个元素不填充剩余空间:

XML 复制代码
LastChildFill="False"

元素停靠的方向:

XML 复制代码
DockPanel.Dock="Top"

UniformGrid:

设置3行3列,会平均分配。即使不设置行和列的数量也会均匀分配:

XML 复制代码
Rows="3" Columns="3"

样式:

为了复用

将这个:

XML 复制代码
<Button Content="按我0" FontSize="18" Foreground="White" Background="red"/>
<Button Content="按我1" FontSize="18" Foreground="White" Background="red"/>
<Button Content="按我2" FontSize="18" Foreground="White" Background="red"/>

改为这个:

XML 复制代码
<Window.Resources>
    <Style x:Key="btn0" TargetType="Button">
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Background" Value="red"/>
    </Style>
</Window.Resources>
<Button Content="按我0" Style="{StaticResource btn0}"/>
<Button Content="按我1" Style="{StaticResource btn0}"/>
<Button Content="按我2" Style="{StaticResource btn0}"/>

样式还可以继承,例如,注意BasedOn:

XML 复制代码
<Window.Resources>
    <Style x:Key="btn0" TargetType="Button">
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Background" Value="red"/>
    </Style>
    <Style x:Key="btn1" TargetType="Button" BasedOn="{StaticResource btn0}">
    </Style>
</Window.Resources>

控件模板:

为了把wpf的模板更加自定义的改造

数据模板:

XML 复制代码
<ListBox x:Name="list"/>
XML 复制代码
<ListBox x:Name="list">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <ListBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Border Width="10" Height="10" Background="{Binding Code}"/>
                    <TextBlock Text="{Binding Name}" Margin="10,0"/>
                </StackPanel>
            </ListBoxItem>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
cs 复制代码
List<MyColor> colors = new List<MyColor>
{
    new MyColor() { Code = "pink", Name = "粉红" },
    new MyColor() { Code = "red", Name = "红色" },
    new MyColor() { Code = "green", Name = "绿色" },
    new MyColor() { Code = "blue", Name = "蓝色" }
};
list.ItemsSource = colors;

或者可以这样写表格:

XML 复制代码
<DataGrid x:Name="grid" AutoGenerateColumns="False" CanUserAddRows="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Code" Binding="{Binding Code}"/>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
        <DataGridTemplateColumn Header="操作">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Button Content="删除"/>
                        <Button Content="复制"/>
                        <Button Content="保存"/>
                    </StackPanel>
                    <!--<StackPanel Orientation="Horizontal">
                        <Border Width="10" Height="10" Background="{Binding Code}"/>
                        <TextBlock Margin="10,0" Text="{Binding Name}"/>
                    </StackPanel>-->
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

WPF双向绑定:

双向绑定:

XML 复制代码
<StackPanel>
    <Slider x:Name="slider0" Margin="5"/>
    <TextBox x:Name="tb0" Text="{Binding ElementName=slider0,Path=Value,Mode=Default}" Margin="5" Height="30"/>
</StackPanel>

或者这样绑定类:

XML 复制代码
<TextBox x:Name="tb1" Text="{Binding Name}" Margin="5" Height="30"/>
cs 复制代码
this.DataContext = new Class1() { Name="tom" };
cs 复制代码
internal class Class1
{
    public string Name { get; set; }
}

WPF的命令模式:

XML 复制代码
<Button Content="点我" Command="{Binding ShowCommand}"/>
cs 复制代码
this.DataContext = new MainViewModel();
cs 复制代码
public class MyCommand : ICommand
{
    Action executeAction;
    public MyCommand(Action action)
    {
        this.executeAction = action;
    }
    public event EventHandler CanExecuteChanged;

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

    public void Execute(object parameter)
    {
        executeAction();
    }
}
cs 复制代码
internal class MainViewModel
{
    public MyCommand ShowCommand { get; set; }
    public MainViewModel()
    {
        ShowCommand = new MyCommand(show);
    }
    public void show()
    {
        MessageBox.Show("点击了按钮");
    }
}

如果还想以命令模式修改界面的文本,需要以下调整:

cs 复制代码
internal class MainViewModel : INotifyPropertyChanged
{
    public MyCommand ShowCommand { get; set; }
    private string name;
    public string Name
    {
        get { return name; }
        set
        {
            name = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Name"));
        }
    }
    public MainViewModel()
    {
        ShowCommand = new MyCommand(show);
        Name = "hello";
    }

    public void show()
    {
        Name = "点击了按钮";
        MessageBox.Show("点击了按钮");
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

或者我们将代码封装一下:

cs 复制代码
internal class MainViewModel : ViewModelBase
{
    public MyCommand ShowCommand { get; set; }
    private string name;
    public string Name
    {
        get { return name; }
        set
        {
            name = value;
            OnPropertyChanged();
        }
    }
    private string title;
    public string Title
    {
        get { return title; }
        set
        {
            title = value;
            OnPropertyChanged();
        }
    }
    public MainViewModel()
    {
        ShowCommand = new MyCommand(show);
        Name = "hello";
    }

    public void show()
    {
        Name = "点击了按钮";
        Title = "点击了按钮";
        MessageBox.Show("点击了按钮");
    }
}
cs 复制代码
internal class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged([CallerMemberName]string propertyName="")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}
相关推荐
光辉岁月~1 小时前
使用CalcBinding实现复杂逻辑绑定
wpf
siy23332 小时前
[c语言日记] 数组的一种死法和两种用法
c语言·开发语言·笔记·学习·链表
土了个豆子的3 小时前
04.事件中心模块
开发语言·前端·visualstudio·单例模式·c#
@areok@4 小时前
C++mat传入C#OpencvCSharp的mat
开发语言·c++·opencv·c#
在路上`4 小时前
前端学习之后端java小白(三)-sql外键约束一对多
java·前端·学习
尚久龙5 小时前
安卓学习 之 用户登录界面的简单实现
android·运维·服务器·学习·手机·android studio·安卓
yb0os15 小时前
RPC实战和核心原理学习(一)----基础
java·开发语言·网络·数据结构·学习·计算机·rpc
乱飞的秋天5 小时前
网络编程学习
网络·学习·php
2202_755744306 小时前
开学季技术指南:构建高效知识管理系统与学习工作流
学习
时光追逐者6 小时前
C# 哈希查找算法实操
算法·c#·哈希算法