Click here to Skip to main content
Click here to Skip to main content

MVVM TabControl Binding keeping Theme

By , 19 Dec 2010
 
The idea is to create a Toolbox with several TabItems and each TabItem with Items and always detect the CurrentItem without any code. :)
 
I have seen several examples, but always override the theme (they change the style). So here is my solution:
 
First, create a class like:
 
public class TabModel
    {
        public string Title { get; set; }
        public string Caption { get; set; }
        public List<Item> Content { get; set; }
    }
 
Then let's create the data:
 
private List<Item> _backgroundlistitems;
        public List<Item> BackgroundListItems
        {
            get { return _backgroundlistitems; }
            set
            {
                _backgroundlistitems = value;
                NotifyPropertyChanged("BackgroundListItems");
            }
        }
        private List<Item> _zonelistitems;
        public List<Item> ZoneListItems
        {
            get { return _zonelistitems; }
            set
            {
                _zonelistitems = value;
                NotifyPropertyChanged("ZoneListItems");
            }
        }
        private List<TabModel> _toolboxlist;
        public List<TabModel> ToolboxList
        {
            get { return _toolboxlist; }
            set
            {
                _toolboxlist = value;
                NotifyPropertyChanged("ToolboxList");
            }
        }
 
Now fill it:
 
public void CreateItemsData()
        {
            BackgroundListItems = new List<Item>();
            BackgroundListItems.Add(new Item() { Name = "BG Item 0" });
            BackgroundListItems.Add(new Item() { Name = "BG Item 1" });
            ZoneListItems = new List<Item>();
            ZoneListItems.Add(new Item() { Name = "ZN Item 0" });
            ZoneListItems.Add(new Item() { Name = "ZN Item 1" });
            ToolboxList = new List<TabModel>();
            ToolboxList.Add(new TabModel() { Title = "BGs", Caption = "Backgrounds", Content = BackgroundListItems });
            ToolboxList.Add(new TabModel() { Title = "ZNs", Caption = "Zones", Content = ZoneListItems });
        }
 
And now the most interesting part:
 
<TabControl Name="tabControl1" Background="#FF333333" IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding ToolboxList, Mode=TwoWay}" >
                <TabControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Caption}"/>
                    </DataTemplate>
                </TabControl.ItemTemplate>
                <TabControl.ContentTemplate>
                    <DataTemplate>
                        <ListBox Style="{x:Null}"  ItemsSource="{Binding Content}" IsSynchronizedWithCurrentItem="True"  Background="#FF434343">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                    <TextBlock Text="{Binding Name}"/>
                                </DataTemplate>
                        </ListBox.ItemTemplate>
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel />
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                    </ListBox>
                    </DataTemplate>
                </TabControl.ContentTemplate>
            </TabControl>
Simply change the
<TextBlock Text="{Binding Name}"/>
 
with your item template and you will always have it detected for instance:
 
<TextBox  Text="{Binding ToolboxList.CurrentItem.Content.CurrentItem.Name, Mode=OneWay}" />
 
This opens my mind with several things like:
 
1.- The DataContext in my grid creates a view that contains CurrentItem, so I have not (in this case) to create an ObservableColleciton or the
myCollectionView = (CollectionView)
    CollectionViewSource.GetDefaultView(ToolboxList);
 
2.- If you think for 5 more minutes, there is probably a solution without code but it is getting more like a spells book than coding :)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Juan Pablo G.C.
Software Developer
Spain Spain
Member
I'm Electronic Engineer, I did my end degree project at Astrophysical Institute and Tech Institute. I'm HP Procurve AIS and ASE ,Microsoft 3.5 MCTS
I live in Canary Islands ,developing customized solutions
 
I'm developing with WPF4, SL4 MVVM, MVC3 Razor and WP7 projects, more info at my websites. Improving with Android and IOS.
 
Websites:
MemCards
Mareinsula


Take a look to my blog Juan Pablo G.C.
Mareinsula

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
Hint: For improved responsiveness ensure Javascript is enabled and choose 'Normal' from the Layout dropdown and hit 'Update'.
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Mobile
Web01 | 2.6.130516.1 | Last Updated 19 Dec 2010
Article Copyright 2010 by Juan Pablo G.C.
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid