WPF学习笔记(窗体和常用容器的使用)
WPF学习笔记(基础功能使用)
目录
窗体(Window)
常用属性：
- WindowStyle 窗口的边框样式
- WindowStartupLocation 第一次启动出现的位置 一般主窗体设置成“CenterSceen" 中心显示
- SizeToContent 设置根据内容调整大小
- AllowsTransparency 设置窗体是否透明
圆角无边框窗体设置及效果展示
<!--Window属性设置-->
<Window>WindowStyle="None" AllowsTransparency="True" Background="Transparent"></Window>
<!--在window里面用Border容器包裹，属性设置如下-->
<Border Margin="5" Background="#EEE" CornerRadius="5" MouseLeftButtonDown="Border_MouseLeftButtonDown">
<Border.Effect>
<DropShadowEffect ShadowDepth="0" Color="Gray" Direction="0" Opacity="0.3" BlurRadius="10"/>
</Border.Effect>
</Border>
效果展示：
布局控件
- Grid
- StackPanel
- DockPanel
- WrapPanel
- UniformGrid
- Canvas
- InkCanvas
- Border（装饰控件：背景色/边框 圆角 子对象也只能一个)
Grid
网格式布局模式
基本属性：
-
ColumnDefinitions 列定义；该属性里面几个ColumnDefinition容器就被分几列
-
RowDefinitions 行定义； 该属性里面有几个RowDefinition容器就被分割为几行
附加属性：
-
Grid.Row 定义该控件在Grid容器具体在第几行(默认第0行)
-
Grid.Column 定义该控件在Grid容器具体在第几列(默认第0列)
代码及效果展示
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Content="默认第0行第0列"/>
<Button Content="第3行第3列" Grid.Row="3" Grid.Column="3"/>
</Grid>
效果展示：
StackPanel
垂直或水平入栈方式排列
基本属性:
Orientation：设置排列方向；水平排列或者垂直排列
代码及效果展示
<!--设置成水平列-->
<StackPanel Orientation="Horizontal">
<Button Content="按钮1"/>
<Button Content="按钮2"/>
<Button Content="按钮3"/>
<Button Content="按钮4"/>
</StackPanel>
效果展示：
<!--设置成垂直方向排列-->
<StackPanel Orientation="Vertical" >
<Button Content="按钮1"/>
<Button Content="按钮2"/>
<Button Content="按钮3"/>
<Button Content="按钮4"/>
</StackPanel>
效果展示：
Border
装饰性控件
自定义容器
所有容器都继承至Panel; 容器绘制主要重写MeasureCore和ArrangeOverride两个方法
-
重写MeasureCore方法测量子元素所需大小
-
重写ArrangeOverride方法给子元素进行排列
资源管理
- 文件资源(图像，音频等)
<!--文件资源调用的几种形式-->
<!--图片资源的调用-->
<Image Source="pack://application:,,,/WPFCodeText;component/Assets/Docker.png"/>
<!--字体资源的调用-->
<TextBlock Text="" FontFamily="WPFCodeText;component/Assets/#iconfont" FontSize="50" Foreground="OrangeRed"/>
<TextBlock Text="" FontFamily="/Assets/#iconfont" FontSize="50" Foreground="Green"/>
- 对象资源(创建实例化无参构造方法的类)
<DockPanel.Resources>
<sys:Double x:Key="value">100</sys:Double>
</DockPanel.Resources>
- 资源字典(ResourceDictionary)的使用
对多个资源进行封装，方便统一管理
资源字典的xaml文件属性中生成操作一般是页
<!--新建一个资源字典文件-->
<!--资源字典对象ResourceDictionnary-->
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys ="clr-namespace:System;assembly=System.Runtime">
<sys:Double x:Key="value">100</sys:Double>
</ResourceDictionary>
<!--在窗体中调用-->
<Window x:Class="WPFCodeText.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFCodeText"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<!--窗体调用资源字典文件-->
<ResourceDictionary Source="/Res.xaml"/>
</Window.Resources>
<!--此处使用的静态资源使用StaticResource关键字；动态资源使用DynamicResuorce-->
<Button Background="Beige" Height="{StaticResource value}"/>
</DockPanel>
</Window>
样式(Style)管理
可以对控件的属性进行统一的管理
Style基本属性
- Settter.Property 属性参数设置
- Style.Resource 样式资源
- Style.Triggers 样式触发器
样式练习：
<!--结合资源字典将样式封装在字典已被使用-->
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="BorderStyle" TargetType="Border">
<Setter Property="Background" Value="Orange"/>
<Setter Property="Width" Value ="100"/>
<Setter Property="Height" Value ="100"/>
<Setter Property="CornerRadius" Value ="20"/>
</Style>
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Width" Value ="100"/>
<Setter Property="Height" Value ="40"/>
<Setter Property="Content" Value="请点击我！"/>
<EventSetter/>
<Style.Resources/>
<!--样式触发器-->
<Style.Triggers>
<!--Button事件中鼠标点击和鼠标经过时触发的字体变化效果-->
<!--若下方触发器顺序，将鼠标经过的触发器写前面；会导致点击鼠标样式无法效果-->
<!--主要2个样式同时触发作用到同一属性中，由于代码执行顺序，后写的触发器效果会覆盖前者-->
<!--<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Orange"/>
</Trigger>
<Trigger Property="IsMouseCaptured" Value="True">
<Setter Property="Foreground" Value="Green"/>
</Trigger>-->
<!--多个条件同时触发的效果-->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsMouseCaptured" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Foreground" Value="Red"/>
</MultiTrigger.Setters>
</MultiTrigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
在给Border和Button设置样式属性
<Window x:Class="WY.WPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WY.WPF"
mc:Ignorable="d"
Title="WPF练习" Height="450" Width="800"
FontWeight="Black" WindowStartupLocation="CenterScreen">
<!--资源指向-->
<Window.Resources>
<ResourceDictionary Source="pack://application:,,,/WY.WPF;component/ResDictionary.xaml"/>
</Window.Resources>
<StackPanel>
<Image Source="pack://application:,,,/WY.WPF;component/Asstes/Docker.png" Height="50" HorizontalAlignment="Left"/>
<TextBlock Text="" FontFamily="pack://application:,,,/WY.WPF;component/Asstes/#iconfont" FontSize="50"/>
<Border Style="{StaticResource BorderStyle}" Margin="10"/>
<Button Style="{StaticResource ButtonStyle}" HorizontalAlignment="Left"/>
</StackPanel>
</Window>
