Allow tab control to size as you expand

4 posts, 0 answers
  1. Ron Barone
    Ron Barone avatar
    15 posts
    Member since:
    Aug 2009

    Posted 26 Jul 2010 Link to this post

    Requirements

    RadControls version
    ANY

     

    .NET version
    3.5+

     

    Visual Studio version
    2008, 2010

     

    programming language
    XAML

     

    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    This is a very simple animation example of the tabs... If you have huge tabs that get in the way, animate them down away from the user while they work. It woudl be nice to keep the content area the same size making the tabs pop out w/out resizing the content...  I just ran out of time ;).

    I found it very helpful to actually give a mouse over to expand each tab in order to show content when the user hovers over a tab item.  I do this through code because we are adding the tabs dynamically but the idea is still the same. 

    We find it best to provide an image on the header content, then a short text description of the item they are clicking on when it expands.

    The following XAML can be pasted into a new WPF app.  Just remember to add your Telerik controls!

    <Window.Resources>        
              
            <!-- Animates the tab's overall width using the framework element pnl as a common binding proxy -->
            <Storyboard x:Key="AnimateUp">
                <DoubleAnimation Storyboard.Target="{Binding ElementName=pnl}"
                                 BeginTime="00:00:00.20"
                                 Duration="00:00:00.250000"
                                 Storyboard.TargetProperty="Width"
                                 To="200"
                                 FillBehavior="HoldEnd" />
            </Storyboard>
      
            <!-- Animates the tab's overall width using the framework element pnl as a common binding proxy -->
            <Storyboard x:Key="AnimateDown">
                <DoubleAnimation Storyboard.Target="{Binding ElementName=pnl}"
                                 BeginTime="00:00:00.5"
                                 Duration="00:00:00.250000"
                                 Storyboard.TargetProperty="Width"
                                 To="37"
                                 FillBehavior="HoldEnd" />
            </Storyboard>
      
            <!-- Style to apply to the containers of the tab -->
            <Style x:Key="SPMouseOver" TargetType="{x:Type FrameworkElement}">            
                <Style.Triggers>
      
                    <!-- start animation when the user hovers over the tab's container -->
                    <EventTrigger RoutedEvent="MouseEnter">
                        <EventTrigger.Actions>
                            <BeginStoryboard Storyboard="{StaticResource AnimateUp}" />
                        </EventTrigger.Actions>
                    </EventTrigger>
      
                      
                    <!-- end animation when the user leaves the tab's container -->
                    <EventTrigger RoutedEvent="MouseLeave">
                        <EventTrigger.Actions>
                            <BeginStoryboard Storyboard="{StaticResource AnimateDown}" />
                        </EventTrigger.Actions>
                    </EventTrigger>
      
                </Style.Triggers>
            </Style>
            
        </Window.Resources>
        <Grid>
      
            <!-- this is hidden proxy object to be a common bind to all tabs.  This is used so all tabs expand and not just the tab hovered over -->
            <FrameworkElement Name="pnl" Width="37" Visibility="Collapsed" />
      
            <telerik:RadTabControl HorizontalAlignment="Stretch"
                                   Name="tab"
                                   VerticalAlignment="Stretch"
                                   TabStripPlacement="Left"
                                   TabOrientation="Vertical"
                                   Align="Right">
      
                <telerik:RadTabControl.Items>
      
                    <!-- Each tab item's height must bind to the width property.  Due to the tab alignment the height is actually the width of the tab -->
                    <telerik:RadTabItem Name="tab1" 
                                        Height="{Binding ElementName=pnl, Path=Width}" 
                                        HorizontalContentAlignment="Left">
                          
                        <telerik:RadTabItem.Header>
                            <StackPanel Style="{StaticResource SPMouseOver}" Orientation="Horizontal" HorizontalAlignment="Left" Name="tab1Header">
                                <Image Source="/TabMouseOver;component/Images/24_button_green.png" Width="24" Height="24" />
                                <TextBlock Text="Other descriptive content" Margin="5,0,0,0" VerticalAlignment="Center" />
                            </StackPanel>
                        </telerik:RadTabItem.Header>
                          
                        <!-- For this example the content will be compressed as the tab is expanded. -->                    
                        <telerik:RadTabItem.Content>
                            <ScrollViewer>
                                <TextBlock TextWrapping="Wrap" Background="Beige">
                                    Text Content 1
                                </TextBlock>
                            </ScrollViewer>
                        </telerik:RadTabItem.Content>
                    </telerik:RadTabItem>
      
                    <!-- Second tab for demo purposes -->
                    <telerik:RadTabItem Name="tab2" Height="{Binding ElementName=pnl, Path=Width}" HorizontalContentAlignment="Left">
                        <telerik:RadTabItem.Header>
                            <StackPanel Style="{StaticResource SPMouseOver}" Orientation="Horizontal" HorizontalAlignment="Left" Name="tab2Header">
                                <Image Source="/TabMouseOver;component/Images/24_button_purple.png" Width="24" Height="24" />
                                <TextBlock Text="Other descriptive content" Margin="5,0,0,0" VerticalAlignment="Center" />
                            </StackPanel>
                        </telerik:RadTabItem.Header>
      
                        <telerik:RadTabItem.Content>
                            <ScrollViewer>
                                <TextBlock TextWrapping="Wrap" Background="LightBlue">
                                    Text Content 2
                                </TextBlock>
                            </ScrollViewer>
                        </telerik:RadTabItem.Content>
                    </telerik:RadTabItem>
                </telerik:RadTabControl.Items>
            </telerik:RadTabControl>
  2. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 28 Jul 2010 Link to this post

    Hi Ron,

    This is an interesting idea and I like the xaml-only approach.

    I am attaching the project with code which you sent us.

    All the best,
    Miroslav
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. m2pathan
    m2pathan avatar
    1 posts
    Member since:
    Aug 2014

    Posted 22 Apr 2015 in reply to Ron Barone Link to this post

    Hi Ron,

    This is a new way and idea for tabcontrol.

    i am searching the same thinks in another UI Provider but i can't get

     

    Thanks for this great UI.

  4. Ron Barone
    Ron Barone avatar
    15 posts
    Member since:
    Aug 2009

    Posted 22 Apr 2015 in reply to m2pathan Link to this post

    I hope it works well for you.

    However this is 5 years old so I hope it still works with the latest Telerik libraries!

    Let me know how it turns out.

     

Back to Top