65.9K
CodeProject is changing. Read more.
Home

MVVM TabControl Binding keeping Theme

emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0 vote)

Dec 9, 2010

CPOL
viewsIcon

9823

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