Click here to Skip to main content
15,887,585 members
Articles / MVVM
Tip/Trick

MVVM TabControl Binding keeping Theme

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
19 Dec 2010CPOL 9.7K   4  
TabControl.CurrentItem.Content.CurrentItem
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:

C#
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:

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

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

XML
<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
XML
<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
MIDL
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)


Written By
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:
Expediteapps


Take a look to my blog
Blog

Comments and Discussions

 
-- There are no messages in this forum --