how to use multiple tab controls, and to be able to call a selected tab control with buttons.

Question

Please I am trying to assign each button on the left its own Tab control. That is for example, when the Intake form button is pushed, it will have its own set of tabs (its own tabcontrols)

am i supposed to place multiple tab controls on the artboard, or is there a way to programatically change the names of the tabs, and there contents, when a button is pushed on the left ?

thank you in advance.

and here is a link hxxp://img709.imageshack.us/img709/554/tabcontrol.gif

here is the code so far

    <Window
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 x:Class="service.MainWindow"
 x:Name="Window"
 Title="MainWindow"
 Width="687" Height="480" mc:Ignorable="d">
 <Window.Resources>
  <Storyboard x:Key="OnLoaded1"/>
 </Window.Resources>
 <Window.Triggers>
  <EventTrigger RoutedEvent="FrameworkElement.Loaded">
   <BeginStoryboard Storyboard="{StaticResource OnLoaded1}"/>
  </EventTrigger>
 </Window.Triggers>

 <Grid x:Name="LayoutRoot" Margin="0,0,-16,1">
  <Grid.ColumnDefinitions>
   <ColumnDefinition Width="0*"/>
   <ColumnDefinition/>
  </Grid.ColumnDefinitions>
  <DockPanel Margin="8,8,0,7" LastChildFill="False" Grid.Column="1" HorizontalAlignment="Left" Width="660">
   <Menu VerticalAlignment="Top" Width="657" Height="32">
    <MenuItem x:Name="file" Header="File"/>
    <MenuItem x:Name="edit" Header="Edit">
     <MenuItem Width="100" Height="100" Header="MenuItem"/>
    </MenuItem>
    <MenuItem x:Name="view" Header="View"/>
    <MenuItem x:Name="preferences" Header="Preferences"/>
    <MenuItem x:Name="help" Header="Help"/>
   </Menu>
  </DockPanel>
  <TabControl x:Name="tabwin" Margin="137.224,46,19,7" Grid.Column="1">
   <TabItem x:Name="intakeformsub" Header="Elegibility Form">
    <Grid HorizontalAlignment="Left" Width="490"/>
   </TabItem>
   <TabItem Header="TabItem">
    <Grid/>
   </TabItem>
   <TabItem Header="TabItem">
    <Grid/>
   </TabItem>
   <TabItem Header="TabItem">
    <Grid>
     <Grid.ColumnDefinitions>
      <ColumnDefinition Width="0.567*"/>
      <ColumnDefinition Width="0.433*"/>
     </Grid.ColumnDefinitions>
    </Grid>
   </TabItem>
   <TabItem Header="TabItem">
    <Grid/>
   </TabItem>
   <TabItem Header="TabItem">
    <Grid>
     <Grid.ColumnDefinitions>
      <ColumnDefinition Width="0.735*"/>
      <ColumnDefinition Width="0.265*"/>
     </Grid.ColumnDefinitions>
    </Grid>
   </TabItem>
   <TabItem Header="TabItem">
    <Grid/>
   </TabItem>
   <TabItem Header="TabItem">
    <Grid/>
   </TabItem>
  </TabControl>
  <Grid x:Name="___buttontab" Margin="11.205,61,0,0" Grid.Column="1" HorizontalAlignment="Left" Width="122.019" VerticalAlignment="Top" Height="276">
   <Button VerticalAlignment="Top" Height="36" Content="Button"/>
   <Button Margin="0,40,0,0" Content="Oasis Assessments" VerticalAlignment="Top" Height="36"/>
   <Button Margin="0,80,0,0" VerticalAlignment="Top" Height="36" Content="Plan of Care"/>
   <Button Margin="0,120,0,0" VerticalAlignment="Top" Height="36" Content="Medication Profile" RenderTransformOrigin="0.421,5.556"/>
   <Button Margin="0,0,0,80" VerticalAlignment="Bottom" Height="36" Content="Clinical Notes"/>
   <Button Margin="0,0,0,40" VerticalAlignment="Bottom" Height="36" Content="Infection Control"/>
   <Button x:Name="intakeformbtn" VerticalAlignment="Top" Height="36" Content="Intake Form" Click="intakeform">
    <Button.BindingGroup>
     <BindingGroup/>
    </Button.BindingGroup>
   </Button>
   <Button VerticalAlignment="Bottom" Height="36" Content="Discharge Summary"/>
  </Grid>
  <ProgressBar HorizontalAlignment="Left" Margin="8,0,0,7" VerticalAlignment="Bottom" Width="104.795" Height="19" Grid.Column="1"/>
 </Grid>
</Window>

Answer 1

A way to solve this problem is to use another TabControl instead of buttons, but where the tab headers are retemplated to be buttons insteads of tabs visually. This way you don't even have to handle the button changes.

Try the following code:

<Window
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 x:Class="WpfApplication16.MainWindow"
 x:Name="Window"
 Title="MainWindow"
 Width="687" Height="480" mc:Ignorable="d">
    <Window.Resources>
        <Storyboard x:Key="OnLoaded1"/>

        <Style TargetType="{x:Type TabItem}" x:Key="TabButtonStyle">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <ToggleButton IsChecked="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=IsSelected, Mode=TwoWay}"
                                                    Margin="10">
                            <ContentPresenter ContentSource="Header" />
                        </ToggleButton>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource OnLoaded1}"/>
        </EventTrigger>
    </Window.Triggers>

    <Grid x:Name="LayoutRoot" Margin="0,0,-16,1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0*"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <DockPanel Margin="8,8,0,7" LastChildFill="False" Grid.Column="1" HorizontalAlignment="Left" Width="660">
            <Menu VerticalAlignment="Top" Width="657" Height="32">
                <MenuItem x:Name="file" Header="File"/>
                <MenuItem x:Name="edit" Header="Edit">
                    <MenuItem Width="100" Height="100" Header="MenuItem"/>
                </MenuItem>
                <MenuItem x:Name="view" Header="View"/>
                <MenuItem x:Name="preferences" Header="Preferences"/>
                <MenuItem x:Name="help" Header="Help"/>
            </Menu>
        </DockPanel>
        <TabControl Margin="0,61,0,0" Grid.Column="1" ItemContainerStyle="{StaticResource TabButtonStyle}" TabStripPlacement="Left">
            <TabControl.Items>
                <TabItem Header="Button">
                    <Grid>
                        <TabControl x:Name="tabwin">
                            <TabItem x:Name="intakeformsub" Header="Elegibility Form">
                                <Grid HorizontalAlignment="Left" Width="490"/>
                            </TabItem>
                            <TabItem Header="TabItem">
                                <Grid/>
                            </TabItem>
                            <TabItem Header="TabItem">
                                <Grid/>
                            </TabItem>
                            <TabItem Header="TabItem">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="0.567*"/>
                                        <ColumnDefinition Width="0.433*"/>
                                    </Grid.ColumnDefinitions>
                                </Grid>
                            </TabItem>
                            <TabItem Header="TabItem">
                                <Grid/>
                            </TabItem>
                            <TabItem Header="TabItem">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="0.735*"/>
                                        <ColumnDefinition Width="0.265*"/>
                                    </Grid.ColumnDefinitions>
                                </Grid>
                            </TabItem>
                            <TabItem Header="TabItem">
                                <Grid/>
                            </TabItem>
                            <TabItem Header="TabItem">
                                <Grid/>
                            </TabItem>
                        </TabControl>
                        <ProgressBar HorizontalAlignment="Left" Margin="8,0,0,7" VerticalAlignment="Bottom" Width="104.795" Height="19" Grid.Column="1"/>
                    </Grid>
                </TabItem>
                <TabItem Header="Oasis Assessments">
                    Foo
                </TabItem>
                <TabItem Header="Plan of Care">
                    Bar
                </TabItem>
                <TabItem Header="Medication Profile">
                </TabItem>
                <TabItem Header="Clinical Notes">
                </TabItem>
                <TabItem Header="Infection Control">
                </TabItem>
                <TabItem Header="Intake Form">
                </TabItem>
            </TabControl.Items>
        </TabControl>
    </Grid>
</Window>