一、布局
二、控件
三、样式（用于修改控件的外观）
原始代码：
<StackPanel>
<TextBlock Text="Hello" FontSize="10" Foreground="Pink"/>
<TextBlock Text="Hello" FontSize="10" Foreground="Pink"/>
<TextBlock Text="Hello" FontSize="10" Foreground="Pink"/>
<TextBlock Text="Hello" FontSize="10" Foreground="Pink"/>
</StackPanel>
使用样式后的代码：
<Window.Resources>
<Style x:Key="PinkFont" TargetType="TextBlock">
<Setter Property="Text" Value="Hello"/>
<Setter Property="FontSize" Value="10"/>
<Setter Property="Foreground" Value="Pink"/>
</Style>
</Window.Resources>
<StackPanel>
<TextBlock Style="{StaticResource PinkFont}"/>
<TextBlock Style="{StaticResource PinkFont}"/>
<TextBlock Style="{StaticResource PinkFont}"/>
<TextBlock Style="{StaticResource PinkFont}"/>
</StackPanel>
四、触发器
1. 单属性触发器
<Window.Resources>
<Style x:Key="BorderStyle" TargetType="Border">
<Setter Property="Background" Value="Pink"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background" Value="Pink"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="LightGray"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
2. 多属性触发器
<Window.Resources>
<Style x:Key="BorderStyle" TargetType="TextBox">
<Setter Property="Background" Value="Pink"/>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="TRUE"/>
<Condition Property="IsFocused" Value="TRUE"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Background" Value="LightGray"/>
</MultiTrigger.Setters>
</MultiTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
3. 事件触发器
<Window.Resources>
<Style x:Key="Button Style" TargetType="Button">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseMove">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Duration="0:0:0:0.05"
Storyboard.TargetProperty="FontSize"
To="18"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Duration="0:0:0:0.05"
Storyboard.TargetProperty="FontSize"
To="10"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
4. 单数据触发器
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self},Path=Text}" Value="8">
<Setter Property="Foreground" Value="Red"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
<Setter Property="FontSize" Value="29"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
5. 多数据触发器
<Style TargetType="{x:Type Button}">
<Setter Property="IsEnabled" Value="False"></Setter>
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding ElementName=c1,Path=IsChecked}" Value="True"></Condition>
<Condition Binding="{Binding ElementName=c2,Path=IsChecked}" Value="True"></Condition>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="IsEnabled" Value="True"/>
</MultiDataTrigger.Setters>
</MultiDataTrigger>
</Style.Triggers>
五、绑定
1. 绑定到元素上
<StackPanel>
<Slider Name="slider"/>
<TextBox Text="{Binding ElementName=slider, Path=Value, Mode=Default}"/>
</StackPanel>
Mode的值：
OneWay（单向绑定）
TwoWay（双向绑定）
OneTime（单次模式）
OneWayToSource（与OneWay相反方向）
Default（默认模式，可能单向或双向）
2. 绑定到资源上
<Window.Resources>
<TextBox x:Key="txt1" Text="123456"/>
</Window.Resources>
<Grid>
<TextBox Text="{Binding Source={StaticResource txt1},Path=Text}"/>
</Grid>
3. 绑定到类对象上
.cs
namespace WpfApp2
{
public class Class1
{
public Class1()
{
Name = "ABC";
}
public string Name { get; set; }
}
}
xaml.cs
this.DataContext = new Class1();
.xaml
<StackPanel>
<TextBox FontSize="60" Text="{Binding Name}"></TextBox>
</StackPanel>
六、控件模板（用于修改控件的内部结构）
<ControlTemplate x:Key="buttontemplate1" TargetType="Button">
<Border x:Name="border">
<Image x:Name="img" Source="Resources\feedbackclosehover.png" Height="40" Width="40" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="Background" Value="Green"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="border" Property="Background" Value="Yellow"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
七、数据模板
1. CellTemplate（自定义模板为表格内容）
<DataGrid x:Name="gd" AutoGenerateColumns="False" CanUserSortColumns="True" CanUserAddRows="False">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding UserName}" Width="100" Header="学生姓名"/>
<DataGridTextColumn Binding="{Binding ClassName}" Width="100" Header="班级名称"/>
<DataGridTextColumn Binding="{Binding Address}" Width="200" Header="地址"/>
<DataGridTemplateColumn Header="操作" Width="100" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left">
<Button Content="编辑"/>
<Button Margin="8 0 0 0" Content="删除" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
2. ItemTemplate（自定义模板为控件项内容）
<Window.Resources>
<DataTemplate x:Key="comTemplate">
<StackPanel Orientation="Horizontal" Margin="5,0">
<Border Width="10" Height="10" Background="{Binding Code}"/>
<TextBlock Text="{Binding Code}" Margin="5,0"/>
</StackPanel>
</DataTemplate>
</Window.Resources>
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<ComboBox Name="cob" Width="120" Height="30" ItemTemplate="{StaticResource comTemplate}"/>
<ListBox Name="lib" Width="120" Height="100" Margin="5,0" ItemTemplate="{StaticResource comTemplate}"/>
</StackPanel>
</Grid>
3. ItemsControl（自定义控件Panel和Item）
<ItemsControl Name="ic">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Width="50" Height="50" Content="{Binding Code}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
八、MVVM
1. MVVM基本概念
M(Model) / V(View) / VM(ViewMdel)
Mdel 为对现实世界物体的抽象，如学生有学号，姓名，性别
View 为用户界面，向用户展示修改数据与执行命令的控件
ViewMdel 为对VIew建模，以此建立View与Model之间的关系，实现前后端解耦
2. 使用MVMMLight
.xaml 用于创建前端界面
.xaml.cs 用于编写后端代码
MainViewModel.cs 用于对前端建模，定义Property和Command
可以分文件夹，
Views存放界面，
Models用于存放各种类，
DB用于存放数据库已经基础的操作函数，
ViewModel用于定义Property和Command
3. 编写ViewModel
1）维护前端的某个数据
using GalaSoft.MvvmLight;
private string search=string.Empty;
public string Search
{
get { return search; }
set { search = value;RaisePropertyChanged();}
}
2）维护前端的一组数据
using System.Collections.ObjectModel;
private ObservableCollection<Student> gridModelList;
public ObservableCollection<Student> GridModelList
{
get { return gridModelList; }
set { gridModelList = value; RaisePropertyChanged(); }
}
3）维护前端的一些命令
using GalaSoft.MvvmLight.Command;
构造函数中命令接口与函数：
QueryCommand = new RelayCommand(Query);
ResetCommand = new RelayCommand(Reset);
AddCommand = new RelayCommand(Add);
EditCommand = new RelayCommand<int>(t=>Edit(t));
DeleteCommand = new RelayCommand<int>(t=>Delete(t));
定义命令接口与函数（无参数的）：
public RelayCommand QueryCommand { get; set; }
public void Query()
{
var models = localDb.GetStudentsByName(Search);
GridModelList = new ObservableCollection<Student>();
if (models != null)
{
models.ForEach(arg =>
{
GridModelList.Add(arg);
});
}
}
定义命令接口与函数（有参数的）：
public RelayCommand<int> EditCommand { get; set; }
public void Edit(int id)
{
var model=localDb.GetStudentById(id);
if (model != null)
{
UserView uvm = new UserView(model);//防止引用传递
var res=uvm.ShowDialog();
if (res.Value)
{
var stu= GridModelList.FirstOrDefault(t => t.Id == model.Id);
if(stu != null)
{
stu.Name=model.Name;
}
}
}
}
4）注意
1 数据的set索引器都有一句
RaisePropertyChanged();用于向前端发送通知告诉后端数据已经改变
2 注意ViewModel的修改要彻底修改后端的数据需要调用数据库的方法，而不是ViewModel的对象
3 注意前端对应控件的绑定语句（无参数与有参数）
<Button Content="查找" Command="{Binding QueryCommand}" Margin="10 0 0 0" Width="70" Height="30"/>
<Button Content="修改" Background="white" Foreground="Black" Width="60"
CommandParameter="{Binding Id}"
Command="{Binding DataContext.EditCommand,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=DataGrid}}" />
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
