在WPF中使用用户控件动态添加/删除选项卡-绑定选项卡名称 [英] Add/Remove Tabs with User Control Dynamically in WPF - Binding Tab Name

问题描述

我想用TabControl创建应用程序.

I would to create application with TabControl.

我想将UserControls放在Tabs上，但是我不会在* .cs文件中创建它，而是使用绑定.

I would to put UserControls on Tabs, but I wouldn't create this in *.cs file, but using binding.

我有一个可以在其中添加带有用户控件的选项卡的应用程序，但是我不知道如何将字符串与选项卡名称绑定.

I have application where I can add tab with usercontrol, but i don't know how bind String with tab name.

我的代码:

MainWindow.xaml.cs

using System.Windows;

namespace WpfApp3
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

MainWindow.xaml

<Window x:Class="WpfApp3.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:WpfApp3"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Window.DataContext>
        <local:MainWindowViewModel/>
    </Window.DataContext>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <TabControl ItemsSource="{Binding UserControls}">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="???" /> <!--binding? -->
                </DataTemplate>
            </TabControl.ItemTemplate>
        </TabControl>
        <Button Grid.Row="1" Content="Dodaj zakładkę" Command="{Binding AddButtonCommand}"/>

    </Grid>
</Window>

MainWindowViewModel.cs

using Prism.Commands;
using Prism.Mvvm;
using System.Collections.ObjectModel;
using System.Windows.Controls;
using System.Windows.Input;

namespace WpfApp3
{
    class MainWindowViewModel : BindableBase
    {
        public ObservableCollection<UserControl> UserControls { get; set; }
        public ICommand AddButtonCommand { get; set; }

        public MainWindowViewModel()
        {
            AddButtonCommand = new DelegateCommand(ClickButton);
            UserControls = new ObservableCollection<UserControl>();           
        }

        private void ClickButton()
        {
            UserControls.Add(new UCTest());
            RaisePropertyChanged("UserControls");
        }
    }
}

我尝试使用带有名称的参数添加构造函数UserControl，但是我不知道如何通过绑定将其加入.

I tried add constructor UserControl with parameter with name, but i don't know how join it with binding.

我的第二件事是使用UserControl和String(带有选项卡名称)创建类，但是我无法将具有UserControl的字段绑定到Widdow.

My second thing is create class with UserControl and String (with tab name), but i couldnt bind field with UserControl to Widdow.

谢谢，问候.

推荐答案

您不应在视图模型的 ObservableCollection 中添加 UserControls 或任何其他UI元素.相反，您应该定义自己的模型类型，并将这一类型的实例添加到源集合中.

You shouldn't add UserControls or any other UI elements to the ObservableCollection in the view model. Instead you should define your own model type and add instances of this one to the source collection.

然后您可以绑定到此类的任何属性:

You could then bind to any property of this class:

class Model
{
    public string Header { get; set; }
}

class MainViewModel : BindableBase
{
    public ObservableCollection<Model> UserControls { get; set; }
    public ICommand AddButtonCommand { get; set; }

    public Window13ViewModel()
    {
        AddButtonCommand = new DelegateCommand(ClickButton);
        UserControls = new ObservableCollection<Model>();
    }

    private void ClickButton()
    {
        UserControls.Add(new Model() { Header = "some name..." });
    }
}

XAML:

<TabControl ItemsSource="{Binding UserControls}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Header}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <local:UCTest />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

这篇关于在WPF中使用用户控件动态添加/删除选项卡-绑定选项卡名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！