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入门教程系列二的更多相关文章

  1. WPF入门教程系列二十三——DataGrid示例(三)

    DataGrid的选择模式 默认情况下,DataGrid 的选择模式为“全行选择”,并且可以同时选择多行(如下图所示),我们可以通过SelectionMode 和SelectionUnit 属性来修改 ...

  2. WPF入门教程系列(二) 深入剖析WPF Binding的使用方法

    WPF入门教程系列(二) 深入剖析WPF Binding的使用方法 同一个对象(特指System.Windows.DependencyObject的子类)的同一种属性(特指DependencyProp ...

  3. WPF入门教程系列二——Application介绍

    一.Application介绍 WPF和WinForm 很相似, WPF与WinForm一样有一个 Application对象来进行一些全局的行为和操作,并且每个 Domain (应用程序域)中仅且只 ...

  4. WPF入门教程系列二十二——DataGrid示例(二)

    DataGrid示例的后台代码 1)  通过Entity Framework 6.1 从数据库(本地数据库(local)/Test中的S_City表中读取城市信息数据,从S_ Province表中读取 ...

  5. WPF入门教程系列二十一——DataGrid示例(一)

    前面我们学习了ListView控件的使用示例,今天我们来学习DataGrid的有关知识.提到DataGrid 不管是Asp.Net中的网页开发还是WinForm应用程序开发都会频繁使用.通过它我们可以 ...

  6. WPF入门教程系列二十——ListView示例(二)

    第四步.WPF后台逻辑代码编写 在后台用Entity Framework 6.1的Code First方式获取数据库中的数据.同时,在“刷新”按钮的方法中进行数据绑定.操作步骤如下: 1)  在“刷新 ...

  7. WPF入门教程系列三——Application介绍(续)

    接上文WPF入门教程系列二——Application介绍,我们继续来学习Application 三.WPF应用程序的关闭 WPF应用程序的关闭只有在应用程序的 Shutdown 方法被调用时,应用程序 ...

  8. WPF入门教程系列(一) 创建你的第一个WPF项目

    WPF入门教程系列(一) 创建你的第一个WPF项目 WPF基础知识 快速学习绝不是从零学起的,良好的基础是快速入手的关键,下面先为大家摞列以下自己总结的学习WPF的几点基础知识: 1) C#基础语法知 ...

  9. WPF入门教程系列一

    WPF入门教程 一.  前言  公司项目基于WPF开发,最近项目上线有点空闲时间写一篇基于wpf的基础教材,WPF也是近期才接触,学习WPF也是在网上查资料与微软的MSDN进行学习,写本博客的目为了温 ...

随机推荐

  1. codeforces Round #441 A Trip For Meal【思路/模拟】

    A. Trip For Meal time limit per test 1 second memory limit per test 512 megabytes input standard inp ...

  2. POJ 1970 The Game (DFS)

    题目链接:http://poj.org/problem?id=1970 题意: 有一个19 × 19 的五子棋棋盘,其中“0”代表未放入棋子,“1”代表黑色棋子,”2“代表白色棋子,如果某方的棋子在横 ...

  3. Codeforces #428 Div2 D

    #428 Div2 D 题意 给出一些数,现在要求找出一些数满足 \(i_1 < i_2 < i_3 < ... < i_k\) 以及 \(gcd(a_{i_1}, a_{i_ ...

  4. SPOJ GSS2 - Can you answer these queries II（线段树 区间修改+区间查询）（后缀和）

    GSS2 - Can you answer these queries II #tree Being a completist and a simplist, kid Yang Zhe cannot ...

  5. java应用高cpu占用

    一个应用占用CPU很高,除了确实是计算密集型应用之外,通常原因都是出现了死循环 排查故障如下: 1.根据top命令,发现PID为28555的Java进程占用CPU高达200%,出现故障 2.通过ps ...

  6. 25、Django实战第25天：讲师详情页

    1.复制teacher-detail.html到templates目录下 2.编辑teacher-detail.html,继承base.html 3.编辑organization.view.py cl ...

  7. 17、Django实战第17天：机构详情展示

    1.进入xadmin添加测试数据(教师.课程) 2.把以下4个前端页面复制到templates中 先打开这几个页面分析,它们和之前的课程机构列表页是不一样的机构,且没有共同的部分,但是这4个页面却是类 ...

  8. 通用数据库管理工具DBeaver

    通用数据库管理工具DBeaver   在渗透测试中,用户往往需要管理很多数据库.这些数据库可能是渗透软件使用的(如Metasploit使用的Postgresql),也有目标主机的数据库(如网站的数据库 ...

  9. Axis2 解析

    代码生成    Java to WSDL:WSDL to Java:XSD to WSDL:WSDL to XML:WSDL to SOAP:WSDL to Service: Apache Axis2 ...

  10. Largest Divisible Subset -- LeetCode

    Given a set of distinct positive integers, find the largest subset such that every pair (Si, Sj) of ...