1.简介WPF:
C# 一套关于windows界面应用开发框架
2.WPF和winform的差别
,(WPF比较新)
创建新项目使用模板:
WPF使用.xaml后缀,双击可查看操作界面和设置代码,其文件展开之后中有MainWindow.xaml.cs为程序交互逻辑。
winform为Form.cs,双击可进入交互逻辑界面编写,其文件展开之后下层中有Form1.Designal.cs包含 Windows 窗体设计器生成的代码,可进行查看。
界面效果实现的难易程度:WPF去实现:直接搜索需要的控件形式,然后把对应的代码加入即可。
WPF绑定:可以将界面上的某个属性跟流程中做绑定,可以进行同步更新
3.基础项目文件知识
生成文件目录:代码文件下bin目录下的对应的Debug/Realse
项目中用到的资源文件目录:代码文件下Properties/Resources.resx添加进去
App.xaml中可设置启动页
MainWindow.xaml为页面,可添加多个WPF窗口(例如:Window1.xaml)
4.布局控件Grid和StackPanel
(Grid需要自己手动移动控件位置,而StackPanel会自动进行堆积)
分为客户区和非客户区:
“Grid”为布局控件,在非客户区可用,为行列布局,布局可动态分配
而“StackPanel”会根据给的控件依次排列
WPF像素无关
//按行排列:
<Grid.RowDefinitions>
<RowDefinition Height="20"/> <!--同时设置宽度-->
<RowDefinition Height="20"/> <!--多增加一行-->
<RowDefinition/>
</Grid.RowDefinitions>
//按列排列
<Grid ShowGridLines="True" Grid.Row="2" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
</Grid>
实现:
代码:
练习代码链接
5.Style 样式:用法介绍
可以统一设置一类控件的形式
举例:作用于所有button,在每次添加一个button时,会自动调用这个样式
<Window.Resources>
<Style TargetType="Button"> <!--作用于button-->
<Setter Property="Background" Value="Red"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="Height" Value="50"/>
</Style>
</Window.Resources>
【样式多样性】,在想要使用样式时才使用
<Window.Resources>
<Style x:Key="LoginStyle" TargetType="Button">
<Setter Property="Background" Value="Green"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="Height" Value="50"/>
</Style>
<Style x:Key="QuitStyle" TargetType="Button">
<Setter Property="Background" Value="Green"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="Height" Value="50"/>
</Style>
</Window.Resources>
//使用
<Grid>
<StackPanel>
<Button Style="{StaticResource LoginStyle}" Content="登录" /> <!--定向使用-->
<Button Style="{StaticResource QuitStyle}" Content="退出" /> <!--定向使用-->
<Button Content="忘记密码" />
</StackPanel>
</Grid>
【另一种形式:先定义button使用的基础样式,在基于这个基础的样式定义个性化的样式】
<Style TargetType="Button">
<Setter Property="Background" Value="WhiteSmoke"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="Margin" Value="20,10"/>
</Style>
<!--延用之前的统一style,创建新的style-->
<Style x:Key="loginStyle" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Background" Value="Green"/>
</Style>
<!--延用之前的统一style,创建新的style-->
<Style x:Key="QuitStyle" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Background" Value="Red"/>
</Style>
//样式使用时跟上面举例是相同的
【style外部引用】:方便管理,可以供所有的界面去使用
1.添加资源字典的类BaseButtonStyleDictionary1,把想要全局使用的style加在这里
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!--//把之前写下style的复制到这里来-->
<Style TargetType="Button">
<Setter Property="Background" Value="WhiteSmoke"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="Margin" Value="20,10"/>
</Style>
.........
</ResourceDictionary>
2.把创建的BaseButtonStyleDictionary1加入到App.xaml中,成为全局可识别变量
<Application.Resources>
<!--//加入资源字典-->
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/WpfApp1;component/BaseButtonStyleDictionary1.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
3.在下面的窗口MainWindow.xaml等文件中,正常Style引用即可识别
6.自定义按钮以及设置触发器
自定义模板:例如之前的圆角按钮
<Button Width="300" Height="100" Content="自定义按钮" Background="#0078d4" FontSize="50" Foreground="White">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="Red" BorderBrush="Black" BorderThickness="4" CornerRadius="10">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
生成圆角按钮:
但第一行设置的会被覆盖掉。后面值设为可改,与原始按钮设置的值相同,进行同步更改不会进行覆盖:,以及触发器的部分
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="boder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10">
<!--<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>-->
<TextBlock x:Name="txtContent" Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<!--//触发器设置-->
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<!--//当鼠标移入则启动触发操作-->
<Setter TargetName="boder" Property="Background" Value="black"/>
<Setter TargetName="txtContent" Property="FontSize" Value="100"/>
</Trigger>
<Trigger Property="IsPressed" Value="True" >
<!--//当鼠标点击则启动触发操作-->
<Setter TargetName="boder" Property="Background" Value="white"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
7.C#代码事件
界面上的的操作都跟相应的C#代码对应执行
增加界面点击事件,直接在按钮创建的时候添加Click=“Button_Click_1” ,
<Button Content="你好" Width="200" Height="30" Click="Button_Click_1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
则进入对应的.xaml.cs则可看见自动创建了
private void Button_Click_1(object sender, RoutedEventArgs e)
{
}
在其中增加时间处理的流程
<StackPanel>
<TextBlock x:Name="txtTotal" Text ="计算结果" Visibility="Hidden"/>
<Button Content="你好" Width="200" Height="30" Click="Button_Click_1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
private void Button_Click_1(object sender, RoutedEventArgs e)
{
int num1 = 200;
int num2 = 300;
int total = num1 + num2;
txtTotal.Text = total.ToString();
//更改枚举类型(ctrl + “J”)会默认进行代码提示
txtTotal.Visibility = Visibility.Visible;
}
查看所有的事件:点击控件之后有属性界面,点击【⚡】标识符可查看所有信号。且进入该信号边界可显示该信号内容,双击则可自动生成对应执行函数。
例如:鼠标移入和鼠标移出的事件
//鼠标移入控件范围内
private void Button_MouseEnter(object sender, MouseEventArgs e)
{
txtTotal.Text = "你的鼠标进入button的范围了";
}
//鼠标移出控件范围内
private void Button_MouseLeave(object sender, MouseEventArgs e)
{
txtTotal.Text = "你的鼠标移出button的范围了";
}