Home / Community & Support / Developer Productivity Tools Forums / WPF > TabControl > Invisible tab items

• Michael

  Posted on Sep 14, 2011 (permalink)

  Hi,
  
  In my WPF MVVM application I have a view with RadTabControl with 4 different TabItems.
  I use the tabs to display 4 different categories of items
  
  Visibility Property of each TabItem is bound to a property in my ViewModel.
  
  Now if let say Tab1 and Tab4 are visible and Tab2 and Tab3 hidden I got gaps like this:
  
  [ Tab 1 ] __________________ [ Tab 4] .
  
  How to make  all tab headers to move to the left like this:
  
  [ Tab 1 ] [ Tab 4] __________________  .
  
  
  (see pseudo-code below)
  

  <telerik:RadTabControl>

      <telerik:RadTabItem Visibility="{Binding Converter={StaticResource boolToVisibilityConverter}, Path=IsTab1Visible}">

          <telerik:RadTabItem.Header>

              <TextBlock>

                  <TextBlock.Text>

                      <Binding Path="Tab1"/>

                  </TextBlock.Text>

              </TextBlock>

          </telerik:RadTabItem.Header>

      </telerik:RadTabItem>

   

      <telerik:RadTabItem Visibility="{Binding Converter={StaticResource boolToVisibilityConverter}, Path=IsTab2Visible}">

          <telerik:RadTabItem.Header>

              <TextBlock>

                  <TextBlock.Text>

                      <Binding Path="Tab2"/>

                  </TextBlock.Text>

              </TextBlock>

          </telerik:RadTabItem.Header>

      </telerik:RadTabItem>

       

      <telerik:RadTabItem Visibility="{Binding Converter={StaticResource boolToVisibilityConverter}, Path=IsTab3Visible}">

          <telerik:RadTabItem.Header>

              <TextBlock>

                  <TextBlock.Text>

                      <Binding Path="Tab3"/>

                  </TextBlock.Text>

              </TextBlock>

          </telerik:RadTabItem.Header>

      </telerik:RadTabItem>

   

      <telerik:RadTabItem Visibility="{Binding Converter={StaticResource boolToVisibilityConverter}, Path=IsTab4Visible}">

          <telerik:RadTabItem.Header>

              <TextBlock>

                  <TextBlock.Text>

                      <Binding Path="Tab4"/>

                  </TextBlock.Text>

              </TextBlock>

          </telerik:RadTabItem.Header>

      </telerik:RadTabItem>

  </telerik:RadTabControl>

  Reply

• Petar Mladenov Petar Mladenov

  Posted on Sep 20, 2011 (permalink)

  Hello Michael,

   The behavior you have come up with is expected for a Hidden Visibility. You have to use the Collapsed Visibility in order to have no gaps (no space for Hidden TabItems). You can try this:

  <telerik:RadTabControl>

            <telerik:RadTabItem Visibility="Visible">

                <telerik:RadTabItem.Header>

                    <TextBlock>

                <TextBlock.Text>

                    AAAAA

                </TextBlock.Text>

                    </TextBlock>

                </telerik:RadTabItem.Header>

            </telerik:RadTabItem>

   

            <telerik:RadTabItem Visibility="Hidden">

                <telerik:RadTabItem.Header>

                    <TextBlock>

                <TextBlock.Text>

                BBBBB

                </TextBlock.Text>

                    </TextBlock>

                </telerik:RadTabItem.Header>

            </telerik:RadTabItem>

   

            <telerik:RadTabItem Visibility="Hidden">

                <telerik:RadTabItem.Header>

                    <TextBlock>

                <TextBlock.Text>

                   CCCCC

                </TextBlock.Text>

                    </TextBlock>

                </telerik:RadTabItem.Header>

            </telerik:RadTabItem>

   

            <telerik:RadTabItem Visibility="Visible">

                <telerik:RadTabItem.Header>

                    <TextBlock>

                <TextBlock.Text>

                   DDDDD

                </TextBlock.Text>

                    </TextBlock>

                </telerik:RadTabItem.Header>

            </telerik:RadTabItem>

        </telerik:RadTabControl>

  On a side note , I wanted to say that this is not an MVVM code . A typical MVVM approach uses templates in such situation, for example like so:
  

  <Grid.Resources>

        <Style TargetType="telerik:RadTabItem">

            <Setter Property="Visibility" Value="{Binding Converter={StaticResource boolToVisibilityConverter}, Path=IsTabVisible}" />

        </Style>

        <DataTemplate x:Key="tabTemplate">

            <TextBlock Text="{Binding Header}" />

        </DataTemplate>

    </Grid.Resources>

   

    <telerik:RadTabControl ItemsSource="{Binding DataItems}" ItemTemplate="{StaticResource tebTemplate}" />

  Please let us know if you need further assistance.
  
  Best wishes,
  Petar Mladenov
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / WPF > TabControl > Invisible tab items