怎样做网站seo,电脑网站打不开是什么原因造成的,网推是干嘛的,国外做名片的网站WPF控件和布局#xff0c;根据刘铁猛《深入浅出WPF》书籍讲解内容#xff0c;主要记录控件和布局的原理#xff0c;如果有不足的地方#xff0c;请大牛们键盘下留情--轻喷#xff01;如果还算有用#xff0c;请给点动力#xff0c;支持一把#xff01; 一、WPF里的控件… WPF控件和布局根据刘铁猛《深入浅出WPF》书籍讲解内容主要记录控件和布局的原理如果有不足的地方请大牛们键盘下留情--轻喷如果还算有用请给点动力支持一把 一、WPF里的控件 1.1 控件的实质 我们先从UI上分析UI的功能是让用户观察和操作数据为了能显示数据和响应用户的操作通知程序通过事件来通知如何处理事件又是一系列的算法所以控件就是显示数据和响应用户操作的UI元素也即控件就是数据和行为的载体。 1.2 WPF中的一个重要概念--数据驱动UI 什么是数据驱动UI呢我们知道传统的GUI界面都是由windows消息通过事件传递给程序程序根据不同的操作来表达出不同的数据体现在UI界面上这样数据在某种程度上来说受到很大的限制。WPF中是数据驱动UI数据是核心处于主动的UI从属于数据并表达数据是被动的。因为以后的章节会重点介绍在此不做过多的说明只要记着WPF数据第一控件第二。 1.3 WPF中控件的知多少 虽然控件没有数据重要但是还是比较重要的毕竟是门面啊只是在数据面前它比较有礼貌。控件有很多但是如果仔细去分析也是有规律可循的根据其作用我们可以把控件分为6类 布局控件是可以容纳多个控件或者嵌套其他布局的控件用于在UI上组织和排列控件。其父类为Panel。内容控件只能容纳一个控件或者布局控件作为他的内容。所以经常借助布局控件来规划其内容。其父类为ContentControl。带标题内容控件相当于一个内容控件但是可以加一个标题标题部分也可以容纳一个控件或者布局其父类为HeaderedContentControl。条目控件可以显示一列数据一般情况下是数据的类型是相同的。其共同的基类为ItemsControl。带标题的条目控件和上面的带标题内容控件类同其基类为HeaderdeItemsControl。特殊内容控件这类控件比较独立但也比较常用如TextBoxTextBlockImage等由于其常用性和相对比较简单本篇笔记不做说明。上面的控件的派生关系如图1 图1 二、各类控件模型详解 2.1 WPF中的内容模型 为了理解各个控件的模型还是先了解一下WPF中的内容模型。在上述各类控件里至少可以容纳一个内容主要原因是由于每个控件对象都会有一个重要又不常写出来的属性--Content Property有Content,ChildItemsChildren几个属性如Grid可以容纳多个控件用的是Children。内容模型就是每一族的控件都含有一个或者多个元素作为其内容其下面的元素可能是其他控件。为什么可以不常写出来呢先让我们看下面两段代码 XAML Code Window x:ClassChapter_03.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlTitle内容属性测试 Height350 Width525GridGrid.ChildrenButton Content1 Margin120,146,0,146 HorizontalAlignmentLeft Width82 /Button Content2 x:Namebtn2 Margin0,146,142,145 HorizontalAlignmentRight Width82 //Grid.Children/Grid
/Window XAML Window x:ClassChapter_03.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlTitle内容属性测试 Height350 Width525GridButton Content1 Margin120,146,0,146 HorizontalAlignmentLeft Width82 /Button Content2 x:Namebtn2 Margin0,146,142,145 HorizontalAlignmentRight Width82 //Grid
/Window 运行两段代码效果一样。充分说明了重要而有不常见的原因。因为省略的省时而且简洁明了。所以多数引用时都省去了。 2.2ContentControl族 先说一下其特点他们内容属性的名称为Content只能有单一元素充当其内容。下面通过例子说明其特点 Button Margin120,146,0,76 HorizontalAlignmentLeft Width100TextBox Text测试/TextBox Text测试/TextBox Text测试//Button 上面的会报错原因是Button里面只能有单一元素充当其内容。去掉后面的两个TextBox效果如图2 图2 发现button里面不仅可以显示文字还可以用一个控件来当其内容。其他的控件不在一一举例。在此列出此类的主要控件 Button、ButtonBase、CheckBox、ComboBoxItem、ContentControl、Frame、GridViewColumnHeader、GropItem、Label、ListBoxItem、ListViewItem、NavigationWindow、RadioButton、ScrollViewer、StatusBarItem、ToggleButton、ToolTip、UserControl、Window。 2.3 HeaderedContentControl族 特点可以显示带标题的数据内容属性为Content和Header其这两个属性都只能容纳一个元素。在此举例说明GroupBox的用法然后列出其他属于此类的控件。XAML代码为 View Code Window x:ClassChapter_03.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlTitle内容属性测试 Height200 Width300Grid BackgroundGoldGroupBox Margin42,0,96,26GroupBox.HeaderLabel Content我是标题//GroupBox.HeaderButton HorizontalAlignmentLeft Width117 Height45TextBox Text测试//Button/GroupBox/Grid
/Window 效果图如图3 图3 是不是看着很还好呢现在列出同类主要的控件ExpenderGroupBoxHeaderedContentControlTabItem。 2.4 ItemsControl族 特点该类控件用于显示列表化的数据内容属性为Items或ItemsSource每种ItemsControl都对应有自己的条目容器Item Container。本类元素可能会用的比较多些也比较灵活所以这里不做过多记录以后的记录会经常用到具体的再详细说明。下面就用一个ListBox控件来小试牛刀吧XAML代码、Cs代码如下 XAML Window x:ClassChapter_03.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlTitle内容属性测试 Height260 Width408Grid BackgroundGoldListBox x:Namelistbox Margin0,0,198,55CheckBox x:Namecb1 Content选择/CheckBox x:Namecb2 Content选择/CheckBox x:Namecb3 Content选择/CheckBox x:Namecb4 Content选择/Button x:Namebtn1 Content按钮1/Button x:Namebtn2 Content按钮1/Button x:Namebtn3 Content按钮1//ListBox/Grid
/Window CS using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;namespace Chapter_03
{/// summary/// MainWindow.xaml 的交互逻辑/// /summarypublic partial class MainWindow : Window{public MainWindow(){InitializeComponent();Button btnnew Button();btn.Content另外添加一个;btn.Click new RoutedEventHandler(btn_Click);this.listbox.Items.Add(btn);btn3.Clicknew RoutedEventHandler(btn_Click);}/// summary/// 用来找到button的父级元素类型/// /summary/// param namesender/param/// param namee/paramvoid btn_Click(object sender, RoutedEventArgs e){Button btn(sender) as Button;DependencyObject level1 VisualTreeHelper.GetParent(btn);DependencyObject level2 VisualTreeHelper.GetParent(level1);DependencyObject level3 VisualTreeHelper.GetParent(level2);if (btn ! null)MessageBox.Show(level3.GetType().ToString());else MessageBox.Show(无找到);}}
} 效果图如图4 图4 先来说明一下代码在listBox里面放了几个checkbox和button说明ListBoxI的Item不仅支持类型相同的元素还支持类型不同的元素。这是因为Listbox的每一项都是经过“ListBoxItem”加工厂处理的最终放入当做自己的内容--放入自己的容器内。这里通过后台代码说明了每一个条目都被ListboxItem包装过了完全没有必要每一个条目都在xmal文件按照如下写法 ListBoxItemButton x:Namebtn3 Content按钮1//ListBoxItem 在实际项目中很少像上面那样把代码写死可以动态的绑定ListBox。把数据源赋给ListBox的ItemsSource通过DisplayMemberPath属性来显示string类型的数据源里面的字段条目如果想显示复杂的数据的话要使用DataTemplate具体在模板再记录在此知道有这么一回事就好了通过SelectedItem和SelectionChanged来观察选中的项。下面的例子实现在listbox上绑定指定数据然后弹出选中人的年龄。直接给出代码 XAML Window x:ClassChapter_03.ListBoxTestxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlTitleListBoxTest Height300 Width300GridListBox x:Namelistbox1 Margin0,0,60,31 SelectionChangedlistbox1_SelectionChanged/ListBox/Grid
/Window CS using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;namespace Chapter_03
{/// summary/// ListBoxTest.xaml 的交互逻辑/// /summarypublic partial class ListBoxTest : Window{public ListBoxTest(){InitializeComponent();InitData();}protected void InitData(){ListPeople peopleList new ListPeople(){new People(){Id1,NameTim,Age30},new People(){Id2,NameTom,Age30}, 显示结果如图5 图5 下面列出属于ItemsControl族元素和其对应的Item Container有ComboBox——ComboBoxItemContextMenu——MenuItemListBox——ListBoxItemListView——ListViewItemMenu——MenuItemStatusBar——StatusBarItemTabControl——TabItemTreeView——TreeViewItem. 由于已经演示了HeaderedContentControl和ItemsControl的功能另外HeaderedItemsControl的用法就不再记录了仅仅列出属于其族的控件 MemuItem、TreeViewItem、TooBar。 三、 UI布局 在介绍布局之前还是先记录一下布局控件的特点与属于Panel族的控件。 panel族控件内容属性为Children所以内容可以是多个元素这对布局来说是很重要的特征。布局控件与ItemControl的区别是前者强调的是对元素的布局后者强调的是条目。属于Panel类的控件有CanvasDockPanelGridTabPanel,ToolBarOverflowPanelStackPanelToolBarPanelUniformGridVirtualizingPanelVirtualizingStackPanel,WrapPanel。这么多控件不可能一个个去介绍找几个比较重要的实践一下。回头如果有用到的话再逐一研究。 3.1 主要布局控件的特性 在WPF里面控件与控件的关系除了相邻和重叠用Opacity来控制哪个控件在上面哪个在下面还有一个包含。正因为如此才有了以window为根的树形结构的XAML。下面介绍一下主要布局元素的特性 Grid网格。可以自定义行和列并通过行列的数量、行高和列宽来调整控件的布局有点类似于html中的Table。StackPanel栈式面板。可以将包含元素排成一条直线当添加或移除包含元素时后面的元素会自动向下或向上移动。Canvas画布。可以指定包含元素的绝对坐标位置。DockPanel泊靠式面板。内部元素可以选择泊靠方式。WarpPanel自动折行面板。当一行元素排满后会自动换行。类似html中的流式布局。3.2 Grid Grid的特点如下 可以定义任意数量的行和列行高与列宽可以使用绝对值相对比以及最大值和最小值内部元素可以设置自己的所在列和行还可以设置自己跨几列和行。可以设置Children元素的对齐方式 现在给出定义行与列的代码记得在后台代码上加上 this.grid.ShowGridLinestrue以便显示出网格 XAML Window x:ClassChapter_03.Gridxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlTitleGrid Height300 Width300 MinHeight300 MaxWidth500!--MinHeight300 MaxWidth500限制窗口的最小高度和最大宽度--Grid x:Namegrid!--定义行--Grid.RowDefinitionsRowDefinition Height25 /RowDefinitionRowDefinition Height50/RowDefinition Height1*/RowDefinition Height*/RowDefinition Heightauto/RowDefinition/Grid.RowDefinitions!--定义列--Grid.ColumnDefinitionsColumnDefinition Width25 /ColumnDefinitionColumnDefinition Width50/ColumnDefinition Width1*/ColumnDefinition Width*/ColumnDefinition Widthauto//Grid.ColumnDefinitions!--在指定的行列中布置控件--TextBox Grid.Column1 Grid.Row2 Grid.ColumnSpan2 Text布局 BackgroundGray//Grid
/Window 运行效果图如图6可以放大观察效果是因为Width*的原因本例子中利用了两个*其中第三行是一个*所以占剩余的二分之一可以试着改成2*就是三分之二了可以试着观察效果 图6 3.3 StackPanel StackPanel可以把内部的元素在纵向或者横向上紧密排列形成栈式布局。先介绍一下其三个属性 Orientation 决定内部元素是横向还是纵向累积。可取值为HorizontalVertical。HorizontalAlignment 决定内部元素水平方向上的对齐方式。可取值LeftCenterRightStretch。VerticalAlignment 决定内部元素竖直方向上的对齐方式。可取TopCenterBottomStretch。StackPanel也是布局中比较常见的控件下面举例添加按钮其他内容控件会自动下移。效果如图7 图7 下面上代码 XAML Window x:ClassChapter_03.StackPanelxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlTitleStackPanel Height338 Width423Grid Height286 Width382GroupBox Header测试StackPanel BorderBrushBlack Margin5StackPanel Margin5 x:NamestackpanelStackPanel OrientationVertical x:NamebtnList/StackPanelStackPanel OrientationHorizontal HorizontalAlignmentCenterTextBlock Text填写添加按钮名称: Height20 /TextBox NamebtnName Width102 Height20 /Button Content添加 Width60 Margin5 ClickButton_Click //StackPanel/StackPanel/GroupBox/Grid
/Window Cs using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;namespace Chapter_03
{/// summary/// StackPane_.xaml 的交互逻辑/// /summarypublic partial class StackPanel : Window{public StackPanel(){InitializeComponent();}private void Button_Click(object sender, RoutedEventArgs e){if (!string.IsNullOrEmpty(this.btnName.Text)){Button btn new Button();btn.Content this.btnName.Text;this.btnList.Children.Add(btn);}elseMessageBox.Show(请输入按钮名称!);}}
} 当输入按钮名称的话点击添加原有的内容会下移。 3.4 Canvas 画布内容控件可以准确定位到指定坐标但是不足的地方是如果要修改的话可能会关系到很多的控件所以如果不需要经常修改的窗体使用该控件布局或者是艺术性比较强用来实现依赖于横纵坐标的动画等功能的布局使用此控件布局。 在此制作一个登陆页面主要来看一下Canvas.Left与Canvas.Top的用法。效果图如图8直接上代码 XAML Window x:ClassChapter_03.Canvasxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlTitle登陆 Height145 Width300Canvas BackgroundSiennaTextBlock Canvas.Left0 Canvas.Top13 Margin5 Text用户名:/TextBox Canvas.Left50 Canvas.Top13 Width160 /TextBlock Canvas.Left0 Canvas.Top47 Margin5 Text密 码:/TextBox Canvas.Left50 Canvas.Top47 Width160 /Button Content确定 Canvas.Left70 Canvas.Top77 Width63 Height22 /Button Canvas.Left150 Canvas.Top77 Content清除 Width63 Height22 //Canvas
/Window 图8 3.5 DockPanel 这个控件主要有个最后一个内容控件实现填充所有剩余部分的功能。主要用到LastChildFillTrue属性。下面给出一个例子先看一下把LastChildFill分别设置为True和False的结果对比图如图9 图9 XAML代码给出 XAML Window x:ClassChapter_03.DockPanelxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlTitleDockPanel Height300 Width300DockPanel Namedockpanel LastChildFillTrueButton Namebutton1 DockPanel.DockTop1/ButtonButton Namebutton2 DockPanel.DockBottom 2/ButtonButton Namebutton3 DockPanel.DockLeft3/ButtonButton Namebutton4 DockPanel.DockRight4/ButtonButton DockPanel.DockTop剩余空间/Button/DockPanel/Window 在此说明一下如果LastChildFillTrue最后一个元素 Button 剩余空间/Button就会充满其剩余部分。上面的只能填充但是不能通过拖拽的方式改变控件的宽度。下面给出一个实现拖拽功能的代码。不过是在Grid里面的通过GridSplitter可以改变Grid初始设置的行高或列宽控件实现。直接给出代码 XAML Window x:ClassChapter_03.GridSplitterxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlTitleGridSplitter Height300 Width300GridGrid.RowDefinitionsRowDefinition Height5/RowDefinition//Grid.RowDefinitionsGrid.ColumnDefinitionsColumnDefinition Width150/ColumnDefinition WidthAuto/ColumnDefinition//Grid.ColumnDefinitionsTextBox Grid.ColumnSpan3 BorderBrushBlack/TextBox Grid.Row1 BorderBrushBlack/GridSplitter Grid.Row1 Grid.Column1 VerticalAlignmentStretch HorizontalAlignmentCenterWidth5 BackgroundGray ShowsPreviewTrue/TextBox Grid.Row1 Grid.Column2 BorderBrushBlack//Grid
/Window 具体的GridSplitter的属性见http://www.cnblogs.com/luluping/archive/2011/08/26/2155218.html。 3.6 WrapPanel 此控件会根据布局的大小来控制内容元素的排列。不会因为窗体没有放大影响到其他内容的显示。在此只举一个例子来理解WrapPanel。上代码了 XAML Window x:ClassChapter_03.WrapPanelxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlTitleWrapPanel Height300 Width300WrapPanelButton Width50 Height50/Button Width50 Height50/Button Width50 Height50/Button Width50 Height50/Button Width50 Height50/Button Width50 Height50/Button Width50 Height50//WrapPanel
/Window 效果图如图10 图10 四、总结 布局一直是自己的弱项所以可能这篇记录的会比较差点但是重在理解控件的作用以及能举一反三。 虽然控件没有一一列出但是对于每一族的控件都给出了一个实例可以通过实例加深对各个控件的理解具体的运用还需多加强练习和查阅msdn。下一篇深入浅出话Binding。 转载于:https://www.cnblogs.com/lzhp/archive/2012/09/05/2669764.html
