TabControl Example

tabControlExample.jpg

WPF Composites supports the TabControl and TabItems. Here I show a basic example of a Tab Control with Two Tab Items, and the user is allowed to "close" (aka remove) each Tab Item, if desired. Even though I don't show the example here, you could likely re-add a TabItem simply by adding another, new Composite back into the TabControl. In the Demo App, I do show a more sophisticated example of using a GlobalStoreService with Actions that may be called from anywhere for both adding/removing TabItems.

There is one unfortunate hardcoded reference that exists in WPF Composites, in the TabControlParent's Remove method. It refers to:
Application.Current.Properties["TabToBeRemoved"]. 

This is a place to store the name of the TabItem to be removed. It's just the choice I made. Feel free to re-architect if you choose in the open-source code; otherwise, just follow my example usage of this reference below.

The TabControl example I show below ties to the picture above. If you don't want the option to "Close" tab items, then simply leave the lambda for closing empty, and set the color of the "X" to the color identical to the tab item header's background.

As you may see below, there is an extension method called AddCustomTabItem to help with adding the TabItem to the TabControl in the BeginComposite . . . EndComposite method.

//Create Tab Item #1
string tabCtlGuid1 = Guid.NewGuid().ToString();
TabItem tabItm1 = new TabItem() { Name = "TabItem1" };
tabItm1.Initialize(100D, 100D, ContainerType.Grid);
tabItm1.SetCompositeGridDimensions<TabItem>(100D, 100D, 1, 1, double.NaN, GridUnitType.Pixel, double.NaN, GridUnitType.Pixel);
tabItm1.BeginSettings<TabItem>().SetItemBorderSettings<TabItem>(double.NaN, double.NaN, Brushes.Black, new Thickness(1)).EndSettings<TabItem>();

Label one = new Label();
one.Content = "One";
tabItm1.BeginComposite().AddExisting<Label, TabItem>(0, 0, one)
.EndComposite<TabItem, TabItemArgs>(null);

//Create Tab Item #2
string tabCtlGuid2 = Guid.NewGuid().ToString();
TabItem tabItm2 = new TabItem() { Name = "TabItem2" };
tabItm2.Initialize(100D, 100D, ContainerType.Grid);
tabItm2.SetCompositeGridDimensions<TabItem>(100D, 100D, 1, 1, double.NaN, GridUnitType.Pixel, double.NaN, GridUnitType.Pixel);
tabItm2.BeginSettings<TabItem>().SetItemBorderSettings<TabItem>(double.NaN, double.NaN, Brushes.Black, new Thickness(1)).EndSettings<TabItem>();

Label two = new Label();
two.Content = "Two";
tabItm2.BeginComposite().AddExisting<Label, TabItem>(0, 0, two)
.EndComposite<TabItem, TabItemArgs>(null);

//Add Tab Items to Tab Control           
TabControl tabCtl = new TabControl();
tabCtl.Background = Brushes.White;

tabCtl.Initialize(200D, 200D, ContainerType.HorizontalPanel);

tabCtl.BeginComposite<TabControl>(tabCtlGuid1)
        .AddCustomTabItem<TabControl>(0, 0, FasterWPF.Factory.NewTabHeader(tabCtl, Brushes.Black, Brushes.LightGray, Brushes.Black, Brushes.LightGreen, "One", true, (o, e) =>
        {
                    //This is the Close Tab Action - action that fires upon clicking the X on the Tab
                    Application.Current.Properties["TabToBeRemoved"] = "Custom" + tabItm1.Name;
                    tabCtl.RemoveByKey(tabCtlGuid1);
                    Application.Current.Properties["TabToBeRemoved"] = null;

          }), tabItm1)
         .EndComposite<TabControl, TabControlArgs>(null);

tabCtl.BeginComposite<TabControl>(tabCtlGuid2)
         .AddCustomTabItem<TabControl>(0, 0, FasterWPF.Factory.NewTabHeader(tabCtl, Brushes.Black, Brushes.LightGray, Brushes.Black, Brushes.LightGreen, "Two", true, (o, e) =>
         {
                   //This is the Close Tab Action - action that fires upon clicking the X on the Tab

                   Application.Current.Properties["TabToBeRemoved"] = "Custom" + tabItm2.Name;
                   tabCtl.RemoveByKey(tabCtlGuid2);
                   Application.Current.Properties["TabToBeRemoved"] = null;
          }), tabItm2)
          .EndComposite<TabControl, TabControlArgs>(null);

Border lblComposite = mainGrid.BeginComposite()
.AddExisting<TabControl, Grid>(0, 0, tabCtl)
.EndComposite(new GridArgs(1, 1));

If you need to programmatically Select a TabItem, set the TabControl's SelectedIndex property. It is a zero-based index, so set to 1 to select the second tab:
//Select Second Tab
tabCtl.SelectedIndex = 1;

Last edited Jun 2, 2014 at 4:47 AM by stagathome0069, version 12

Comments

No comments yet.