Invisible tab items

[Michael]

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>

[Petar Mladenov]

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

[Kevin]

Do you have a simple but complete sample of using RadTabControl in MVVM pattern? My application has a dialog box with the tab control in it, but I have no idea how to finish the MVVM approach shown in the previous reply.

Thanks

[Pavel R. Pavlov]

Hi Kevin,

I attached a project, demonstrating how to use the RadTabControl in MVVM scenario. Please take a look at it and let me know if it works for you. For simplicity, I assumed that the content of the Tabs is just a string.

All the best,
Pavel R. Pavlov
the Telerik team