wpf入门教程系列十九——listview示例

倾城风云 倾城风云     2022-09-20     261

关键词:

  经过前面的学习,今天我做一个比较综合的WPF程序示例,主要包括以下功能: 

1) 查询功能。从数据库(本地数据库(local)/Test中的S_City表中读取城市信息数据,然后展示到WPF的Window上的一个ListView上。

2) 数据联动功能。当鼠标左键选中ListView中的某一条记录时,在ListView框下面文本框中显示详细信息。

3) 修改功能。修改TextBox中的内容后,点击“更新”按钮,把修改后的数据保存到数据库中,同时与Listview联动。

第一步、建立一个WPF项目

打开Visual Studio 2013,在菜单上点击文件—>新建—>项目—>WPF应用程序。在弹出界面的“名称”对应的文本框中输入“WpfApp1”,然后点击“确定”按钮。如下图。

第二步:安装Entity Framework

1)  使用NuGet下载最新版的Entity Framework 6.1。在解决方案资源管理器中——>在项目WpfApp1上鼠标右键单击——>弹出一个菜单,选中“管理解决方案的NuGet程序包”,打开NuGet程序包管理界面。如下图。

 

 

2)      在NuGet程序包管理界面中搜索 Entity,找到最新版本Entity Framework,点击安装。如下图。

 

3)      安装完成之后,如下图。

 


第三步、WPF界面布局

1)      在新建完WPF项目之后,WPF项目中有一个默认界面。如下图。

 

2)将鼠标放在方框的边缘点击就会产生相应的分割线。如下图。

 

3) 我们先将窗体随意的分成三行,以后在XAML代码中再进行具体的调整。在添加完分割线之后,看一下下方的XAML代码区域,每个分割线都做为一行RowDefinition。如下图。

 

  4) 在XAML代码编辑界面中将我们刚才定义的三行,修改其高度。代码如下。 

   

        <RowDefinition Height="*" />

            <RowDefinition Height="Auto" />

            <RowDefinition Height="22" /> 

 

 

说明

第0行

设为*用来放置ListView,这样在程序的实际运行过程会尽可能的充满整个区域

第1行

设为Auto尽量紧凑排列,减少空间的占用(如果这一行中没有放任何控件的话,他会小到0,这样在界面上就不会显示。)

第2行

设为22固定值,只是用来放置按钮控件

 

说明:

如果是你经常做ASP.NET或是windows的开发,可能会形成一个习惯——直接从工具箱上把控件拖拽到需要的地方。 这样直接拖放控件的方式,VS会自动生成一个固定的坐标,但是这种方式在WPF中不推荐使用,在WPF中推荐使用  Canvas、StackPanel、WrapPanel、DockPanel和Grid面板组合使用来组装界面。 

对于WPF的界面布局,有以下几点建议:

第一、控件的布局应该有容器来决定,而不是通过控件的margin属性来控制位置。 

第二、控件应避免明确的定义具体的尺寸,因为显示器分辨率及windows窗体的大小都有可能随时改变,如果明确的定义尺寸。 

当窗体变动后就会出现大面积的空白或是缺失。但为了控件功能及效果的展示,应该限定一个可接受的最大及最小尺寸。 

通过MinWidth, MinHeight, MaxWidth, MaxHeight属性可以实现这一点。

第三、由于现在显示器分辨率非常多(1366×768、1600×900、、1980×1080等等),如果将界面元素位置设置成与屏幕坐标相关,这样做的话是会有风险的。 

第四、容器应将有效空间共享给其子控件,这也是为了不在窗体调整后,遗留出大块的空余。 

第五、容器嵌套使用,因为不同的容器,表现效果不同,必要时应结合使用。

5)  接下来在工具箱中双击ListView,一个小框会出现在界面上。 

6)  接下来在工具箱中双击WrapPanel,又一个大框会出现在界面上。

7)  再增加一个Button按钮。

8)  在拖放完了上面这些控件后,你会发觉当前界面有点乱了,这时刚才我们在顶层Grid上面的画的分割线就要起到作用了,让我们在XAML编辑窗口中对相应的XAML语句进行修改,最终结果如下:

  

复制代码
 <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="*" />

            <RowDefinition Height="Auto" />

            <RowDefinition Height="22" />

        </Grid.RowDefinitions>

        <ListView Name="listView1" MinWidth="280" >

            <ListView.View>

                <GridView x:Name="gridView1">

                    <GridViewColumn Header="ContactID"></GridViewColumn>

                    <GridViewColumn Header="FirstName"></GridViewColumn>

                    <GridViewColumn Header="LastName"></GridViewColumn>

                    <GridViewColumn Header="EmailAddress"></GridViewColumn>

                </GridView>

            </ListView.View>

        </ListView>

        <WrapPanel Grid.Row="1" Orientation="Horizontal"></WrapPanel>

        <Button Grid.Row="2" HorizontalAlignment="Right" Click="button1_Click" Name="button1">Refresh</Button>

    </Grid>
复制代码

 

 

 这里有几点又需要进行说明: 

(1)容器控件Panel,现在界面中有两个容器型的控件一个是Grid,另一个是WrapPanel。它们都是容器型控件,不过表现上有所不同。   

 

(2)大家应该注意到了在WrapPanel及Button上面的Grid.Row="n",这个就是Attached Properties(附加属性)。这个属性的作用是用来设置WrapPanel及Button应该在父容器的什么位置。 Attached Properties的XAML用法就是在自己的属性设置地方直接使用容器的类型名称.容器属性名称(Grid.Row)设置对应的值。

(3)大家应该注意到类似与ListView.View及Grid.RowDefinitions用法,这个叫做Complex Properties(复杂属性)。 

 (4)     <GridView x:Name="gridView1">

如上面这段代码中的x:Name=" gridCitys "这种用法,叫做Markup Extensions(标记扩展),以轻松实现XAML页面属性赋值,资源引用,类型转换等操作。 

 例如我们这个示例中使用到的DataGrid对象,然而DataGrid对象又没有Name属性,于是有了Markup Extensions。这样当我们想定位一个没有名字属性的控件,直接为扩展一个名称出来,这个可太方便了。

9)   现在我们的示例中TextBlock和TextBox不是成对出现的,为了实现比较友好的界面一般需要成对出现,而且要在同一水平线上面,不能换行,在WPF中不能使用绝对定位,那应该怎么实现呢?很简单,使用StackPanel面板。修改后的代码如下:

 

复制代码
 <WrapPanel Grid.Row="1" Orientation="Horizontal">

            <StackPanel Orientation="Horizontal" Margin="5,2,5,2">

                <TextBlock Name="textBlock_ContactID" Text="ContactID:" />

                <TextBox Name="textBox_ContactID" MinWidth="100" />

            </StackPanel>

            <StackPanel Orientation="Horizontal" Margin="5,2,5,2">

                <TextBlock Name="textBlock_FirstName" Text="FirstName:" />

                <TextBox Name="textBox_FirstName" MinWidth="100" />

            </StackPanel>

            <StackPanel Orientation="Horizontal" Margin="5,2,5,2">

                <TextBlock Name="textBlock_LastName" Text="LastName:" />

                <TextBox Name="textBox_LastName" MinWidth="100" />

            </StackPanel>

            <StackPanel Orientation="Horizontal" Margin="5,2,5,2">

                <TextBlock Name="textBlock_EmailAddress" Text="EmailAddress:" />

                <TextBox Name="textBox_EmailAddress" MinWidth="100" />

            </StackPanel>

        </WrapPanel>
复制代码

 

10) 在Visual Studio 2013中,按F5键,把我们的第一个WPF程序运行起来。然后,你在窗体的边缘随意的拉伸。如以下2图所示,不论窗体如何拉伸或缩小,控件会不断的改变位置——适应最小原则(如果想要让他固定下来的话。那就需要将WrapPanel换成其他的Panel就可以了),但是TextBlock和TextBox总是成对的在同一水平线的位置上。如下图1(缩小)、图2(扩大)所示:

 图1

 图2

wpf入门教程系列二十一——datagrid示例

 前面我们学习了ListView控件的使用示例,今天我们来学习DataGrid的有关知识。提到DataGrid不管是Asp.Net中的网页开发还是WinForm应用程序开发都会频繁使用。通过它我们可以灵活的在行与列间显示各种数据。本篇将学习WPF中的Data... 查看详情

wpf入门教程系列二十一——datagrid示例

DataGrid示例的后台代码1) 通过EntityFramework6.1从数据库(本地数据库(local)/Test中的S_City表中读取城市信息数据,从S_Province表中读取省份信息,然后通过绑定的方式反数据显示到WPF的Window上的一个DataGrid上。具体代码如下。usingSys... 查看详情

ros从入门到精通系列(十九)roscallbacksandspinning

 目录1.单线程Spinning和多线程Spinning1.1单线程Spinning2.多线程Spinning 查看详情

ros从入门到精通系列(十九)roscallbacksandspinning

 目录1.单线程Spinning和多线程Spinning1.1单线程Spinning2.多线程Spinning 查看详情

comicenhancerpro系列教程十九:用jpegquality看jpg文件的压缩参数

作者:马健邮箱:[email protected] 主页:http://www.comicer.com/stronghorse/ 发布:2017.07.23教程十九:用JpegQuality看JPG文件的压缩参数 事先声明:严格说来这篇教程是讲JpegQuality的,其实与CEP本身关系不大,但因为我自己经常从CEP启动J... 查看详情

wpf入门教程系列二——application介绍

一.Application介绍WPF和WinForm 很相似, WPF与WinForm一样有一个 Application对象来进行一些全局的行为和操作,并且每个 Domain (应用程序域)中仅且只有一个 Application 实例存在。和 WinForm 不同的是WPF&n... 查看详情

wpf入门教程系列一——基础

一、 前言         最近在学习WPF,学习WPF首先上的是微软的MSDN,然后再搜索了一下网络有关WPF的学习资料。为了温故而知新把学习过程记录下来,以备后查。这篇主要讲WPF的开发基础,介绍... 查看详情

wpf入门教程系列十五——wpf中的数据绑定

 使用WindowsPresentationFoundation(WPF)可以很方便的设计出强大的用户界面,同时WPF提供了数据绑定功能。WPF的数据绑定跟Winform与ASP.NET中的数据绑定功能类似,但也有所不同,在WPF中以通过后台代码绑定、前台XAML中进行绑定,或... 查看详情

wpf入门教程系列十八——wpf中的数据绑定

六、排序    如果想以特定的方式对数据进行排序,可以绑定到CollectionViewSource,而不是直接绑定到ObjectDataProvider。CollectionViewSource则会成为数据源,并充当截取ObjectDataProvider中的数据的媒介,并提供排序、分组和... 查看详情

wpf入门教程系列四——dispatcher介绍

一、Dispatcher介绍    微软在WPF引入了Dispatcher,那么这个Dispatcher的主要作用是什么呢?    不管是WinForm应用程序还是WPF应用程序,实际上都是一个进程,一个进程可以包含多个线程,其中有一个是主... 查看详情

wpf入门教程系列十一——依赖属性

一、依赖属性基本介绍  本篇开始学习WPF的另一个重要内容依赖属性。    大家都知道WPF带来了很多新的特性,其中一个就是引入了一种新的属性机制——依赖属性。依赖属性出现的目的是用来实现WPF中的样式、... 查看详情

wpf入门教程系列十七——wpf中的数据绑定

四、XML数据绑定   这次我们来学习新的绑定知识,XML数据绑定。XmlDataProvider用来绑定XML数据,该XML数据可以是嵌入.Xmal文件的XmlDataProvider标记中,也可以是外部位置引用的文件中。    当然嵌入式XML内容... 查看详情

wpf入门教程系列五——window介绍

一、窗体类基本概念对于WPF应用程序,在Visual Studio和Expression Blend中,自定义的窗体均继承System.Windows.Window类。用户通过窗口与 Windows Presentation Foundation (WPF) 独立应用程序进行交互。 窗口的主要用途... 查看详情

wpf开始教程[译](代码片段)

...WPF后,是时候写点关于WPF基础方面的东西了。我发表了一系列针对具体问题的文章。现在是到了让大家明白为什么说WPF是一款在界面开发上带来革命的产品了。本文针对初级-中级程序员,所以我尽量给出一些基础的示例。WPF介... 查看详情

wpf入门教程系列十四——依赖属性

六、依赖属性回调、验证及强制值   我们通过下面的这幅图,简单介绍一下WPF属性系统对依赖属性操作的基本步骤:   借用一个常见的图例,介绍一下WPF属性系统对依赖属性操作的基本步骤: 第一步,确定... 查看详情

wpf入门教程系列十三——依赖属性

四、只读依赖属性  在以前在对于非WPF的功能来说,对于类的属性的封装中,经常会对那些希望暴露给外界只读操作的字段封装成只读属性,同样在WPF中也提供了只读属性的概念,如一些WPF控件的依赖属性是只读的,它们经常... 查看详情

wpf入门教程系列十二——依赖属性

二、依赖属性的优先级  由于WPF允许我们可以在多个地方设置依赖属性的值,所以我们就必须要用一个标准来保证值的优先级别。比如下面的例子中,我们在三个地方设置了按钮的背景颜色,那么哪一个设置才会是最终的结果... 查看详情

wpf入门教程系列六——布局介绍与canvas

 从这篇文章开始是对WPF中的界面如何布局做一个较简单的介绍,大家都知道:UI是做好一个软件很重要的因素,如果没有一个漂亮的UI,功能做的再好也无法吸引很多用户使用,而且没有漂亮的界面,那么普通用户会感觉这... 查看详情