新时尚Windows8开发：ListBox与ComboBox

最新推荐文章于 2022-02-09 16:24:45 发布
最新推荐文章于 2022-02-09 16:24:45 发布
阅读量684 收藏
点赞数


这两个家伙，对我们来说，是绝对不陌生的，从WinForm到WPF，到Asp.net，我们都会接触到这两个控件，而且我相信我们也经常使用。

 

ListBox

先说ListBox，这个其实很简单，应该说，对于所有的集合控件，都是一样的使用方法，往里面放东西就两种途径：

1、数据绑定；

2、手动添加项。

而ListBox对应的项是ListBoxItem，说得更明白一些，它就是一个ContentControl，就像Button一样，都有一个Content属性，而我们就通过这个属性来设置项里面要显示的东西。对于数据绑定而言，因为是批量化的，所以，这个时候，我们就要用上DataTemplate了。

 

先来看看ListBox的数据绑定的例子。

[html] view plain copy print ?
  1. <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">  
  2.     <ListBox x:Name="list" Width="365"/>  
  3. </Grid>  
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <ListBox x:Name="list" Width="365"/>
    </Grid>


在代码视图中，我们在MainPage类的构造函数中设置数据源，其实就是设置它的ItemsSource属性。

[csharp] view plain copy print ?
  1. public MainPage()  
  2. {  
  3.     this.InitializeComponent();  
  4.   
  5.     string[] items = { "夏", "商", "周", "春秋战国", "秦", "汉", "三国魏晋南北朝", "隋", "唐" };  
  6.     this.list.ItemsSource = items;  
  7. }  
        public MainPage()
        {
            this.InitializeComponent();

            string[] items = { "夏", "商", "周", "春秋战国", "秦", "汉", "三国魏晋南北朝", "隋", "唐" };
            this.list.ItemsSource = items;
        }


然后按下F5，你能看到以下的效果。

 

可是，有时候，似乎只显示一个文本还不够，有可能我们用的数据源较为复杂。

好的，现在我们来伪造一些测试数据，先定义实体类。

[csharp] view plain copy print ?
  1. public class Employee  
  2. {  
  3.     public string EmName { get; set; }  
  4.     public string EmNo { get; set; }  
  5.     public int EmAge { get; set; }  
  6.   
  7.     public Windows.UI.Xaml.Media.Imaging.BitmapImage Photo { get; set; }  
  8. }  
    public class Employee
    {
        public string EmName { get; set; }
        public string EmNo { get; set; }
        public int EmAge { get; set; }

        public Windows.UI.Xaml.Media.Imaging.BitmapImage Photo { get; set; }
    }


接着弄好XAML。

[html] view plain copy print ?
  1. <ListBox x:Name="listEmp" SelectionMode="Single">  
  2.     <ListBox.ItemTemplate>  
  3.         <DataTemplate>  
  4.             <Grid>  
  5.                 <Grid.ColumnDefinitions>  
  6.                     <ColumnDefinition Width="Auto"/>  
  7.                     <ColumnDefinition/>  
  8.                 </Grid.ColumnDefinitions>  
  9.                 <Grid Margin="10" Grid.Column="1">  
  10.                     <Grid.RowDefinitions>  
  11.                         <RowDefinition Height="Auto"/>  
  12.                         <RowDefinition Height="Auto"/>  
  13.                         <RowDefinition Height="Auto"/>  
  14.                     </Grid.RowDefinitions>  
  15.                     <Grid.ColumnDefinitions>  
  16.                         <ColumnDefinition Width="auto"/>  
  17.                         <ColumnDefinition/>  
  18.                     </Grid.ColumnDefinitions>  
  19.                     <TextBlock Grid.Row="0" Grid.ColumnSpan="2" FontWeight="Bold" FontSize="24" Margin="3,2,3,2" Text="{Binding EmName}"/>  
  20.                     <TextBlock Text="工号：" Grid.Row="1" Grid.Column="0"/>  
  21.                     <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding EmNo}"/>  
  22.                     <TextBlock Grid.Row="2" Grid.Column="0" Text="年龄："/>  
  23.                     <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding EmAge}"/>  
  24.                 </Grid>  
  25.                 <Image Grid.Column="0" Margin="4" Source="{Binding Photo}" Stretch="Uniform"/>  
  26.             </Grid>  
  27.         </DataTemplate>  
  28.     </ListBox.ItemTemplate>  
  29. </ListBox>  
        <ListBox x:Name="listEmp" SelectionMode="Single">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Grid Margin="10" Grid.Column="1">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Row="0" Grid.ColumnSpan="2" FontWeight="Bold" FontSize="24" Margin="3,2,3,2" Text="{Binding EmName}"/>
                            <TextBlock Text="工号：" Grid.Row="1" Grid.Column="0"/>
                            <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding EmNo}"/>
                            <TextBlock Grid.Row="2" Grid.Column="0" Text="年龄："/>
                            <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding EmAge}"/>
                        </Grid>
                        <Image Grid.Column="0" Margin="4" Source="{Binding Photo}" Stretch="Uniform"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>


在代码视图中进行绑定。

[csharp] view plain copy print ?
  1. List<Employee> empList = new List<Employee>();  
  2. Employee e1 = new Employee  
  3. {  
  4.     EmName = "胡扯",  
  5.     EmNo = "HC-22556854",  
  6.     EmAge = 38,  
  7.     Photo = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///Assets/1.jpg"))  
  8. };  
  9. empList.Add(e1);  
  10.   
  11. Employee e2 = new Employee  
  12. {  
  13.     EmName = "张大腿",  
  14.     EmNo = "HC-62254585",  
  15.     EmAge = 41,  
  16.     Photo = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///Assets/1.jpg"))  
  17. };  
  18. empList.Add(e2);  
  19.   
  20. Employee e3 = new Employee  
  21. {  
  22.     EmName = "草先生",  
  23.     EmNo = "HC-2000355462",  
  24.     EmAge = 41,  
  25.     Photo = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///Assets/1.jpg"))  
  26. };  
  27. empList.Add(e3);  
  28.   
  29. this.listEmp.ItemsSource = empList;  
            List<Employee> empList = new List<Employee>();
            Employee e1 = new Employee
            {
                EmName = "胡扯",
                EmNo = "HC-22556854",
                EmAge = 38,
                Photo = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///Assets/1.jpg"))
            };
            empList.Add(e1);

            Employee e2 = new Employee
            {
                EmName = "张大腿",
                EmNo = "HC-62254585",
                EmAge = 41,
                Photo = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///Assets/1.jpg"))
            };
            empList.Add(e2);

            Employee e3 = new Employee
            {
                EmName = "草先生",
                EmNo = "HC-2000355462",
                EmAge = 41,
                Photo = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///Assets/1.jpg"))
            };
            empList.Add(e3);

            this.listEmp.ItemsSource = empList;


这里我们就用到了数据模板了，因为我们每一项要显示的内容有员工头像，姓名，工号，年龄多个字段，明显仅依靠一个字符串是做不到的，因此，必要时，我们出动数据模板。

 

可能有人会想了，这ListBox默认是纵向排列的，有没有办法让它的项水平排列呢？当然有，ItemsPanel属性正是让我们来决定它的项列表如何排列的，它可以设置一个面板，如

[html] view plain copy print ?
  1. <ListBox.ItemsPanel>  
  2.     <ItemsPanelTemplate>  
  3.         <StackPanel Orientation="Horizontal"/>  
  4.     </ItemsPanelTemplate>  
  5. </ListBox.ItemsPanel>  
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>


再运行一下，你就能看到它们水平排列了。

怎么样，这三位哥们儿挺帅的吧。

 

接下来是手动添加项，这个就更简单了，看看下面的XAML你就懂了。

[html] view plain copy print ?
  1. <ListBox>  
  2.     <ListBoxItem>项目一</ListBoxItem>  
  3.     <ListBoxItem>  
  4.         <ListBoxItem.Content>  
  5.             <Rectangle Width="480" Height="80" Fill="Orange"/>  
  6.         </ListBoxItem.Content>  
  7.     </ListBoxItem>  
  8.     <ListBoxItem>  
  9.         <ListBoxItem.Content>  
  10.             <Grid>  
  11.                 <Grid.ColumnDefinitions>  
  12.                     <ColumnDefinition Width="auto"/>  
  13.                     <ColumnDefinition/>  
  14.                 </Grid.ColumnDefinitions>  
  15.                 <TextBlock Grid.Column="0" Text="请输入一个数字：" FontSize="25"/>  
  16.                 <TextBox Grid.Column="1" Width="260"/>  
  17.             </Grid>  
  18.         </ListBoxItem.Content>  
  19.     </ListBoxItem>  
  20. </ListBox>  
        <ListBox>
            <ListBoxItem>项目一</ListBoxItem>
            <ListBoxItem>
                <ListBoxItem.Content>
                    <Rectangle Width="480" Height="80" Fill="Orange"/>
                </ListBoxItem.Content>
            </ListBoxItem>
            <ListBoxItem>
                <ListBoxItem.Content>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0" Text="请输入一个数字：" FontSize="25"/>
                        <TextBox Grid.Column="1" Width="260"/>
                    </Grid>
                </ListBoxItem.Content>
            </ListBoxItem>
        </ListBox>


运行后就是这样：

 

 

ComboBox

其实与ListBox是一样的，只不过它是一个下拉列表框罢了。其项列表对应着是ComboBoxItem类。

考虑下面的例子，我们在ComboBox里面放些东东，然后，当我们选择了特定项后，TextBlock中文本的颜色随之改变。

1、先布局UI。

[html] view plain copy print ?
  1. <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">  
  2.     <StackPanel>  
  3.         <ComboBox x:Name="cb" Width="275" HorizontalAlignment="Left">  
  4.             <ComboBox.ItemTemplate>  
  5.                 <DataTemplate>  
  6.                     <Grid>  
  7.                         <Grid.ColumnDefinitions>  
  8.                             <ColumnDefinition Width="auto"/>  
  9.                             <ColumnDefinition Width="*"/>  
  10.                         </Grid.ColumnDefinitions>  
  11.                         <Rectangle Grid.Column="0" Width="25" Height="25" Margin="5" Fill="{Binding Path=Brush}"/>  
  12.                         <TextBlock Grid.Column="1" Text="{Binding Path=ColorName}" VerticalAlignment="Center" Margin="3,2,2,2"/>  
  13.                     </Grid>  
  14.                 </DataTemplate>  
  15.             </ComboBox.ItemTemplate>  
  16.         </ComboBox>  
  17.         <TextBlock Margin="5,20,0,0" FontSize="60" FontWeight="Black" Text="文本颜色" x:Name="tb"/>  
  18.     </StackPanel>  
  19. </Grid>  
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <ComboBox x:Name="cb" Width="275" HorizontalAlignment="Left">
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Rectangle Grid.Column="0" Width="25" Height="25" Margin="5" Fill="{Binding Path=Brush}"/>
                            <TextBlock Grid.Column="1" Text="{Binding Path=ColorName}" VerticalAlignment="Center" Margin="3,2,2,2"/>
                        </Grid>
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>
            <TextBlock Margin="5,20,0,0" FontSize="60" FontWeight="Black" Text="文本颜色" x:Name="tb"/>
        </StackPanel>
    </Grid>


接下来嘛，你猜到了，肯定是写处理代码了。

在MainPage类的构造函数中，我们为ComboBox添加4个可选项。并且处理它的SelectionChanged事件，对于绑定，我们这次不必定义一个类这么麻烦，别忘了，.net里面有一个很灵活的类型——dynamic，再配全new 关键字，我们就可以动态定义一个对象出来了。

[csharp] view plain copy print ?
  1. public MainPage()  
  2. {  
  3.     this.InitializeComponent();  
  4.     List<dynamic> colorList = new List<dynamic>();  
  5.     colorList.Add(new {   
  6.         Brush = new SolidColorBrush(Colors.Yellow),  
  7.         ColorName = "黄色"  
  8.     });  
  9.     colorList.Add(new  
  10.     {  
  11.         Brush = new SolidColorBrush(Colors.Blue),  
  12.         ColorName = "蓝色"  
  13.     });  
  14.     colorList.Add(new  
  15.     {  
  16.         Brush = new SolidColorBrush(Colors.Gray),  
  17.         ColorName = "灰色"  
  18.     });  
  19.     colorList.Add(new  
  20.     {  
  21.         Brush = new SolidColorBrush(Colors.Pink),  
  22.         ColorName = "粉红色"  
  23.     });  
  24.     this.cb.ItemsSource = colorList;  
  25.   
  26.     // 绑定事件，对ComboBox的选择作出响应  
  27.     cb.SelectionChanged += (a, args) =>  
  28.         {  
  29.             if (args.AddedItems.Count <= 0)  
  30.             {  
  31.                 return;  
  32.             }  
  33.             dynamic item = (dynamic)args.AddedItems[0];  
  34.             if (item != null)  
  35.             {  
  36.                 this.tb.Foreground = item.Brush;  
  37.             }  
  38.         };  
  39.   
  40.     if (cb.Items.Count > 0)  
  41.     {  
  42.         cb.SelectedIndex = 0;  
  43.     }  
  44. }  
        public MainPage()
        {
            this.InitializeComponent();
            List<dynamic> colorList = new List<dynamic>();
            colorList.Add(new { 
                Brush = new SolidColorBrush(Colors.Yellow),
                ColorName = "黄色"
            });
            colorList.Add(new
            {
                Brush = new SolidColorBrush(Colors.Blue),
                ColorName = "蓝色"
            });
            colorList.Add(new
            {
                Brush = new SolidColorBrush(Colors.Gray),
                ColorName = "灰色"
            });
            colorList.Add(new
            {
                Brush = new SolidColorBrush(Colors.Pink),
                ColorName = "粉红色"
            });
            this.cb.ItemsSource = colorList;

            // 绑定事件，对ComboBox的选择作出响应
            cb.SelectionChanged += (a, args) =>
                {
                    if (args.AddedItems.Count <= 0)
                    {
                        return;
                    }
                    dynamic item = (dynamic)args.AddedItems[0];
                    if (item != null)
                    {
                        this.tb.Foreground = item.Brush;
                    }
                };

            if (cb.Items.Count > 0)
            {
                cb.SelectedIndex = 0;
            }
        }


 

linhuang1224
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
新时尚Windows8开发（22）：ListBox与ComboBox
老周——“易之道”
10-19 9896
这两个家伙，对我们来说，是绝对不陌生的，从WinForm到WPF，到Asp.net，我们都会接触到这两个控件，而且我相信我们也经常使用。   ListBox 先说ListBox，这个其实很简单，应该说，对于所有的集合控件，都是一样的使用方法，往里面放东西就两种途径： 1、数据绑定； 2、手动添加项。 而ListBox对应的项是ListBoxItem，说得更明白一些，它就是一个Conte
WPF listbox combobox简单绑定
iDream
01-13 1755
只要简单将combobox改成listbox，就可以用来给listbox绑定了
关于wpf SizeChanged不能触发的解决办法
深海狂鲨
10-23 4851
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presen
潘鹏整理WPF(8)列表控件ListBox&&ComboBox
Eden's space
09-22 2828
列表控件 继承Control.ItemControl，意味着可以放任意元素 ListBox和ComboBox的区别在于： ListBox可以多选，ComboBox只能单选 表现形式区别，ComboBox是个下拉列表的样子 ListBox<ListBox Name="Lb" Height="158" Margin="93,58,0,0" Width="277" SelectionChanged
Win32API实现的ListBox鼠标键盘事件处理Demo
06-05
Win32API实现的ListBox鼠标键盘事件处理Demo
winform中的ListBox和ComboBox绑定数据用法实例
01-01
本文实例讲述了winform中的ListBox和ComboBox绑定数据用法。分享给大家供大家参考。具体实现方法如下： 本例实现将集合数据绑定到ListBox和ComboBox控件,界面上显示某个属性的内容，代码如下： 代码如下: //… //...
其它控件VC源代码:listbox_with_columns
03-15
【标题】"其它控件VC源代码：listbox_with_columns" 涉及的知识点主要集中在Windows编程领域，特别是Visual C++（VC）和MFC（Microsoft Foundation Classes）的应用。这个项目显然涉及到一个带有列的列表框(ListBox)...
ListBox、ComboBox的操作实例（VC++源代码）
03-15
摘要:VC/C++源码,界面编程,ListBox,ComboBox　一个VC++源代码实例，演示如何使用ListBox、ComboBox，貌似实用的实例，当初是一个书中的实例，看了看，觉得挺实用的，就发上来奉献给VC菜鸟们学习参考。
WPF 自定义多选ComboBox控件
向往的是：佛祖堂前的鱼，静静听禅。
08-19 1633
自定会多选ComboBox控件1.样式设计2.后台代码 1.样式设计 采用ListBox控件，惊醒多选，然后对ListBox的ListBoxItem样式进行重新修改，增加CheckBox进行勾选显示 <!-- listbox 复选模式样式 --> <Style x:Key="ListBoxCheckBoxItemStayle" TargetType="ListBoxItem"> <Setter Property="Template">
wpf treeView数据模板 menu数据模板 Listbox和ComboBox数据模板
11-19
本项目包含treeview中的层级嵌套的数据模板，Listbox的数据模板，ComboBox的数据模板等。能给初学者学习模板起到引导作用。
移动LISTBOX API
fxj331072
04-07 684
Option ExplicitPrivate Declare Function ReleaseCapture Lib "user32" () As LongPrivate Declare Function SendMessage Lib "user32" Alias "SendMessageA" (ByVal hwnd As Long, ByVal wMsg As Long, ByVal wPar
win32 sdk绘制ListBox控件
夜空的流星的专栏
04-15 5103
1》产生：  // HWND CreateLB(HWND parentWnd) { HWND hListBox=0; hListBox = CreateWindow("LISTBOX", NULL, WS_CHILD|WS_VSCROLL | WS_TABSTOP | LBS_STANDARD | LBS_OWN
Win32 ListBox 控件简单Demo
bcbobo21cn的专栏
10-17 1030
/*---------------------------------------- 2020.10.11, by bo ----------------------------------------*/ #include <windows.h> LRESULT CALLBACK WndProc (HWND, UINT, WPARAM, LPARAM) ; #define ID_LIST 1 int WINAPI WinMain (HINSTANCE hIn.
ZK----第七章 ZUML页面组件集之下拉列表框
iteye_8039的博客
07-07 886
下拉列表框：162Combobox、comboitemCombobox：是一个内嵌下拉列表的特殊文本框，可直接输入文本，还可从下拉列表中选择一项 属性：autodrop=”true”：不用点击下拉按钮或按快捷键，在文本框中输入任何字符，下拉列表自动打开description：可为每个comboitem添加一个描述 &lt; combobox  autodrop=”true”&gt; &lt;...
MFC 如何给ComboBox下拉框控件添加item，如何添加顺序索引的数据项？
热门推荐
acoolgiser的博客
07-25 2万+
首先参考博客：https://blog.csdn.net/smtrobot/article/details/49306727 提到了添加item可以用AddString方法，效果如下： 我定义了一个数组： CString strFont[5] = { _T("宋体"),_T("楷体"),_T("仿宋"),_T("黑体"),_T("华文细黑") }; 想把这5个按数组索引的顺序添加到控件中。...
WPF系列教程（十七）：列表控件——ListBox、ComboBox
qq_43511299的博客
11-28 3575
ListBox控件 ListBox控件继承自ContentControl类，是一个容器类的控件，向ListBox控件中包含ListBoxItem元素向容器中添加成分，也可以添加其他任意的控件。 <ListBox x:Name="listBox" Margin="5" Height="auto" VerticalAlignment="Top"> <ListBoxItem> <Image Source="C:\王祺\学校\CSharp学习\Code\d590c
通过WIN32API选择listbox项，仅突出显示未触发selectChange问题
fakegeass的博客
02-09 693
问题描述 通过pywin32来发送消息设置某项为选中时，仅标蓝选中未进行dafaultAction的点击动作 win32gui.SendMessage(68992, win32con.LB_SELECTSTRING, 0, '28641') 表现为 ，而通过Accessibility Insights for Windows软件可以看到列表项的默认动作为双击 问题解决 对比pywinauto对应listbox的select处理可以发现，代码如下： def select(self, item,
ListBox和ComboBox的区别和使用
柳落青
11-24 5692
第一个是combobox 这个控件是一个下拉单的控件 对于combobox 一般我们常用的属性就是 1：决定这个控件的一个样子的 DrowDownStyle 赋值为simple 就是那种开始就是拉下来的那种有点像listbox不是太常用，大家可以尝试着赋值后，看下效果 赋值为DrowDown那么就是一种比较普通的下拉单，文本框中允许输入内容。 赋值为DrowDownList 那就是一种不允许......
MapBasic开发：ListBox控件与环境详解
MapBasic语言提供了丰富的功能，包括处理地图数据、查询、更新表项以及与用户交互的界面元素，如ListBox，使得开发者能够定制适合特定需求的GIS应用。通过熟练掌握MapBasic，开发者可以扩展MapInfo的功能，实现更...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值