Invisible tab items

4 posts, 0 answers
  1. Michael
    Michael avatar
    23 posts
    Member since:
    Jun 2012

    Posted 14 Sep 2011 Link to this post

    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>
  2.
  3. Petar Mladenov
    Admin
    Petar Mladenov avatar
    3154 posts

    Posted 20 Sep 2011 Link to this post

    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 >>

  5. Kevin
    Kevin avatar
    10 posts
    Member since:
    Jul 2012

    Posted 19 Jan 2013 Link to this post

    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
  7. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1251 posts

    Posted 21 Jan 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  8.
Back to Top