在WPF中的选项卡项内动态添加用户控件

如何解决在WPF中的选项卡项内动态添加用户控件

大家好，我是WPF的新手，我的项目目标是当用户单击创建页面菜单项时，它将打开 createpage（UserControl）。该用户控件具有2个文本块，2个文本框和一个按钮。用户单击按钮。我的另一个UserControl显示在主窗口tabcontrol中（主窗口包含菜单栏，一个堆栈面板和tabcontrol。

ScreenShot1

ScreenShot2

ScreenShot3

我的错误是：单击页面按钮后，选项卡项未绑定到我的主窗口选项卡控件中

我的代码如下： MainWindow Xaml：

        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:TabItemCloseProject"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Menu Grid.Row="0" Grid.ColumnSpan="2">
            <MenuItem Header="Page" Foreground="White" Background="DarkSlateGray" Click="Page_Click"/>
        </Menu>
        <TabControl Grid.Row="1" Grid.Column="0" TabStripPlacement="Bottom" x:Name="createpagetabcntrl">
            <TabItem Header="createpage" x:Name="createpagetab"></TabItem>
        </TabControl>
        <TabControl x:Name="actionTabs" Background="White" Grid.Row="1" Grid.Column="1">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Height="21" Width="100">
                        <TextBlock Width="80" Text="{Binding Header}"/>
                        <Button Content="X" Width="20" Height="20" Background="Transparent" Foreground="Black"
                              Click="Closebtn" BorderBrush="Transparent"/>
                    </StackPanel>
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <UserControl Height="800" Width="1220" Content="{Binding Content}" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </Grid>
</Window>

后面的主窗口代码：

using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
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 TabItemCloseProject.ViewModel;

namespace TabItemCloseProject
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private ActionTabViewModel vmd;
        public static MainWindow mwindow;
        public MainWindow()
        {
            InitializeComponent();
           
        }

        public static MainWindow Initialize()
        {
            if(mwindow==null)
            {
                mwindow = new MainWindow();
            }
            return mwindow;
        }

        private void Closebtn(object sender,RoutedEventArgs e)
        {
            vmd.Tabs.RemoveAt(actionTabs.SelectedIndex);
        }

        private void Page_Click(object sender,RoutedEventArgs e)
        {
            createpagetab.Content=new CreatePage();
        }
    }
}

TabItem属性存储的类：

using System.Collections.Generic;
using System.Text;
using System.Windows.Controls;

namespace TabItemCloseProject
{
    public class ActionTabItem
    {
        // This will be the text in the tab control
        public string Header { get; set; }
        // This will be the content of the tab control It is a UserControl whits you need to create manualy
        public UserControl Content { get; set; }
    }
}

我的视图模型类：

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

namespace TabItemCloseProject.ViewModel
{
    public class ActionTabViewModel
    {
        // These Are the tabs that will be bound to the TabControl 
        public ObservableCollection<ActionTabItem> Tabs { get; set; }

        public ActionTabViewModel()
        {
            Tabs = new ObservableCollection<ActionTabItem>();
        }

        public void Populate()
        {
            // Add A tab to TabControl With a specific header and Content(UserControl)
            Tabs.Add(new ActionTabItem { Header = "UserControl 1",Content = new TestUserControl() });
            // Add A tab to TabControl With a specific header and Content(UserControl)
            Tabs.Add(new ActionTabItem { Header = "UserControl 2",Content = new TestUserControl() });
        }
    }
}

创建页面用户控件（当用户单击“页面菜单”项时绑定）

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:TabItemCloseProject"
             mc:Ignorable="d" 
             d:DesignHeight="250" d:DesignWidth="300" Background="DarkSlateGray">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Foreground="White" Grid.Row="0" Grid.Column="0" FontSize="20" Margin="10,20">PageNo</TextBlock>
        <TextBlock Foreground="White" Grid.Row="1" Grid.Column="0" FontSize="20" Margin="10,20">PageName</TextBlock>
        <TextBox Grid.Row="0" Grid.Column="1" Height="30" Width="60" TextWrapping="Wrap"/>
        <TextBox Grid.Row="1" Grid.Column="1" Height="30" Width="100" TextWrapping="Wrap"/>
        <Button Content="OK" Background="DarkSlateGray" Height="40" Width="80"
                Click="createPage" Foreground="White" Grid.Row="2" Grid.ColumnSpan="2"/>
    </Grid>
</UserControl>

在类后面创建页面代码：

using System.Collections.Generic;
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 TabItemCloseProject.ViewModel;

namespace TabItemCloseProject
{
    /// <summary>
    /// Interaction logic for CreatePage.xaml
    /// </summary>
    public partial class CreatePage : UserControl
    {
        private ActionTabViewModel vmd;
        public CreatePage()
        {
            InitializeComponent();
        }

        private void createPage(object sender,RoutedEventArgs e)
        {
            vmd = new ActionTabViewModel();
            // Bind the xaml TabControl to view model tabs
            MainWindow m = MainWindow.Initialize();
            m.actionTabs.ItemsSource = vmd.Tabs;
            // Populate the view model tabs
            vmd.Populate();
            //this.DataContext = vmd;
        }
    }
}

第二个用户控件（在创建页面按钮单击此用户控件后，将在主窗口选项卡上绑定）

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:TabItemCloseProject"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <TextBlock>Tab Item is worked!..</TextBlock>
    </Grid>
</UserControl>

后面的第二个用户控制代码：

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

namespace TabItemCloseProject
{
    /// <summary>
    /// Interaction logic for TestUserControl.xaml
    /// </summary>
    public partial class TestUserControl : UserControl
    {
        public TestUserControl()
        {
            InitializeComponent();
        }
    }
}

在WPF中的选项卡项内动态添加用户控件

如何解决在WPF中的选项卡项内动态添加用户控件

相关推荐