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

MVVM TabControl Binding keeping Theme

By , 19 Dec 2010
Rate this:
Please Sign up or sign in to vote.
The idea is to create a Toolbox with several TabItems and each TabItem with Items and always detect the CurrentItem without any code. Smile | :)
 
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 Smile | :)

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 Expediteapps
Spain Spain
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.
 
Web:
Expediteapps


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

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140415.2 | Last Updated 19 Dec 2010
Article Copyright 2010 by Juan Pablo G.C.
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid