How to change selected tab on Button click in WPF TabControl with Buttons in Header

Question

I have a WPF TabControl that has a couple of buttons in the TabItem header. I want the selected tab to change when a headered button is clicked. Here is a code snippet:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
   <Grid>
      <TabControl>
         <TabItem Content="Item 1 Content">
            <TabItem.Header>
               <StackPanel Orientation="Vertical">
                  <TextBlock FontSize="14" FontWeight="Bold" Text="Item1"/>
                  <StackPanel Orientation="Horizontal">
                     <Button Content="Action 1"/>
                     <Button Content="Action 2"/>
                  </StackPanel>
               </StackPanel>
            </TabItem.Header>
         </TabItem>
         <TabItem Content="Item 2 Content">
            <TabItem.Header>
               <StackPanel Orientation="Vertical">
                  <TextBlock FontSize="14" FontWeight="Bold" Text="Item2"/>
                  <StackPanel Orientation="Horizontal">
                     <Button Content="Action 1"/>
                     <Button Content="Action 2"/>
                  </StackPanel>
               </StackPanel>
            </TabItem.Header>
         </TabItem>
      </TabControl>
   </Grid>
</Page>

This sample show a couple of Tabs. A tab is selected if the header background is clicked, however, if a button is clicked the tab is not selected. I want the button to accept the click but I also want the tab corresponding to the button to get selected. Can anyone help?

Thanks, Hitesh

Answer 1

We can do this by using Event Routing. RoutedEvents, such as Click will bubble up the element tree, until something handles the event. Because of this, you're actually already receiving the Click event on the tab items, we just aren't doing anything with it yet. We could create an event to handle the Button Click on the tab items like this:

<TabItem Content="Item 1 Content" ButtonBase.Click="TabItem_Click">

However, we'd have to set that on each tab, so instead we can create a style for the TabItems in the TabControl like so:

<TabControl>
 <TabControl.ItemContainerStyle>
     <Style TargetType="{x:Type TabItem}">
      <EventSetter Event="ButtonBase.Click"
          Handler="TabItem_Click" />
     </Style>
    </TabControl.ItemContainerStyle>
....
</TabControl>

Now, in our event handler we can select the tab that has been clicked:

private void TabItem_Click(object sender, RoutedEventArgs e)
{
 Trace.WriteLine("TabItemClicked");
 ((TabItem)sender).IsSelected = true;
 e.Handled = true;
}

Answer 2

Hi rmoore,

I have a little different scenario. I hv a listbox which is on 1 tab item of a tabcontrol say "Tab item 1" and on selection change of list box i need to populate the textboxes which is on a different tab of the same tabcontrol say "Tab item 2" so i want to activate that tab along with populating the text boxes. Although i am able to fill the text boxes, i am not able to change the tab to the desired i.e. "Tab item 2". I copied the procedure u just showed above just that i changed the event from "ButtonBase.Click" to "ListBoxItem.Selected". Still i am not able to capture the event.

Can u please help me on this?? Thanks in advance

Dhaval

Answer 3

Hi rmoore,

I was doing a little RnD on the above problem right now and was able to achieve the above in a different way but still it would be great if u could help me in the way u hv executed.

On the selectionchanged event of the listbox I just changed the selecteditem of the tab control to the one i want i.e.

            Tbctrl.SelectedItem = (TabItem)Tbctrl.FindName("item2");

Here Tbctrl is the name of the tabcontrol and item2 is the name of the tabitem in the tabcontrol which contains the textboxes mentioned above.

Regards,

Dhaval