如何将格式文本框添加到选项卡项，以便可以将其添加到 MVVM 中的选项卡控件

Question

如何将富文本框添加到选项卡项，以便可以将其添加到选项卡控件中，并以 MVVM 格式动态显示富文本框中的相应内容。

视图模型

private ObservableCollection<TabItem> TabControl()
        {
            ObservableCollection<TabItem> Tabs= new ObservableCollection<TabItem>();
            return Tabs;
        }

控制器

  private void AddNewTabItem(string selectedItem)
    {
    try
        {
            System.Windows.Controls.RichTextBox richtextbox = new System.Windows.Controls.RichTextBox();
            richtextbox.Name = "richtextbox" + selectedItem;
            BrushConverter BC = new BrushConverter();
            richtextbox.Background = (SolidColorBrush)(BC.ConvertFrom("#FF098BBB"));
            richtextbox.Foreground = System.Windows.Media.Brushes.WhiteSmoke;
            richtextbox.IsReadOnly = true;
            TabItem m_tabItem = new TabItem();
            m_tabItem.Header = selectedItem;
            m_tabItem.Name = "tab" + selectedItem; 

            if (TabControl.Items.Count == 0)
            {
                TabControl.Items.Insert(0, m_tabItem);
                TabControl.SelectedIndex = msgTracerTabControl.Items.Count - 1;
            }
            else
            {
                TabControl.Items.Insert(msgTracerTabControl.Items.Count - 1, m_tabItem);
                TabControl.SelectedIndex = msgTracerTabControl.Items.Count - 2;
            }


            m_tabItem.Content = new System.Windows.Controls.RichTextBox();
            m_tabItem.Content = richtextbox;
            Tabs.add(m_tabItem);
        }
        catch (Exception EX)
        {
        }
    }

视图

<TabControl  Grid.Column="1" Grid.Row="1" ItemsSource="{Binding TabControl}"  }"/>

我已经使用了这段代码并且工作正常，这不是在 MVVM 中，而是 WAF 架构，因为我使用的是 MVVM 概念。

Answer 1

你没有想到 MVVM。在视图模型中，您不会直接访问 UI 元素，而是设置绑定和数据模板，以正确呈现您的视图模型。正确的方法是有 2 个视图模型，第一个充当主模型，第二个充当每个选项卡的基础 DataContext。

一个简单的例子是这样的：

主视图模型

    public class MainViewModel : BindableBase
    {
        private int _tabSuffix;
        public ObservableCollection<TextViewModel> TextTabs { get; set; } = new ObservableCollection<TextViewModel>();
    public DelegateCommand AddNewTabCommand { get; set; }
    public MainViewModel()
    {
        AddNewTabCommand = new DelegateCommand(OnAddNewTabCommand);
    }
    private void OnAddNewTabCommand()
    {
        TextTabs.Add(new TextViewModel()
        {
            Header = $"Tab #{_tabSuffix++}"
        });
    }
}

主视图

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Content="Add new tab item" Command="{Binding AddNewTabCommand}"></Button>
        <TabControl Grid.Row="1"
                    ItemsSource="{Binding TextTabs}"
                    IsSynchronizedWithCurrentItem="True">
            <!-- Defines the header -->
            <TabControl.ItemTemplate>
                <DataTemplate DataType="{x:Type so44497239:TextViewModel}">
                    <TextBlock Text="{Binding Header}" />
                </DataTemplate>
            </TabControl.ItemTemplate>
            <!-- defines the context of each tab -->
            <TabControl.ContentTemplate>
                <DataTemplate DataType="{x:Type so44497239:TextViewModel}">
                    <RichTextBox Background="#FF098BBB" Foreground="WhiteSmoke" IsReadOnly="False" />
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </Grid>

文本视图模型

public class TextViewModel : BindableBase
    {
        public string Header { get; set; }
        public Brush BackgroundBrush { get; set; }
        public Brush ForegroundBrush { get; set; }
        public string Document { get; set; }
    }

在此示例中，主视图模型不了解视图，而只是将项添加到自己的ObservableCollection中。TabControl本身通过绑定到 TextTabs，添加自己的选项卡项，并使用 ItemTemplate 和 ContentTemplate 属性呈现它们。

在此处下载代码