C# WPF TabControl用法指南(精品)

Posted dotNET跨平台

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了C# WPF TabControl用法指南(精品)相关的知识,希望对你有一定的参考价值。

概述

     TabControl是我们常用的翻页控件,但是wpf自带的 TabControl功能和样式比较单一,假如我的tab页面比较多,标题在有限的空间放不下,需要用左右箭头翻页,同时需要加一个筛选跳转的功能,这时候我们就需要使用Dev的控件DXTabControl.

功能演示

代码实现

     前台XAML:

<UserControl x:Class="Caliburn.Micro.Hello.TabControlView"
        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:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
          xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
        xmlns:local="clr-namespace:Caliburn.Micro.Hello"
        xmlns:cal="http://www.caliburnproject.org"
        mc:Ignorable="d"   Height="450" Width="800" >
    <Grid Height="300" Width="250" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Grid.RowDefinitions>
            <RowDefinition Height="35"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
            <Label Content="跳转到页:" VerticalAlignment="Center" Margin="5"/>
            <TextBox Text="Binding PageIndex" MinWidth="50"  VerticalAlignment="Center" Margin="5"/>
            <Button Content="跳转" Name="Button_Click"/>
        </StackPanel>
        <dx:DXTabControl   Grid.Row="1"  SelectedIndex="Binding SelectedIndex"
            ItemsSource="Binding ParamItems" Margin="5">
            <!--cal:Message.Attach="[Event SelectionChanged]=[DXTabControl_SelectionChanged()]">-->
            <dx:DXTabControl.ItemHeaderTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <!--<Image Source="Binding ImageLabel"/>-->
                        <dxlc:LayoutItem Label="Binding Header"/>
                    </StackPanel>
                </DataTemplate>
            </dx:DXTabControl.ItemHeaderTemplate>
            <dx:DXTabControl.ItemTemplate>
                <DataTemplate>
                    <ContentControl  cal:View.Model="Binding SubView" />
                </DataTemplate>
            </dx:DXTabControl.ItemTemplate>
            <dx:DXTabControl.View>
                <dx:TabControlScrollView AllowHideTabItems="False" AllowAnimation="True" 
                                         AllowKeyboardNavigation="True" AllowScrollOnMouseWheel="True"
                                       ShowHeaderMenu="True"/>
            </dx:DXTabControl.View>


        </dx:DXTabControl>
        <!--<dxg:GridControl >
            <dxg:GridControl.View>
                <dxg:TableView AllowPaging="True"/>
            </dxg:GridControl.View>
        </dxg:GridControl>-->


    </Grid>
</UserControl>

这里的ShowHeaderMenu="True"可以放出筛选的按钮,点击下拉按钮,选择要跳转的页面就可以跳转过去;

如果想擦除页面,将AllowHideTabItems设置true即可

每个页面通过模板绑定了一个子页面

<dx:DXTabControl.ItemTemplate>
                <DataTemplate>
                    <ContentControl  cal:View.Model="Binding SubView" />
                </DataTemplate>
            </dx:DXTabControl.ItemTemplate>

后台代码:

using PropertyChanged;
using System.Collections.ObjectModel;


namespace Caliburn.Micro.Hello

    [AddINotifyPropertyChangedInterface]
    public class TabControlViewModel : Screen, IViewModel
    
        public ObservableCollection<ParamDTO> ParamItems  get; set;  = new ObservableCollection<ParamDTO>();
        public int SelectedIndex  get; set; 
        public int PageIndex  get; set; 
        public TabControlViewModel()
        
            DisplayName = "TabControlTest";
            PageIndex = 3;


            ParamItems.Add(new ParamDTO()  Header = "1", SubView = new SubTabPageViewModel() );
            ParamItems.Add(new ParamDTO()  Header = "2", SubView = new SubTabPageViewModel() );
            ParamItems.Add(new ParamDTO()  Header = "3", SubView = new SubTabPageViewModel() );
            ParamItems.Add(new ParamDTO()  Header = "4", SubView = new SubTabPageViewModel() );
            ParamItems.Add(new ParamDTO()  Header = "5", SubView = new SubTabPageViewModel() );
            ParamItems.Add(new ParamDTO()  Header = "6", SubView = new SubTabPageViewModel() );
            ParamItems.Add(new ParamDTO()  Header = "7", SubView = new SubTabPageViewModel() );
            ParamItems.Add(new ParamDTO()  Header = "8", SubView = new SubTabPageViewModel() );
            ParamItems.Add(new ParamDTO()  Header = "9", SubView = new SubTabPageViewModel() );
            ParamItems.Add(new ParamDTO()  Header = "10", SubView = new SubTabPageViewModel() );
            ParamItems.Add(new ParamDTO()  Header = "11", SubView = new SubTabPageViewModel() );
            ParamItems.Add(new ParamDTO()  Header = "12", SubView = new SubTabPageViewModel() );
        


        public void Button_Click()
        
            SelectedIndex = PageIndex - 1;
        
    
    public class ParamDTO
    
        /// <summary>
        /// 标题
        /// </summary>
        public string Header  get; set; 


        /// <summary>
        /// SubView
        /// </summary>
        public SubTabPageViewModel SubView  get; set; 
    


这里ParamDTO是数据模型,SubView 就是我们的子页面

源码下载

百度网盘链接:https://pan.baidu.com/s/1JuD8PHUacDNIt7iCvxRB_w

提取码:6666

dev控件官网学习网址:https://docs.devexpress.com/WPF/DevExpress.Xpf.Core.DXTabControl

以上是关于C# WPF TabControl用法指南(精品)的主要内容,如果未能解决你的问题,请参考以下文章

C# WPF 用代码画一幅图(*精品*)

WPF 自定义TabControl控件样式

C# WPF通过反射及Ioc容器加载并显示其它项目界面(精品)

DockPanel 中的 WPF4 TabControl/Grid 隐藏了 StatusBar

WPF SelectedIndex 设置 TabControl 的问题

WPF TabControl 隐藏标头