WPF之TabControl控件用法

先創建實體基類：NotificationObject(用來被實體類繼承) 實現屬性更改通知接口：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;

namespace TabControlDemo
{
    public class NotificationObject:INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged!=null)
            {
                this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

 

創建員工類Employee繼承NotificationObject類：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace TabControlDemo
{
    public class Employee:NotificationObject
    {
        private string employeeName;

        public string EmployeeName
        {
            get { return employeeName; }
            set
            {
                if (value!=employeeName)
                {
                    employeeName = value;
                    OnPropertyChanged("EmployeeName");
                }
            }
        }

        private string sex;

        public string Sex
        {
            get { return sex; }
            set
            {
                if (value != sex)
                {
                    sex = value;
                    OnPropertyChanged("Sex");
                }
            }
        }

        private int age;

        public int Age
        {
            get { return age; }
            set
            {
                if (value != age)
                {
                    age = value;
                    OnPropertyChanged("Age");
                }
            }
        }

        private string title;

        public string Title
        {
            get { return title; }
            set
            {
                if (value != title)
                {
                    title = value;
                    OnPropertyChanged("Title");
                }
            }
        }
    }
}

 

創建部門類Department繼承NotificationObject類：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Collections.ObjectModel;

namespace TabControlDemo
{
   public class Department:NotificationObject
    {
        private string name;

        public string Name
        {
            get { return name; }
            set 
            {
                if (value!=name)
                {
                    name = value;
                    OnPropertyChanged("Name");
                }
            }
        }

        private ObservableCollection<Employee> employees;

        public ObservableCollection<Employee> Employees
        {
            get 
            {
                if (employees==null)
                {
                    employees = new ObservableCollection<Employee>();
                }
                return employees;
            }

        }
        
    }
}

 

主窗口的XAML頭部引用名稱空間：

xmlns:local="clr-namespace:TabControlDemo"

 

本例中TabControl控件中的TabItem用DataGrid控件來顯示數據，

主窗口的資源中定義DataGridCell的樣式資源：Key為dgCellStyle，使數據在單元格中居中顯示：

 <Style x:Key="dgCellStyle" TargetType="{x:Type DataGridCell}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridCell}">
                        <Grid Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

 

主窗口的資源中定義TabControl控件中的TabItem的樣式：

 <DataTemplate DataType="{x:Type local:Department}">
            <Grid>
                <DataGrid ItemsSource="{Binding Path=Employees}"   AutoGenerateColumns="False" GridLinesVisibility="All"    SelectionMode="Single" IsReadOnly="True" CanUserAddRows="False" CanUserDeleteRows="False">
                    <DataGrid.Columns>
                        <DataGridTextColumn Header="姓名" Binding="{Binding Path=EmployeeName}" CellStyle="{StaticResource ResourceKey=dgCellStyle}" />
                        <DataGridTextColumn Header="性別" Binding="{Binding Sex}" CellStyle="{StaticResource ResourceKey=dgCellStyle}" />
                        <DataGridTextColumn Header="年齡" Binding="{Binding Age}" CellStyle="{StaticResource ResourceKey=dgCellStyle}" />
                        <DataGridTextColumn Header="職位" Binding="{Binding Title}" CellStyle="{StaticResource ResourceKey=dgCellStyle}"/>
                    </DataGrid.Columns>
                </DataGrid>
            </Grid>
        </DataTemplate>

 

主窗口的XAML完整代碼：

<Window x:Class="TabControlDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:TabControlDemo"
        Title="MainWindow" Height="350" Width="525" DataContext="{Binding RelativeSource={RelativeSource Self}}" Loaded="Window_Loaded">
    <Window.Resources>
        <Style x:Key="dgCellStyle" TargetType="{x:Type DataGridCell}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridCell}">
                        <Grid Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <DataTemplate DataType="{x:Type local:Department}">
            <Grid>
                <DataGrid ItemsSource="{Binding Path=Employees}"   AutoGenerateColumns="False" GridLinesVisibility="All"    SelectionMode="Single" IsReadOnly="True" CanUserAddRows="False" CanUserDeleteRows="False">
                    <DataGrid.Columns>
                        <DataGridTextColumn Header="姓名" Binding="{Binding Path=EmployeeName}" CellStyle="{StaticResource ResourceKey=dgCellStyle}" />
                        <DataGridTextColumn Header="性別" Binding="{Binding Sex}" CellStyle="{StaticResource ResourceKey=dgCellStyle}" />
                        <DataGridTextColumn Header="年齡" Binding="{Binding Age}" CellStyle="{StaticResource ResourceKey=dgCellStyle}" />
                        <DataGridTextColumn Header="職位" Binding="{Binding Title}" CellStyle="{StaticResource ResourceKey=dgCellStyle}"/>
                    </DataGrid.Columns>
                </DataGrid>
            </Grid>
        </DataTemplate>
    </Window.Resources>
    <Grid Margin="5">
        <TabControl ItemsSource="{Binding Path=Departments}">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}"/>
                </DataTemplate>
            </TabControl.ItemTemplate>
        </TabControl>
    </Grid>
</Window>

 

C#代碼：

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;
using System.ComponentModel;
using System.Collections.ObjectModel;

namespace TabControlDemo
{
    /// <summary>
    /// MainWindow.xaml 的交互邏輯
    /// </summary>
    public partial class MainWindow : Window,INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        private ObservableCollection<Department> departments;

        public ObservableCollection<Department> Departments
        {
            get
            {
                if (departments == null)
                {
                    departments = new ObservableCollection<Department>();
                }
                return departments;
            }

        }

        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            Department d1 = new Department { Name="IT部"};
            d1.Employees.Add(new Employee() { EmployeeName="張三",Sex="男",Age=30,Title="IT部部門經理"});
            d1.Employees.Add(new Employee() { EmployeeName = "李四", Sex = "男", Age = 28, Title = "高級工程師" });
            d1.Employees.Add(new Employee() { EmployeeName = "王五", Sex = "男", Age =23, Title = "軟件工程師" });
            d1.Employees.Add(new Employee() { EmployeeName = "小麗", Sex = "女", Age = 19, Title = "助理工程師" });

            Department d2 = new Department { Name = "采購部" };
            d2.Employees.Add(new Employee() { EmployeeName = "孫錢", Sex = "男", Age = 30, Title = "采購部部門經理" });
            d2.Employees.Add(new Employee() { EmployeeName = "胡言", Sex = "男", Age = 28, Title = "采購員" });
            d2.Employees.Add(new Employee() { EmployeeName = "梁雨", Sex = "女", Age = 23, Title = "采購員" });

            Department d3 = new Department { Name = "銷售部" };
            d3.Employees.Add(new Employee() { EmployeeName = "劉明", Sex = "男", Age = 30, Title = "銷售部部門經理" });
            d3.Employees.Add(new Employee() { EmployeeName = "霍奇", Sex = "男", Age = 28, Title = "銷售員" });
            d3.Employees.Add(new Employee() { EmployeeName = "何軍", Sex = "女", Age = 23, Title = "銷售員" });

            this.Departments.Add(d1);
            this.Departments.Add(d2);
            this.Departments.Add(d3);
        }

      
    }
}

 

 

運行效果：