tab control data template
I want a TabControl where each tab item represents a (Employee)ViewModel; the header should be the DisplayName property of that view model, and the content should be a user control (EmployeeDetailsView) that has a data context of the view model.
So pidgeon xaml (is there such a thing??):
<TabControl x:Name="Items">
<TabItem Header="DisplayName" Content=local:EmployeeDetailsView />
<TabControl>
What should my re开发者_高级运维al XAML look like?
Cheers,
BerrylEDIT for Vortex
<TabControl x:Name="Items" >
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding DisplayName}" />
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<ContentControl>
<local:EmployeeDetailView/>
</ContentControl>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
In WPF it is quite simple. But in silverlight I used custom TabControl.
Silverlight
You can find source and example here (MyTabControl.cs), where I've answered a similar question.
And now your code must be something like:
<my:MyTabControl x:Name="myTabs" MyItemsSource="{Binding Items}" MySelectedItem="{Binding SelectedItem}" >
<my:MyTabControl.TabHeaderItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding DisplayName}" />
</DataTemplate>
</my:MyTabControl.TabHeaderItemTemplate>
<my:MyTabControl.TabItemTemplate>
<DataTemplate>
<local:EmployeeDetailsView />
</DataTemplate>
</my:MyTabControl.TabItemTemplate>
</my:MyTabControl>
In code-behind or somewhere:
var items = new List<Employee>(){
new Employee{DisplayName = "Employee 1"},
new Employee{DisplayName = "Employee 2"}};
myTabs.DataContext = new SomeCollectionModel
{
Items = items,
SelectedItem = items[0]
};
WPF
WPF has built-in support of DataTemplates in the TabControl, so I have to do a few minor changes in XAML:
<TabControl x:Name="myTabs" ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem}">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding DisplayName}" />
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<local:EmployeeDetailsView />
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
精彩评论