WPF真入门教程12--ListView控件

       ListView 控件在Windows应用程序中常用,用于表示数据列表。如果您以前使用过 WinForms,那么您对ListView的实用性有一个很好的了解,但您应该意识到 WPF中的ListView 不像WinForms版本那样使用。再一次的主要区别在于,虽然WinForms ListView只是调用Windows API 函数来呈现常见的Windows ListView 控件,但WPF ListView是一个独立的控件,不依赖于 Windows API,WPF ListView以完全不同的方式处理项目图像、组及其子项目等内容。事实上,它看起来很像 WPF ListBox,直到您开始向它添加专门的视图。这并不奇怪,因为 ListView 直接从 ListBox 控件继承。因此,默认的ListView实际上只是一个ListBox,具有不同的选择模式。

今天开搞做一个比较综合的ListView示例(会要用到.net中的EF知识),主要包括以下功能: 

1) 查询功能。从数据库ucdos中的CarInfo表中读取车辆位置信息数据,然后展示到ListView上。

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

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

1、在SqlServer中创建数据库ucdos,创建表CarInfo,结构及内容如下:

2、在项目中添加文件夹control,然后添加窗口ListViewWin,并在App.xaml文件中设置启动文件为ListViewWin.xaml 

3、项目上右键,添加->新建项, 

最后在项目中出现EF相关的文件及类,如图 

 同时在项目的app.config自动添加了数据库的连接配置信息

 这里使用的是.NET中的Entity Framework 6技术,不清楚这块的请自备这方面知识

4、开始布局,用到了WrapPanel,StackPanel控件

说明:

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

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

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

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

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

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

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

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

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

最外面的Grid容器分为三行,每行分别放listview,WrapPanel,WrapPanel,具体代码如下:

<Window x:Class="WpfApp6.control.ListViewWin"
        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:WpfApp6.control"
        mc:Ignorable="d"
        Title="ListViewWin" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="22"/>
        </Grid.RowDefinitions>
        <ListView Grid.Row="0" Name="listView1" HorizontalAlignment="Left" Height="180" VerticalAlignment="Top" Width="792">
            <ListView.View>
                <GridView x:Name="gridView1">
                    <!--DisplayMemberBinding属性的值绑定到后台对象的属性。-->
                    <GridViewColumn Header="Id" DisplayMemberBinding="{Binding Path=ID}"></GridViewColumn>
                    <GridViewColumn Header="车牌号" DisplayMemberBinding="{Binding Path=CarNo}"></GridViewColumn>
                    <GridViewColumn Header="经度" DisplayMemberBinding="{Binding Path=Lng}"></GridViewColumn>
                    <GridViewColumn Header="纬度" DisplayMemberBinding="{Binding Path=Lat}"></GridViewColumn>
                    <!--StringFormat格式化时间-->
                    <GridViewColumn Header="上传时间" >
                        <!--模板化单元格内容-->
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock Foreground="CornflowerBlue" Cursor="Hand" Text="{Binding Path=LocDt,StringFormat='yyyy年MM月dd日HH时mm分ss秒'}"></TextBlock>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn> 
                </GridView>
            </ListView.View> 
        </ListView>
        <!--DataContext指定数据上下文,绑定到上面的listView控件上-->
        <WrapPanel Grid.Row="1"  DataContext="{Binding ElementName=listView1,Path=SelectedItem}" Orientation="Horizontal" Height="100" Margin="0,0,0,0">
            <StackPanel Orientation="Horizontal" Margin="5,2,5,2">
                <TextBlock Name="tbId" Text="ID号:" />
                <TextBox Name="txId" IsReadOnly="True" Text="{Binding ID}" MinWidth="100" />
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="5,2,5,2">
                <TextBlock Name="tbCarNo" Text="车牌号:" />
                <TextBox Name="txCarNo" Text="{Binding CarNo}" MinWidth="100" />
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="5,2,5,2">
                <TextBlock Name="tbLng" Text="经度:" />
                <TextBox Name="txLng" Text="{Binding Lng}" MinWidth="100" />
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="5,2,5,2">
                <TextBlock Name="tbLat" Text="纬度:" />
                <TextBox Name="txLat" Text="{Binding Lat}"  MinWidth="100" />
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="5,2,5,2">
                <TextBlock Name="tbLocDt" Text="上传时间:" />
                <TextBox Name="txLocDt" Text="{Binding LocDt}"  MinWidth="100" />
            </StackPanel>
        </WrapPanel>
        <WrapPanel Grid.Row="2" Orientation="Horizontal">
            <Button  Name="btnRefresh"  Content="刷新" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75"  Click="btnRefresh_Click"/>
            <Button  Name="btnUpdate" Content="更新" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Click="btnUpdate_Click"/>
        </WrapPanel>
    </Grid>
</Window>
布局中使用了带有 GridView 的 ListView,通过使用 GridView,您可以在 ListView 中获取多列数据,在标记 (XAML) 中,使用 ListView.View 属性为 ListView 定义一个视图,在 GridView 内部定义了4列,我们希望显示的每条数据都对应一列。该标题属性用于指定我们想显示的列,然后我们用文字DisplayMemberBinding属性的值绑定到从我们的CarInfo类的属性。使用DisplayMemberBinding属性几乎仅限于输出简单的字符串,根本没有自定义格式,但 通过指定CellTemplate,我们可以完全控制内容在特定列单元格中的呈现方式。

5、为刷新和更新按钮编写后台代码,具体代码如下:

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
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;
using WpfApp6.model;

namespace WpfApp6.control
{
    /// <summary>
    /// ListViewWin.xaml 的交互逻辑
    /// </summary>
    public partial class ListViewWin : Window
    {
        ucdosEntities db = new ucdosEntities();//ef上下文对象
        public ListViewWin()
        {
            InitializeComponent(); 
        }
         
        private void GetData()
        {
            List<CarInfo> list = db.CarInfo.ToList<CarInfo>();
            listView1.ItemsSource = list;//绑定listview数据源
        }
 
        private void btnRefresh_Click(object sender, RoutedEventArgs e)
        {
            GetData();
        }

        private void btnUpdate_Click(object sender, RoutedEventArgs e)
        {
            int id = Convert.ToInt32(txId.Text);
            var objcar = db.CarInfo.Where(x=>x.ID==id).FirstOrDefault();
            objcar.ID = id;
            objcar.CarNo = txCarNo.Text;
            objcar.Lat = txLat.Text;
            objcar.Lng = txLng.Text;
            objcar.LocDt = DateTime.Parse(txLocDt.Text);
            db.SaveChanges();//ef保存
            MessageBox.Show("保存成功!");
        }
    }
}
这里就用到前面创建的EF上下文件对象类,ucdosEntities

6、运行程序,点击刷新按钮,数据全部加载完成,上传时间列有格式化的效果,界面如下:

 选择某条数据,下面显示详情信息

 这里id不能修改,其他4个可以修改,修改车牌号和纬度,点击更新,效果立马联动,

 7、查看数据库,数据更新了

 这一波666,帅得很。

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
WPF是一种创建Windows应用程序的框架,它提供了许多可视化组件和工具,使得应用程序的创建变得更加容易和快捷。本次实例的项目是一个简单的点餐系统,它包含了以下几个主要模块: 1. 登录界面 用户需要输入用户名和密码才能成功登录,登录成功后,程序将跳转到订单界面。如果用户输入的用户名或密码不正确,则会提示错误信息。 2. 菜单界面 在菜单界面,用户可以查看所有可供选择的菜品列表,并可以选择需要点的菜品。每个菜品都可以显示它的描述、价格以及图片,用户可以在右侧的“购物车”中查看他们已经点的菜品以及总价。 3. 订单界面 订单界面用于显示用户已经点的菜品信息以及订单的总价。用户在确认购物车中的菜品信息无误后,可以点击“去结算”按钮,进入支付界面。 4. 支付界面 在支付界面,用户需要选择支付方式并输入对应的支付信息,如信用卡号、有效期和验证码等。支付成功后,程序将返回订单界面并提示用户支付成功。 通过使用WPF的鲁棒性、可扩展性和易用性,开发者可以在编写这样的小项目时得到很大的好处。开发者可以使用大量的分层和组件化方法,使他们的代码变得易于管理和扩展。此外,通过使用WPF的数据绑定和样式,开发者可以使程序的UI更加一致和响应式。总的来说,使用WPF编写点餐系统可以使开发者轻松地创建一个功能齐全、易于使用并具有良好用户体验的应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hqwest

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值