动态添加标签到DevExpress DXTabControl WPF, MVVM

本文关键字：WPF MVVM DXTabControl DevExpress 添加 加标签 动态 | 更新日期: 2023-09-27 18:08:30

我有几个菜单项和每个菜单项的点击，我需要加载相应的ViewModel作为一个新的选项卡。为了达到这个目的，我采取了以下方法:

 <dx:DXTabControl OverridesDefaultStyle="True" Margin="2" BorderThickness="0" Padding="0" dxlc:DockLayoutControl.Dock="Client"
                             Grid.Row="1" ItemsSource="{Binding Workspaces}">
                <dx:DXTabControl.View>                        
                    <dx:TabControlScrollView ShowHeaderMenu="True" ShowHiddenTabItemsInHeaderMenu="False" HeaderLocation="Top" HeaderOrientation="Horizontal" AllowAnimation="True" AllowHideTabItems="True" AutoHideScrollButtons="True" 
                                             ScrollViewer.PanningMode="HorizontalOnly" ScrollButtonsShowMode="WhenNeeded"/>
                </dx:DXTabControl.View>
                <dx:DXTabControl.ItemTemplate>
                    <DataTemplate>
                        <ContentControl Content="{Binding Content}"/>
                    </DataTemplate>
                </dx:DXTabControl.ItemTemplate>
            </dx:DXTabControl>

在ViewModel (c#)中:

 public ObservableCollection<DXTabItem> Workspaces
    {
        get { return workspaces; }
        set { this.Set<ObservableCollection<DXTabItem>>("Workspaces", ref this.workspaces, value); }
    }

和加载ViewModel:

Workspaces = new ObservableCollection<DXTabItem>() { new DXTabItem() { Header = header,
            Content = contentDetails, IsSelected= true, AllowHide = (((WorkspaceViewModel)contentDetails).AllowTabHiding) ? DefaultBoolean.True: DefaultBoolean.False } };

这个方法工作得很好，并且给了我想要的行为。但是我确实喜欢从我的ViewModel中去掉DXTabItem，因为这使ViewModel意识到视图。请告诉我解决这个问题的最佳方法。

谢谢!Sid

动态添加标签到DevExpress DXTabControl WPF, MVVM

当以mvvm方式绑定DXTabControl时，您不应该在ViewModel的代码中使用DXTabItems。只需将数据集合绑定到DXTabControl.ItemsSource属性，就像在绑定到数据帮助文章中指定的那样。
要指定选项卡项和标题的可视化表示，分别使用DXTabControl.ItemTemplate和DXTabControl.ItemHeaderTemplate模板。

请查看如何将DXTabControl绑定到数据示例以了解详细信息。

感谢Dmitry的输入。你的输入让我找到了正确的方向，我在下面提到的链接中找到了我的答案:DevExpress帮助

简而言之，这就是我如何实现的:

  public class TabContainer
{
    public string Header { get; set; }
    public string AllowHide { get; set; }
    public bool IsSelected { get; set; }
    public ViewModelBase Content { get; set; }
}

Xaml是这样的

<dx:DXTabControl OverridesDefaultStyle="True" Margin="2" BorderThickness="0" Padding="0" dxlc:DockLayoutControl.Dock="Client"
                                 Grid.Row="1" ItemsSource="{Binding Workspaces}">
                    <dx:DXTabControl.ItemContainerStyle>
                        <Style TargetType="dx:DXTabItem">
                            <Setter Property="Header" Value="{Binding Header}"/>
                            <Setter Property="AllowHide"  Value="{Binding AllowHide}"/>
                            <Setter Property="IsSelected"  Value="{Binding IsSelected}"/>
                        </Style>                       
                    </dx:DXTabControl.ItemContainerStyle>
                    <dx:DXTabControl.View>                        
                        <dx:TabControlScrollView ShowHeaderMenu="True" ShowHiddenTabItemsInHeaderMenu="False" HeaderLocation="Top" HeaderOrientation="Horizontal" AllowAnimation="True" AllowHideTabItems="True" AutoHideScrollButtons="True" 
                                                 ScrollViewer.PanningMode="HorizontalOnly" ScrollButtonsShowMode="WhenNeeded"/>
                    </dx:DXTabControl.View>
                    <dx:DXTabControl.ItemTemplate>
                        <DataTemplate>
                            <ContentControl Content="{Binding Content}"/>
                        </DataTemplate>
                    </dx:DXTabControl.ItemTemplate>
                </dx:DXTabControl>

谢谢!Sid

相关文章：