WPF TabControl 數據綁定

WPF TabControl in Binding’s world

首先，TabControl是間接繼承自ItemControl的控件，因此可以像ItemControl那樣自如的使用。

自此，我們知道了ItemControl的派生控件有：

ItemControl–>Selector–>ListBox

ItemControl–>Selector–>ListBox–>ListView

ItemControl–>Selector–>ComboBox

ItemControl–>Selector–>TabControl

TabControl與ItemControl主要區別多了一個公共顯示區域ContentTemplate，該區域可以顯示當前選擇項的一些特殊信息，因此，我們可以按照如下的形式進行開發。

簡單版數據綁定使用

定義數據模型與數據綁定

MainWindow.xaml.cs

/*
 * function: TabControl in DataBinding's world
 * description: Using TabControl to Binding 
 * author: Mei Liyong
 */

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;

namespace Deamon
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            DataContext = new MainWindowModel();
        }
    }

    /// <summary>
    /// Main window model
    /// </summary>
    public class MainWindowModel:NotifyPropertyChanged
    {
        private ObservableCollection<DeviceModel> devices;

        public ObservableCollection<DeviceModel> Devices
        {
            get { return devices; }
            set { devices = value; }
        }

        public MainWindowModel()
        {
            Devices = new ObservableCollection<DeviceModel>();

            for (int i = 0; i < 5; i++)
            {
                Devices.Add(new DeviceModel() { Id = i + 1, Name = "設備" + (i + 1).ToString() });
            }
        }
    }

    /// <summary>
    /// Device data model
    /// </summary>
    public class DeviceModel: NotifyPropertyChanged
    {

        private int id;

        public int Id
        {
            get { return id; }
            set { id = value; OnPropertyChanged(); }
        }

        private string name;

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

    }

    /// <summary>
    /// Notifies clients that a property value has changed.
    /// </summary>
    public class NotifyPropertyChanged : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected void RaisePropertyChanged(string PropertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(PropertyName));
        }

        protected void OnPropertyChanged([CallerMemberName] string PropertyName = null)
        {
            RaisePropertyChanged(PropertyName);
        }
    }
}

完成數據綁定

MainWindow.xaml

<Window x:Class="Deamon.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:local="clr-namespace:Deamon"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <TabControl ItemsSource="{Binding Devices}">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <ContentPresenter Content="{Binding Name}"/>
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <Grid>
                        <DockPanel>
                            <StackPanel>
                                <WrapPanel>
                                    <TextBlock Text="編號："/>
                                    <TextBlock Text="{Binding Id}"/>

                                </WrapPanel>

                                <WrapPanel>
                                    <TextBlock Text="名稱："/>
                                    <TextBlock Text="{Binding Name}"/>

                                </WrapPanel>
                            </StackPanel>

                            <Polyline Points="15,16 95,110 154,300 125,10 541,95 15,16" Fill="#659BBC12" Stroke="#95100241" StrokeThickness="1"/>

                        </DockPanel>
                    </Grid>
                    
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </Grid>
</Window>

控件樣式設計跳轉到我上一篇博客

---

積跬步以至千里:) (:一陣沒來由的風