WPF入门教程系列二
WPF控件和布局
一、 前言
公司项目基于WPF开发，最近项目上线有点空闲时间写一篇基于wpf的基础教材，WPF也是近期才接触，学习WPF也是在网上查资料与微软的MSDN进行学习，写本博客的目为了温故而知新把学习过程记录下来，以备后查。
二、WPF控件和布局
回顾下WPF最常用的布局有几种方式? 上次给大家介绍了5种布局方式。废话不多说，直接到主题。之前出过一篇串口通讯的博文，今天就借助WPF控件与布局给大家分享一个串口调试助手，直接上图看下效果。
XAML CODE:
<Window x:Class="WpfSerialPort.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:WpfSerialPort"
mc:Ignorable="d"
Title="串口调试助手" Height="" Width="" WindowStyle="SingleBorderWindow" Loaded="Window_Loaded">
<Window.Resources>
<Style x:Key="TextBlockStyle1" TargetType="{x:Type TextBlock}">
<Setter Property="TextWrapping" Value="NoWrap"/>
<Setter Property="TextTrimming" Value="None"/>
</Style>
</Window.Resources>
<Grid Width="Auto" Height="Auto">
<Grid.Background>
<ImageBrush ImageSource="/WpfSerialPort;component/images/背景.png"></ImageBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=""/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions> <StackPanel>
<GroupBox Margin="30,0,30,0" Height="">
<GroupBox.Header>
<Label Content="端口设置"/>
</GroupBox.Header>
<StackPanel>
<WrapPanel>
<ComboBox x:Name="cbSerial" Grid.Row="" Margin="" Style="{StaticResource ComboBoxStyle}" Width="" ></ComboBox>
<Label Grid.Row="" Content="串口"/>
</WrapPanel> <WrapPanel>
<ComboBox x:Name="cbBaudRate" Grid.Row="" Margin="" Style="{StaticResource ComboBoxStyle}" Width="" ></ComboBox>
<Label Grid.Row="" Content="波特率"/>
</WrapPanel> <WrapPanel>
<ComboBox x:Name="cbDataBits" Grid.Row="" Margin="" Style="{StaticResource ComboBoxStyle}" Width="" ></ComboBox>
<Label Grid.Row="" Content="数据位"/>
</WrapPanel> <WrapPanel>
<ComboBox x:Name="cbStop" Grid.Row="" Margin="" Style="{StaticResource ComboBoxStyle}" Width="" ></ComboBox>
<Label Grid.Row="" Content="停止位"/>
</WrapPanel> <WrapPanel>
<ComboBox x:Name="cbParity" Grid.Row="" Margin="" Style="{StaticResource ComboBoxStyle}" Width="" ></ComboBox>
<Label Grid.Row="" Content="校验位"/>
</WrapPanel> </StackPanel>
</GroupBox>
<WrapPanel Height="" Width="">
<Grid Height="" Width="">
<Grid.RowDefinitions>
<RowDefinition Height=""/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=""/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions> <Ellipse x:Name="stateColor" Height="" Width="" Grid.Row="" Grid.Column="" Fill="Red" Margin="60,0,1,0"/>
<Button x:Name="btnOpen" Height="" Width="" Grid.Row="" Grid.Column="" Click="btnOpen_Click" Content="打开串口"/>
</Grid> </WrapPanel> <GroupBox Margin="30,0,30,0" Height="">
<GroupBox.Header>
<Label Content="功能介绍："/>
</GroupBox.Header>
<Canvas>
<TextBlock FontFamily="思源雅黑" Canvas.Left="" Canvas.Top="" TextAlignment="Center" FontSize="">. 数据的接受</TextBlock>
<TextBlock FontFamily="思源雅黑" Canvas.Left="" Canvas.Top="" TextAlignment="Center" FontSize="">. 数据的发送</TextBlock>
<TextBlock FontFamily="思源雅黑" Canvas.Left="" Canvas.Top="" TextAlignment="Center" FontSize="">. Hex发送</TextBlock>
<TextBlock FontFamily="思源雅黑" Canvas.Left="" Canvas.Top="" TextAlignment="Center" FontSize="">. Hex显示</TextBlock>
<TextBlock FontFamily="思源雅黑" Canvas.Left="" Canvas.Top="" TextAlignment="Center" FontSize="">. ASCII编码</TextBlock>
<TextBlock FontFamily="思源雅黑" Canvas.Left="" Canvas.Top="" TextAlignment="Center" FontSize="">. UTF-8编码</TextBlock>
<TextBlock FontFamily="思源雅黑" Canvas.Left="" Canvas.Top="" TextAlignment="Center" FontSize="">. Unicode编码</TextBlock>
</Canvas>
</GroupBox>
<WrapPanel Height="" Margin="30,0">
<Grid Width="207.334" Height="" RenderTransformOrigin="0.521,0.273">
<Grid.RowDefinitions>
<RowDefinition Height=""/>
<RowDefinition Height=""/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=""/>
<ColumnDefinition Width=""/>
<ColumnDefinition Width=""/>
</Grid.ColumnDefinitions>
<Button Content="清空接受区" HorizontalAlignment="Left" Grid.Row="" VerticalAlignment="Top" Width="" Height="" Click="btnClearRev_Click"/>
<Button Content="清空发送区" Grid.Column="" HorizontalAlignment="Left" Grid.Row="" VerticalAlignment="Top" Width="" Height="" Click="btnClearSend_Click"/> </Grid> </WrapPanel> </StackPanel>
<GroupBox Grid.Column="" Header="数据接受区" HorizontalAlignment="Left" Height="" Margin="0,10,0,0" VerticalAlignment="Top" Width="">
<StackPanel>
<WrapPanel Margin="">
<CheckBox x:Name="chkAutoLine" Content="自动换行" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<RadioButton x:Name="rbtnHex" Content="Hex" IsChecked="True"/>
<RadioButton x:Name="rbtnASCII" Content="ASCII"/>
<RadioButton x:Name="rbtnUTF8" Content="UTF-8"/>
<RadioButton x:Name="rbtnUnicode" Content="Unicode"/> </WrapPanel>
<WrapPanel Background="White" >
<Border CornerRadius="" BorderBrush="#BEC4D5" Background="Red" BorderThickness=""> </Border>
</WrapPanel>
<TextBox x:Name="txtShowData" HorizontalAlignment="Left" Width="" Height=""/>
</StackPanel> </GroupBox>
<GroupBox Header="数据发送区" HorizontalAlignment="Left" Height="" Margin="0,380,0,0" VerticalAlignment="Top" Width="" Grid.Column="">
<TextBox x:Name="txtSendData" HorizontalAlignment="Left" Height="" Width="" />
</GroupBox>
<WrapPanel Margin="10,505,10,29.901" Grid.Column="">
<RadioButton x:Name="rbtnSendHex" Content="Hex" IsChecked="True"/>
<RadioButton x:Name="rbtnSendASCII" Content="ASCII"/>
<RadioButton x:Name="rbtnSendUTF8" Content="UTF-8"/>
<RadioButton x:Name="rbtnSendUnicode" Content="Unicode" Height="22.24"/>
<Label Width=""/>
<Label x:Name="lblSendCount" Width=""/>
<Button x:Name="btnSend" IsEnabled="False" Content="手动发送" Width="" Click="btnSend_Click"/>
</WrapPanel> </Grid>
</Window>
1.）Grid布局
Grid允许我们通过自定义行列来进行布局,这类似于表格.通过定义Grid的RowDifinitions和ColumnDifinitions来实现对于表格行和列的定义，元素根据附加属性Grid.Row和Grid.Column确定自己的位置。
Grid的列宽与行高可采用固定、自动、按比列三种方式定义
第一种，固定长度——值为一个确定的数字
第二种，自动长度——值为Auto，实际作用就是取实际控件所需的最小值
第三种，比例长度——*表示占用剩余的全部宽度；两行都是*，将平分剩余宽度；一个2*，一个*，则前者占剩余全部宽度的2/3，后者占1/3；依此类推
<Window x:Class="WpfLayout.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:WpfLayout"
mc:Ignorable="d"
Title="MainWindow" Height="" Width="">
<Grid Width="Auto" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=""/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions> <Label Background="Blue" Grid.Column="" Content="串口配置与介绍区" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontFamily="SourceHanSansCN-Regular" Foreground="red" FontSize="" />
<Label Background="Orange" Grid.Column="" Content="数据接受与发送区" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontFamily="SourceHanSansCN-Regular" Foreground="red" FontSize="" />
</Grid>
</Window>
2.）StackPanel布局
StackPanel将控件按照行或列来顺序排列，但不会换行。通过设置面板的Orientation属性设置了两种排列方式：横排（Horizontal默认的）和竖排（Vertical），默认为竖排（Vertical）。
注意：Orientation="Horizontal"时，设置FlowDirection属性为RightToLeft，，则元素将从右向左排列。
3.）WrapPanel布局
WrapPanel布局面板将各个控件按照一定方向罗列，当长度或高度不够时自动调整进行换行换列。
Orientation="Horizontal"时各控件从左至右罗列，当面板长度不够时，子控件就会自动换行，继续按照从左至右的顺序排列。
Orientation="Vertical"时各控件从上至下罗列，当面板高度不够时，子控件就会自动换列，继续按照从上至下的顺序排列。
<Window x:Class="WpfLayout.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:WpfLayout"
mc:Ignorable="d"
Title="MainWindow" Height="" Width="">
<StackPanel Orientation="Vertical"> <WrapPanel Orientation="Horizontal">
<ComboBox x:Name="cbSerial" Grid.Row="" Margin="" Width="" ></ComboBox>
<Label Grid.Row="" Content="串口"/>
</WrapPanel> <WrapPanel Orientation="Horizontal">
<ComboBox x:Name="cbBaudRate" Grid.Row="" Margin="" Width="" ></ComboBox>
<Label Grid.Row="" Content="波特率"/>
</WrapPanel> <WrapPanel Orientation="Horizontal">
<ComboBox x:Name="cbDataBits" Grid.Row="" Margin="" Width="" ></ComboBox>
<Label Grid.Row="" Content="数据位"/>
</WrapPanel> <WrapPanel Orientation="Horizontal">
<ComboBox x:Name="cbStop" Grid.Row="" Margin="" Width="" ></ComboBox>
<Label Grid.Row="" Content="停止位"/>
</WrapPanel> <WrapPanel Orientation="Horizontal">
<ComboBox x:Name="cbParity" Grid.Row="" Margin="" Width="" ></ComboBox>
<Label Grid.Row="" Content="校验位"/>
</WrapPanel> </StackPanel>
</Window>
4.)Canvas布局
Canvas是一个类似于坐标系的面板，所有的元素通过设置坐标来决定其在坐标系中的位置。具体表现为使用Left、Top、Right、 Bottom附加属性在Canvas中定位控件。
<Window x:Class="WpfLayout.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:WpfLayout"
mc:Ignorable="d"
Title="MainWindow" Height="" Width="">
<Canvas>
<TextBlock FontFamily="思源雅黑" Canvas.Left="" Canvas.Top="" TextAlignment="Center" FontSize="">. 数据的接受</TextBlock>
<TextBlock FontFamily="思源雅黑" Canvas.Left="" Canvas.Top="" TextAlignment="Center" FontSize="">. 数据的发送</TextBlock>
<TextBlock FontFamily="思源雅黑" Canvas.Left="" Canvas.Top="" TextAlignment="Center" FontSize="">. Hex发送</TextBlock>
<TextBlock FontFamily="思源雅黑" Canvas.Left="" Canvas.Top="" TextAlignment="Center" FontSize="">. Hex显示</TextBlock>
<TextBlock FontFamily="思源雅黑" Canvas.Left="" Canvas.Top="" TextAlignment="Center" FontSize="">. ASCII编码</TextBlock>
<TextBlock FontFamily="思源雅黑" Canvas.Left="" Canvas.Top="" TextAlignment="Center" FontSize="">. UTF-8编码</TextBlock>
<TextBlock FontFamily="思源雅黑" Canvas.Left="" Canvas.Top="" TextAlignment="Center" FontSize="">. Unicode编码</TextBlock>
</Canvas>
</Window>
5.)DockPanel布局
DockPanel支持让元素简单地停靠在整个面板的某一条边上，然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间。
DockPanel有一个Dock附加属性，因此子元素用4个值来控制她们的停靠：Left、Top、Right、Bottom。Dock没有Fill值。作为替代，最后的子元素将加入一个DockPanel并填满所有剩余的空间，除非DockPanel的LastChildFill属性为false，它将朝某个方向停靠。
<Window x:Class="WpfLayout.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:WpfLayout"
mc:Ignorable="d"
Title="MainWindow" Height="" Width="">
<DockPanel>
<Button Content="上" DockPanel.Dock="Left" Background="Blue"></Button>
<Button Content="下" DockPanel.Dock="Bottom" Background="BlueViolet"></Button>
<Button Content="左" DockPanel.Dock="Left" Background="YellowGreen"></Button>
<Button Content="右" DockPanel.Dock="Right" Background="Green"></Button>
</DockPanel>
</Window>
- 最后简单介绍下我们的无线串口器设备
nRF24L01 无线串口
无线串口 A面
无线串口 B面
三、 小结
WPF布局牵涉的内容很多，只有在平时不断积累才能渐趋完善！布局一直是自己的弱项，布局会比较差，但是重在理解控件的作用以及能举一反三。 通过实例加深对各个控件的理解，具体的运用还需多加强练习和查阅msdn。，有不足之处还望大家多多指正。
Demo下载：WpfSerialPort.rar
WPF入门教程系列二的更多相关文章
- WPF入门教程系列二十三——DataGrid示例(三)
DataGrid的选择模式 默认情况下,DataGrid 的选择模式为“全行选择”,并且可以同时选择多行(如下图所示),我们可以通过SelectionMode 和SelectionUnit 属性来修改 ...
- WPF入门教程系列(二) 深入剖析WPF Binding的使用方法
WPF入门教程系列(二) 深入剖析WPF Binding的使用方法 同一个对象(特指System.Windows.DependencyObject的子类)的同一种属性(特指DependencyProp ...
- WPF入门教程系列二——Application介绍
一.Application介绍 WPF和WinForm 很相似, WPF与WinForm一样有一个 Application对象来进行一些全局的行为和操作,并且每个 Domain (应用程序域)中仅且只 ...
- WPF入门教程系列二十二——DataGrid示例(二)
DataGrid示例的后台代码 1) 通过Entity Framework 6.1 从数据库(本地数据库(local)/Test中的S_City表中读取城市信息数据,从S_ Province表中读取 ...
- WPF入门教程系列二十一——DataGrid示例(一)
前面我们学习了ListView控件的使用示例,今天我们来学习DataGrid的有关知识.提到DataGrid 不管是Asp.Net中的网页开发还是WinForm应用程序开发都会频繁使用.通过它我们可以 ...
- WPF入门教程系列二十——ListView示例(二)
第四步.WPF后台逻辑代码编写 在后台用Entity Framework 6.1的Code First方式获取数据库中的数据.同时,在“刷新”按钮的方法中进行数据绑定.操作步骤如下: 1) 在“刷新 ...
- WPF入门教程系列三——Application介绍(续)
接上文WPF入门教程系列二——Application介绍,我们继续来学习Application 三.WPF应用程序的关闭 WPF应用程序的关闭只有在应用程序的 Shutdown 方法被调用时,应用程序 ...
- WPF入门教程系列(一) 创建你的第一个WPF项目
WPF入门教程系列(一) 创建你的第一个WPF项目 WPF基础知识 快速学习绝不是从零学起的,良好的基础是快速入手的关键,下面先为大家摞列以下自己总结的学习WPF的几点基础知识: 1) C#基础语法知 ...
- WPF入门教程系列一
WPF入门教程 一. 前言 公司项目基于WPF开发,最近项目上线有点空闲时间写一篇基于wpf的基础教材,WPF也是近期才接触,学习WPF也是在网上查资料与微软的MSDN进行学习,写本博客的目为了温 ...
随机推荐
- MySQL数据库增删改字段（属性）
MySQL数据库的各种操作今天在这里总结一下: 一.增加 1.在已有的表中添加新的字段: 首先是增加表的字段,比如一张表原本没有字段“ Time ”,现在我们要增加这样一个字段,可以用下面的SQL语句 ...
- Jenkins集成SonarQube
sonar安装配置 准备软件包 安装 mysql5.6+ 创建数据库sonar,字符集编码utf8 新建用户如heboan 因为sonarqube不能使用root用户运行 调整系统参数,/etc/se ...
- struts2 action 字段问题
struts2最多只能解释两级字段,比如user.username,像user.info.age在类中属性类的三段字符不能识别,只能先用user,info 然后在user.setInfo(info);
- 博弈论与SG函数
巴什博奕: 两个顶尖聪明的人在玩游戏,有n个石子,每人可以随便拿1−m个石子,不能拿的人为败者,问谁会胜利 结论: 设当前的石子数为\(n=k∗(m+1)\)即\(n%(m+1)==0\)时先手一定失 ...
- POJ 2559 Largest Rectangle in a Histogram（单调栈）
[题目链接] http://poj.org/problem?id=2559 [题目大意] 给出一些宽度为1的长方形下段对其后横向排列得到的图形,现在给你他们的高度, 求里面包含的最大长方形的面积 [题 ...
- 【分类讨论】bzoj3856 Monster
#include<cstdio> using namespace std; int T=0; long long h,a,b,k; int main() { freopen("b ...
- python3开发进阶-Django框架的起飞加速一（ORM）
阅读目录 ORM介绍 Django中的ORM ORM中的Model ORM的操作 一.ORM介绍 1.ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一 ...
- hadoop InputFormat getSplits
/** Splits files returned by {@link #listStatus(JobConf)} when * they're too big.*/ public InputSpli ...
- 移植u-boot-2012.4到Tiny6410_1G_Nandflash
Uboot-2012.4的启动流程: 自从Uboot-2010后的Uboot在文件结构和启动流程方面都有非常大的改变,所以移植Uboot-2012.4的时候还是费了我不少时间, 首先在编译Uboot的 ...
- Ado.Net基础拾遗二：插入，更新，删除数据
插入数据 public void InsertDataToSQL() { string conStr = ConfigurationManager.ConnectionStrings["No ...