Click here to Skip to main content
12,953,541 members (52,737 online)
Click here to Skip to main content
Add your own
alternative version


4 bookmarked
Posted 8 Dec 2010

MVVM TabControl Binding keeping Theme

, 19 Dec 2010 CPOL
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. :)

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; }
                _backgroundlistitems = value;
        private List<Item> _zonelistitems;
        public List<Item> ZoneListItems
            get { return _zonelistitems; }
                _zonelistitems = value;
        private List<TabModel> _toolboxlist;
        public List<TabModel> ToolboxList
            get { return _toolboxlist; }
                _toolboxlist = value;

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}" >
                        <TextBlock Text="{Binding Caption}"/>
                        <ListBox Style="{x:Null}"  ItemsSource="{Binding Content}" IsSynchronizedWithCurrentItem="True"  Background="#FF434343">
                                    <TextBlock Text="{Binding Name}"/>
                                <WrapPanel />

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)

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 :)


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

Deeply involved in Xamarin Forms LOB (including Azure Cloud with offline support, custom controls, dependencies) projects, WP8.1 & W10 projects, WPF modern styled projects. Portable libraries like portablePDF, portableOneDrive, portableReports and portablePrinting (using Google Printing API).

Web and apps showcase at:

Take a look to my blog

You may also be interested in...

Comments and Discussions

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