本文主要实现下图所示的应用场景:

对于Class1页,会显示用户的age和address属性,对于Class2页,会显示用户的age,address和sex属性。在左边的ListBox中选择对应的用户,右侧会显示其对应的属性信息。

xaml代码如下:

<Controls:MetroWindow x:Class="TabControlAndListBoxDemo.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:Controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:local="clr-namespace:TabControlAndListBoxDemo"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<TabControl TabStripPlacement="Top" Name="tabcontrol">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding Path=SelectionChangedEvent}"
CommandParameter="{Binding ElementName=tabcontrol, Path=SelectedIndex}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<TabItem Header="Class1" >
<Grid Visibility="{Binding Path=Class1Flag}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40*"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<ListBox ItemsSource="{Binding Path=Users_Class1}" Name="listbox1" Grid.Column="0" Grid.ColumnSpan="1">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<StackPanel Grid.Column="1">
<Canvas Height="30" Margin="20,20,0,0">
<Label Content="Age:" Canvas.Left="20"/>
<TextBox Canvas.Left="100" Width="100" Text="{Binding ElementName=listbox1, Path=SelectedItem.Age}"/>
</Canvas>
<Canvas Height="30" Margin="20,20,0,0">
<Label Content="Address:" Canvas.Left="20"/>
<TextBox Canvas.Left="100" Width="100" Text="{Binding ElementName=listbox1, Path=SelectedItem.Address}"/>
</Canvas>
</StackPanel>
</Grid>
</TabItem>
<TabItem Header="Class2">
<Grid Visibility="{Binding Path=Class2Flag}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40*"/>
<ColumnDefinition Width="60*"/>
</Grid.ColumnDefinitions>
<ListBox ItemsSource="{Binding Path=Users_Class2}" Name="listbox2" Grid.Column="0">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<StackPanel Grid.Column="1" Visibility="{Binding Path=Class2Flag}">
<Canvas Height="30" Margin="20,20,0,0">
<Label Content="Age:" Canvas.Left="20"/>
<TextBox Canvas.Left="100" Width="100" Text="{Binding ElementName=listbox2, Path=SelectedItem.Age}"/>
</Canvas>
<Canvas Height="30" Margin="20,20,0,0">
<Label Content="Address:" Canvas.Left="20"/>
<TextBox Canvas.Left="100" Width="100" Text="{Binding ElementName=listbox2, Path=SelectedItem.Address}"/>
</Canvas>
<Canvas Height="30" Margin="20,20,0,0">
<Label Content="Sex:" Canvas.Left="20"/>
<TextBox Canvas.Left="100" Width="100" Text="{Binding ElementName=listbox2, Path=SelectedItem.Sex}"/>
</Canvas>
</StackPanel>
</Grid>
</TabItem>
</TabControl>
</Grid>
</Controls:MetroWindow>

对应的ViewModel的代码如下:

namespace TabControlAndListBoxDemo
{
public class MainWindowViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged; private List<User> class1 = new List<User>();
private List<User> class2 = new List<User>();
private string class1flag = "hidden";
private string class2flag = "hidden";
public List<User> Users_Class1
{
get { return class1; }
set
{
class1 = value;
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs("Users_Class1"));
}
}
public List<User> Users_Class2
{
get { return class2; }
set
{
class2 = value;
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs("Users_Class2"));
}
} public string Class1Flag
{
get { return class1flag; }
set
{
class1flag = value;
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs("Class1Flag"));
}
}
public string Class2Flag
{
get { return class2flag; }
set
{
class2flag = value;
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs("Class2Flag"));
}
} public DelegateCommand SelectionChangedEvent { get; } public MainWindowViewModel()
{
Initiate();
SelectionChangedEvent = new DelegateCommand(SelectionChangedEventHandler);
} private void Initiate()
{
Users_Class1.Add(new User() { Name = "Lily", Age = 20, Address = "China" });
Users_Class1.Add(new User() { Name = "Tom", Age = 20, Address = "US" });
Users_Class2.Add(new User() { Name = "Spencer", Age = 21, Address = "Japan",Sex="Female" });
Users_Class2.Add(new User() { Name = "Jack", Age = 21, Address = "UK", Sex = "Male" });
} private void SelectionChangedEventHandler(object sender, DelegateCommandEventArgs args)
{
int Index = Convert.ToInt16(args.Parameter);
if(Index == 0)
{
Class1Flag = "Visible";
Class2Flag = "Hidden";
}
if(Index == 1)
{
Class1Flag = "Hidden";
Class2Flag = "Visible";
}
}
}
}

WPF中TabControl控件和ListBox控件的简单应用(MVVM)的更多相关文章

  1. C# 在DataGridView中,点击单元格调出 TreeView控件 或 ListBox控件

    1.调出 TreeView控件 或  ListBox控件 private void deductGrid1_CellClick(object sender, DataGridViewCellEvent ...

  2. ComboxBox控件、checklistbox控件和listbox控件的组合开发

    第一步:先创建一个WinForm窗体应用程序,按照下图所示的进行布局. 第二步:为ComboxBox控件.checklistbox控件和listbox控件和button控件设置属性 第三步:在代码中的 ...

  3. WPF中在摄像头视频上叠加控件的解决方案

    一.视频呈现 前段时间,在一个wpf的项目中需要实时显示ip摄像头,对此的解决方案想必大家都应该知道很多.在winform中,我们可以将一个控件(一般用panel或者pictruebox)的句柄丢给摄 ...

  4. WPF中。。DataGrid 实现时间控件和下拉框控件

    DatePicker 和新的 DataGrid 行 用户与 DataGrid 中日期列的交互给我造成了很大的麻烦. 我通过将一个 Data Source 对象拖动到 WPF 窗口上,创建了一个 Dat ...

  5. WPF中查找指定类型的父控件

    /// <summary> /// 查找父控件 /// </summary> /// <typeparam name="T"></type ...

  6. C# WinForm 中Console 重定向输出到ListBox控件中显示

                        {              VoidAction action =              {                  lstBox.Items. ...

  7. WPF中实现多选ComboBox控件

    在WPF中实现带CheckBox的ComboBox控件,让ComboBox控件可以支持多选. 将ComboBox的ItemsSource属性Binding到一个Book的集合, public clas ...

  8. 【WPF学习】第二十三章 列表控件

    WPF提供了许多封装项的集合的控件,本章介绍简单的ListBox和ComboBox控件,后续哈会介绍更特殊的控件,如ListView.TreeView和ToolBar控件.所有这些控件都继承自Item ...

  9. WPF进阶技巧和实战03-控件(3-文本控件及列表控件)

    系列文章链接 WPF进阶技巧和实战01-小技巧 WPF进阶技巧和实战02-布局 WPF进阶技巧和实战03-控件(1-控件及内容控件) WPF进阶技巧和实战03-控件(2-特殊容器) WPF进阶技巧和实 ...

随机推荐

  1. Superset SSO改造和自定义宏命令

    目录 背景 关于Superset 需要解决的问题 定制化改造 准备环境 改造OAuth SSO 安装依赖 配置SSO 添加自定义的SecurityManager 运行一下吧 自定义宏命令 开启配置 添 ...

  2. 首页页面(html+css+js)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. linux中sort命令全面解析

    目录 一:sort命令作用 二:sort格式 1.sort参数 2.参数解析 sort命令简介 Linux sort 命令用于将文本文件内容加以排序. sort 可针对文本文件的内容,以行为单位来排序 ...

  4. el表达式中的${param}用法

    el表达式中的${param}? 1. 2. ${param.name} 等价于 request.getParamter("name"),这两种方法一般用于服务器从页面或者客户端获 ...

  5. QA(测试) 工作准则建议

    身为一个专业的 QA 当然需要有自己的测试原则,这些测试原则不仅可以帮助我们提高产品质量,对外还能体现出我们的专业性,从而让合作方后续还有意愿和我们合作. 1 测试前 1.1 需求评审 必须参与,有问 ...

  6. 洛谷P2240 【深基12.例1】部分背包问题(经典模板)

    首先应该注意几个关键信息:装走尽多的金币.所有金币可以随意分割并且分割后金币的价值比不变; 我们可以抽象成一个买东西的场景,给你一定数目的钱,让你在这些钱内尽量在超市买更多的小零食,这就牵扯到了一个性 ...

  7. Basler相机启动问题xml读取出错

    切记!同一张网卡上多网口分别连多相机的时候,不要用同一个网段!!很容易出错!

  8. HUWEI交换机如何判断环路故障

    定义 以太网交换网络中为了提高网络可靠性,通常会采用冗余设备和冗余链路,然而现网中由于组网调整.配置修改.升级割接等原因,经常会造成数据或协议报文环形转发,不可避免的形成环路.如图1所示,三台设备两两 ...

  9. CSP2019 Day2T2 划分

    很显然有一个暴力 \(dp\),令 \(dp_{i, j}\) 表示最后一次划分在 \(i\) 上次划分在 \(j\) 的最小花费,令 \(S_i = \sum\limits_{j = 1} ^ i ...

  10. GC基础知识

    内存溢出和内存泄漏 内存溢出(Out Of Memory) 就是申请内存时,JVM没有足够的内存空间.通俗说法就是去蹲坑发现坑位满了. 内存泄露 (Memory Leak) 就是申请了内存,但是没有释 ...