使用绑定时如何在TabControl中保留选项卡

Question

So I have a TabControl . I want to bind the ItemsSource to my ViewModel collection so the tabs get added dynamically. Something like:

<TabControl ItemsSource="{Binding Path=Cities}">
    <TabItem Header="Settings" x:Name="settingsTab" />
</TabControl>

Where Cities is an ObservableCollection of type City . However, I want the first tab to display SettingsView . The items from Cities should display CityView . The tab control is just a navigation panel and I'm basically trying to put settings on the first position, followed by a dynamic number of cities.

What's the most elegant solution to this? I would prefer to not pollute my view model with some random collection that contains the settings model followed by all the cities models.

Answer 1

If you don't want your tab control to be a list of cities, you need to use DataContext instead of ItemsSource. Then you can bind the cities object to a list view in the TabItems Content

example:

public class City
{
   public string Name {get;set;}
   public string SettingOne {get;set;}
   public string SettingTwo {get;set;}
}

<TabControl DataContext="{Binding Path=Cities}">
    <TabItem Header="Settings" x:Name="settingsTab">
        <TabItem.Content>
            <ListView ItemsSource="{Binding}">
                <ListView.ItemTemplate>
                    <TextBox Text="{Binding Path=SettingOne}"></TextBox>
                     ...
                 </ListView.ItemTemplate>
            </StackPanel>
        </TabItem.Content>
    </TabItem>
</TabControl>