如何将富文本框添加到选项卡项以便可以添加到 MVVM 中的选项卡控件？

Question

如何将RichTextBox添加到Tab项中，以便添加到Tab控件中，并以MVVM格式动态显示RichTextBox中的相应内容。

ViewModel

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。在 ViewModel 中，您不会直接访问 UI 元素，而是会设置绑定和数据模板以正确呈现您的 Viewmodel。正确的方法是有 2 个视图模型，第一个充当主视图模型，第二个充当每个选项卡的基础 DataContext。

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

MainViewModel

    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>

TextViewModel

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 属性呈现它们。

下载代码here

如何将富文本框添加到选项卡项以便可以添加到 MVVM 中的选项卡控件？

How to add a Rich Text Box to a Tab item so that can be added to a Tab Control in MVVM?

wpf

tabcontrol

mvvm

tabitem