WPF学习笔记

容器控件：

• Grid
• stackPanel
• WrapPanel
• DockPanel
• UniformGrid

Grid：

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

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

 100 auto

占2列的空间

stackPanel：

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

水平排列

WrapPanel：

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

DockPanel：

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

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

LastChildFill="False"

元素停靠的方向：

DockPanel.Dock="Top"

UniformGrid：

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

Rows="3" Columns="3"

样式：

为了复用

将这个：

改为这个：

样式还可以继承，例如，注意BasedOn：

控件模板：

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

数据模板：

List colors = new List
{
    new MyColor() { Code = "pink", Name = "粉红" },
    new MyColor() { Code = "red", Name = "红色" },
    new MyColor() { Code = "green", Name = "绿色" },
    new MyColor() { Code = "blue", Name = "蓝色" }
};
list.ItemsSource = colors;

或者可以这样写表格：

WPF双向绑定：

双向绑定：

或者这样绑定类：

this.DataContext = new Class1() { Name="tom" };

internal class Class1
{
    public string Name { get; set; }
}

WPF的命令模式：

this.DataContext = new MainViewModel();

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();
    }
}

internal class MainViewModel
{
    public MyCommand ShowCommand { get; set; }
    public MainViewModel()
    {
        ShowCommand = new MyCommand(show);
    }
    public void show()
    {
        MessageBox.Show("点击了按钮");
    }
}

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

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;
}

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

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("点击了按钮");
    }
}

internal class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged([CallerMemberName]string propertyName="")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

动态资源和静态资源：

资源字典：

App.xaml类：

字典类，BtnStyle.xaml：

引用的时候和上面动态资源和静态资源一样用法

后端获取字典：

Resources["SolidColor"] = new SolidColorBrush(Colors.Blue);
var solidColor = App.Current.FindResource("SolidColor");
var defaultBtnStyle = App.Current.FindResource("DefaultBtnStyle");

动画：

• 线性动画
• 关键帧动画-UsingKeyFrams
• 路径动画-UsingPath

普通的线性动画：

private void btn0_Click(object sender, RoutedEventArgs e)
{
    // 创建一个双精度的动画
    DoubleAnimation animation = new DoubleAnimation
    {
        //From = btn0.Width, // 设置动画的初始值
        //To = btn0.Width - 30,// 设置动画的结束值
        By = -30, // 在原来的基础上减少30
        Duration = TimeSpan.FromSeconds(1),// 动画的持续时间
        AutoReverse = true, // 播放结束后反序播放
        RepeatBehavior = new RepeatBehavior(2) // 执行次数
    };
    animation.Completed += Animation_Completed;
    btn0.BeginAnimation(Button.WidthProperty, animation);
}

private void Animation_Completed(object sender, EventArgs e)
{
    btn0.Content = "动画已完成";
}