5.0.7 TabControl的使用

         本文使用4个例子介绍TabControl的使用。包括xaml以及C#代码生成TabControl.其中第4个例子是使用TabControl来实现IO监控，作为工控软件的一部分。

【例1】使用TabControl以及 TabItem实现简单功能：

注意：TabControl的属性 TabStripPlacement可以对选项卡索引放置位置进行设置（上下左右）

 
     
         
             这是Tab 1
             选项1
             选项2
             选项3
         
     
     
         
             这是Tab 2
         
     

 

【例2】代码生成

        选项卡1中：通过建立一个StackPanel（其中添加文本以及按钮）；然后设置为TabItem1的Content。

 public Window3()
 {
     InitializeComponent();


     TabItem newTab1 = new TabItem();
     newTab1.Header = "新选项卡1";
     StackPanel stackpanel = new StackPanel() ;
     stackpanel.Orientation = Orientation.Vertical;
     stackpanel.Children.Add(new TextBlock { Text = "动态添加的页面1内容" });
     stackpanel.Children.Add(new System.Windows.Controls.Button { Content = "按钮" });
     newTab1.Content = stackpanel;

     this.MyTab.Items.Add(newTab1);   

     TabItem newTab2 = new TabItem();
     newTab2.Header = "新选项卡2";
     newTab2.Content = new TextBlock { Text = "动态添加的页面2内容" };
     this.MyTab.Items.Add(newTab2);

     // 选择最后一个选项卡
     MyTab.SelectedIndex = MyTab.Items.Count - 1;

     this.DataContext = new MainViewModel3();

 }

【例3】使用MVVM进行绑定

 public class TabItemModel
 {
     public string Header { get; set; }
     public string Content { get; set; }
 }

 public class MainViewModel3
 {
     public ObservableCollection Tabs { get; } = new ObservableCollection();
     public TabItemModel SelectedTab { get; set; }
     public MainViewModel3()
     {
         Tabs.Add(new TabItemModel { Header = "第一页", Content = "内容1" });
         Tabs.Add(new TabItemModel { Header = "第二页", Content = "内容2" });
         SelectedTab = Tabs[1];
     }
 }

【例4】PLC的IO监控界面

本文使用Uni

    public partial class windowIO : UserControl
    {
        private windowIOModel _viewModel = new windowIOModel();
        private int _itemsPerPage = 32; // 
        private int totalPages = 0;

        public bool bInitialized = false;
        public windowIO()
        {
            InitializeComponent();
            this.DataContext = _viewModel;
            UpdatePageContent();
            bInitialized = true;
        }

         private void UpdatePageContent()
 {
     PagesTab.Items.Clear();
     
     if (this.rbOutputs.IsChecked==true)
     {
         totalPages = (_viewModel.Outputs.Count + _itemsPerPage - 1) / _itemsPerPage;
     }
     else
     {
         totalPages = (_viewModel.Inputs.Count + _itemsPerPage - 1) / _itemsPerPage;
     }
       

     for (int page = 0; page < totalPages; page++)
     {
         var pageContent = new TabItem();

         var grid = new UniformGrid() { Columns = 2, Margin = new Thickness(10) };
         var UniformGrid_left = new UniformGrid() { Columns = 1 };
         var UniformGrid_right = new UniformGrid() { Columns = 1 };

         int i = 0;

         if (rbInputs.IsChecked == true)
         {
            
             // 全输入模式
             foreach (var input in _viewModel.Inputs.Skip(page * 32).Take(32))
             {
                 if(i<16)
                 {
                     UniformGrid_left.Children.Add(new SingleIOMonitor
                     {
                         DataContext = input
                         //IsActive = input.IsActive
                     });
                 }
                 else
                 {
                     UniformGrid_right.Children.Add(new SingleIOMonitor
                     {
                         DataContext = input
                         //IsActive = input.IsActive
                     });

                 };
                 i++;
             }                 
         }
         else
         {
             // 全输入模式
             foreach (var output in _viewModel.Outputs.Skip(page * 32).Take(32))
             {
                 if (i < 16)
                 {
                     UniformGrid_left.Children.Add(new SingleIOMonitor
                     {
                         DataContext = output
                     });
                 }
                 else
                 {
                     UniformGrid_right.Children.Add(new SingleIOMonitor
                     {
                         DataContext = output
                     });

                 }
                 i++;
             }
         }
         grid.Children.Add(UniformGrid_left);
         grid.Children.Add(UniformGrid_right);
         pageContent.Content = grid;
         PagesTab.Items.Add(pageContent);
     }
    PagesTab.SelectedIndex = _viewModel.CurrentPage=0;
 }
        
    

    private void PrevPage_Click(object sender, RoutedEventArgs e)
        {
            if (_viewModel.CurrentPage > 0)
            {
                _viewModel.CurrentPage--;
                PagesTab.SelectedIndex = _viewModel.CurrentPage;
            }                
        }

        private void NextPage_Click(object sender, RoutedEventArgs e)
        {
            if (_viewModel.CurrentPage < totalPages)
            {
                _viewModel.CurrentPage++;
                PagesTab.SelectedIndex = _viewModel.CurrentPage;
            }            
        }

        private void rbInputs_Checked(object sender, RoutedEventArgs e)
        {
            if(bInitialized==true)
            {
                UpdatePageContent();
            }            
        }
        private void rbOutputs_Checked(object sender, RoutedEventArgs e)
        {
            if (bInitialized == true)
            {
                UpdatePageContent();
            }                
        }
    }

 /// 

 /// IO 标签类
 /// 
 public class IOLabel : ObservableObject, IComparable
 {
     public int index;       //在byte数组中的序号
     public string Address { get; set; } //地址
     public string Comment { get; set; } //注释
     
     /// 

     /// Value数值,即IO
     /// 
     private bool _Value;
     public bool Value
     {
         get => _Value;
         set { 
             SetProperty(ref _Value, value);
            }
     }

     public int CompareTo(IOLabel other)
     {
         if (other == null) return 1; // null视为最小
         return index.CompareTo(other.index); // 使用int的CompareTo方法
     }
 }
 public class windowIOModel : ObservableObject
 {
     public ObservableCollection Inputs { get; } = new ObservableCollection();
     public ObservableCollection Outputs { get; } = new ObservableCollection();

     public BytesArrayTag inputTags;
     public BytesArrayTag OutputTags;

     private int _currentPage;
     public int CurrentPage
     {
         get => _currentPage;
         set { SetProperty(ref _currentPage, value); }
     }
}