WPF学习笔记

容器控件：

• Grid
• stackPanel
• WrapPanel
• DockPanel
• UniformGrid

Grid：

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

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

<RowDefinition Height="2*"/> 100 auto

占2列的空间

<Border Grid.ColumnSpan="2" Background="Red"/>

stackPanel：

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

水平排列

<StackPanel Orientation="Horizontal">

WrapPanel：

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

DockPanel：

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

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

LastChildFill="False"

元素停靠的方向：

DockPanel.Dock="Top"

UniformGrid：

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

Rows="3" Columns="3"

样式：

为了复用

将这个：

<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"/>

改为这个：

<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：

<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的模板更加自定义的改造

数据模板：

<ListBox x:Name="list"/>

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

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;

或者可以这样写表格：

<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双向绑定：

双向绑定：

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

或者这样绑定类：

<TextBox x:Name="tb1" Text="{Binding Name}" Margin="5" Height="30"/>

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

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

WPF的命令模式：

<Button Content="点我" Command="{Binding ShowCommand}"/>

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