Question

我花了10多个小时探索MVVM模式上可以找到的大部分内容并绑定到TabControl。

我不想提供我的实际代码，但我的问题有点简单：

我正在开发一个导入/导出IDE（Informatica Data Exchange）文章的应用程序
我创建了一个包含所有模型类的完整DLL（客户端要求在另一个应用程序中使用该类），它还包含一个EF实体（以存储的形式）程序，而不是表格）
我在App.Ressources中获得了一个IndexMainViewModel和相关视图，其中定义了一个绑定V和VM的DataTemplate，它将包含2个选项卡。
每个标签必须显示2个不同的视图：与我的ExportViewModel相关的ExportView和相同建筑样式的ImportView。

有关信息：我创建了一个包含所有模型和工作类的DLL（包括我的服务，我还创建了一个带有接口的DAOlayout，一切都很棒）

如果看起来不清楚，我道歉。如果您需要，我会放下我的代码。

欢迎任何简单的想法。

感谢。

Answer 1

在设计部分，我创建了两个Tab，一个是上传，另一个是下载。

    <UserControl.Resources>
        <Style TargetType="TabItem" x:Key="MainTabItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabItem">
                        <DockPanel Height="45" Width="245" >
                            <Separator Name="RightBorder" Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" 
                                  Height="30" DockPanel.Dock="Right" />
                            <Grid Cursor="Hand" Width="245" Background="Transparent" >
                                <TextBlock Name="TabItemTitle" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center"

                            </Grid>
                            <ContentPresenter ContentSource="Header"/>
                        </DockPanel>

                        <ControlTemplate.Triggers>
                            <Trigger Property="Name" Value="UploadTab">
                                <Setter TargetName="TabItemTitle" Property="Text" Value="Upload"/>
                            </Trigger>
                            <Trigger Property="Name" Value="DownloadTab">
                                <Setter TargetName="TabItemTitle" Property="Text" Value="Download"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid  HorizontalAlignment="Center" Background="White">
            <TabControl Name="MediaControl"   SelectionChanged="TabControl_SelectionChanged" Padding="0">
            <TabItem Name="UploadTab" Style="{StaticResource MainTabItem}">
                <Border Name="UploadTabPanel">
                    </Border>
                </TabItem>
                <TabItem Name="DownloadTab" Style="{StaticResource MainTabItem}">
                <Border x:Name="DownloadTabPanel">
                    </Border>
                </TabItem>
            </TabControl>
    </Grid>
</UserControl>

每次Tab点击SelectionChanged event后，UI将TabItem作为Border的孩子显示。SelectionChanged event }，你必须添加UI Part ...

           private void TabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                try
                {
                    string tabItem = ((sender as TabControl).SelectedItem as TabItem).Name as string;
                    switch (tabItem)
                    {
                        case "UploadTab":
                            if (UploadInstance == null) 
                            {
                                UploadInstance = new UploadInstance();
                            }
                            UploadTabPanel.Child = UploadInstance;
                            break;
                        case "DownloadTab":
                            if (DownloadInstance == null)
                            {
                                DownloadInstance = new DownloadInstance();
                            }
                            DownloadTabPanel.Child = DownloadInstance;
                            break;
                    }
                }
                catch (System.Exception ex) { }
            }

Answer 2

我自己最终得到了答案。我对xaml代码中的视图绑定感到困惑。我简单地想出了这个：

查看：

<TabControl ItemsSource="{Binding Views}">
    <TabControl.ItemTemplate >
        <!-- header template -->
        <DataTemplate>
            <TextBlock Text="{Binding Header}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <!--content template-->
        <DataTemplate>
            <views:ExportView/>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

ViewModel：

 public sealed class IndexMainViewModel : ViewModelBase
{

    private ObservableCollection<TabItem> _views;

    public ObservableCollection<TabItem> Views
    {
        get { return _views; }
        set
        {
            _views = value;
            RaisePropertyChanged(() => Views);
        }
    }
    public IndexMainViewModel()
    {
        _views = new ObservableCollection<TabItem>();
        _views.Add(new TabItem { Header = "Export", Content = new ExportViewModel()});
        _views.Add(new TabItem { Header = "Import", Content = new ImportViewModel()});
    }
}

我还创建了一个带有TabItem对象的ViewModelBase类（MVVM Light类对象）。如果您不想错过xaml代码中的命名空间<views:ExportView/>，则可以显示此可观察的视图集。

MVVM不能绑定TabItem上的一个视图

2 个答案: