MVVM LIght 不可能在 TabItem 上绑定一个视图

Question

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

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

我正在为 Import/Export IDE（Informatica 数据交换）文章开发应用程序
我创建了一个完整的 DLL，其中包含所有模型类（客户要求在另一个应用程序中使用 class），其中还包含一个 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 将被触发并在 TabItem 下显示您的 UI 作为 Border 的 child。在 SelectionChanged event 中，您必须添加 UI 部分...

           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>

视图模型：

 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()});
    }
}

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

MVVM LIght 不可能在 TabItem 上绑定一个视图

MVVM LIght impossible to bind one view on a TabItem

wpf

binding

entity-framework

tabcontrol

mvvm-light