Question

我的菜单项很少，点击每个菜单项，我需要加载相应的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知道View。请让我知道解决这个问题的最佳方法。

谢谢！ SID

Answer 1

以MVVM方式绑定DXTabControl时，不应在ViewModel代码中使用DXTabItems。只需将您的数据集合绑定到Binding to Data帮助文章中指定的DXTabControl.ItemsSource属性即可要指定标签项和标题的直观表示，请分别使用DXTabControl.ItemTemplate和DXTabControl.ItemHeaderTemplate模板。

请查看How to bind DXTabControl to data示例了解详情。

Answer 2

感谢德米特里的投入。您的意见引导我朝着正确的方向前进，我在下面提到的链接中找到了答案： DevExpress Help

简而言之，这就是我实施的方式：

  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

动态添加选项卡到DevExpress DXTabControl WPF，MVVM

2 个答案: