Click here to Skip to main content
12,300,021 members (53,980 online)
Click here to Skip to main content
Add your own
alternative version

Stats

5.8K views
4 bookmarked
Posted

MVVM TabControl Binding keeping Theme

, 19 Dec 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
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. 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)

Share

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


Take a look to my blog
Blog

Comments and Discussions

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