WPF——入门笔记

一、布局

StackPanel:水平或垂直排列元素,当剩余空间不足不会进行换行或换列
WrapPanel:水平或垂直排列元素,当剩余空间不足会进行换行或换列
DockPanel:根据容器的边界排列元素,Dock.Top,Left,Right,Bottom
Grid:类似于Table表格,可以灵活设置行和列
UniformGrid:指定行和列的数量,均分有限的容器空间
Canvas:使用固定的坐标设置元素的位置

二、控件

三、样式(用于修改控件的外观)

原始代码:
    <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}}" />

九、学习资源

1.WPF入门视频

2.WPF入门视频笔记

3.WPF深入视频

4.WPF深入视频笔记

5. MVVM

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值