将 TabControl ItemsSource 绑定到 ViewModel 的集合 [英] Binding TabControl ItemsSource to Collection of ViewModels
问题描述
出于某种原因,当将 ItemsSource
绑定到视图的 ObservableCollection
时,我花了很长时间让我的 TabControl
正确显示楷模.我的设计基于此处找到的教程:http://msdn.microsoft.com/en-us/magazine/dd419663.aspx.我确实在这里找到了一些像我这样的问题,但没有一个解决我的特殊情况.这是我在 xaml 中的 TabControl
.
For some reason I am having a heck of a time getting my TabControl
to display properly when binding the ItemsSource
to a ObservableCollection
of view models. I'm basing my design off of the tutorial found here: http://msdn.microsoft.com/en-us/magazine/dd419663.aspx. I did find a few questions like mine here but none addressed my particular situation.
This is my TabControl
in xaml.
<TabControl ItemsSource="{Binding Workspaces}"
SelectedIndex="{Binding ActiveWorkspaceIndex}"
ItemTemplate="{StaticResource ClosableTabItemTemplate}"/>
其中 ClosableTabItemTemplate
如下所示.
<DataTemplate x:Key="ClosableTabItemTemplate">
<DockPanel Width="120">
<Button
Command="{Binding Path=CloseCommand}"
Content="X"
Cursor="Hand"
DockPanel.Dock="Right"
Focusable="False"
FontFamily="Courier"
FontSize="9"
FontWeight="Bold"
Margin="0,1,0,0"
Padding="0"
VerticalContentAlignment="Bottom"
Width="16" Height="16"
/>
<ContentPresenter
Content="{Binding Path=DisplayName}"
VerticalAlignment="Center"
/>
</DockPanel>
</DataTemplate>
Workspaces
是视图模型的 ObservableCollection
.ActiveWorkspaceIndex
只是我在视图模型中跟踪的活动工作区索引.我通过 App.xaml 文件中的以下数据模板将我的视图模型与视图实例相关联.
Workspaces
is the ObservableCollection
of view models. ActiveWorkspaceIndex
is just the active workspace index that I keep track of in the view model. I associate my view model with an instance of a view through the following data template in my App.xaml file.
<DataTemplate DataType="{x:Type vm:ViewModelStartPage}">
<v:ViewStartPage/>
</DataTemplate>
我只向我的工作区集合添加了一个视图模型.我看到选项卡控件中显示了 2 个视图,并且它们没有选项卡.这几乎就像 TabControl 不知道将不同的视图视为 TabItems,它的行为更像是一个堆栈面板,堆叠视图.如果我在代码中创建选项卡项目,它可以像这样正常工作:
I only add one view model to my collection of workspaces. I see 2 views display in the tab control and they aren't tabbed. It's almost like the TabControl doesnt know to treat the different views as TabItems, its behaving more like a stack panel, stacking the views. If I create the tab items in code it works fine like this:
System.Windows.Controls.TabItem i = new System.Windows.Controls.TabItem();
i.Content = new Views.ViewStartPage();
i.Header = "A Tab Item";
this.xTabControl.Items.Add(i);
我一定是遗漏了一些内容模板之类的东西.我稍后会设计我的标签,但现在我很高兴让基本标签工作.此外,每个选项卡的选项卡内容中的视图可能不同,因此我无法使用随处可见的简单文本块 TabControl 模板示例...IE.不是这个...
I must be missing some content template or something. I will be styling my tabs later but for now I would be happy just getting the basic tabs working. Also the views in the tab contents may be different for each tab so I can't use the simple textblock TabControl template examples I see all over the place... I.e. not this...
<TabControl.ContentTemplate>
<DataTemplate>
<TextBlock
Text="{Binding Content}" />
</DataTemplate>
有什么想法吗?
推荐答案
我最终使用了带有 TabControl
数据模板的 ContentControl
(就像原来的教程项目一样).这是我最终得到的 xaml 代码.我没有更改原始示例项目的代码隐藏来完成这项工作.ContentControl
在我的 MainWindow.xaml 中,另外两段代码在 ResourceDictionary
中.
I ended up using a ContentControl
with a TabControl
data template (like the original tutorial project). Here is the xaml code I ended up with. I did not change the code-behind from the original sample project to make this work. The ContentControl
is in my MainWindow.xaml and the other two pieces of code were in a ResourceDictionary
.
<!-- Workspaces Tab Control -->
<ContentControl Grid.Row="1"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Content="{Binding Path=Workspaces}"
ContentTemplate="{StaticResource WorkspacesTemplate}"/>
<!-- Workspaces Template -->
<DataTemplate x:Key="WorkspacesTemplate">
<TabControl Style="{StaticResource ClosableTabControl}"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource WorkspaceTabItemTemplate}"
Margin="1"/>
</DataTemplate>
<!-- Workspace Tab Item Template -->
<DataTemplate x:Key="WorkspaceTabItemTemplate">
<Grid Width="Auto" Height="Auto">
<ContentPresenter ContentSource="Header" Margin="3"
Content="{Binding Path=DisplayName}"
HorizontalAlignment="Center" VerticalAlignment="Center">
<ContentPresenter.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="{StaticResource Foreground}"/>
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
</Grid>
</DataTemplate>
这篇关于将 TabControl ItemsSource 绑定到 ViewModel 的集合的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!