Silverlight tab control
Last post 05-14-2008 6:15 AM by Binish. 7 replies.
Sort Posts:
03-14-2008 12:47 PM
Silverlight tab control

What's the best way to emulate a tab control in SL2? 

phillipi

Loading...
Joined on 01-31-2008
New Jersey
Posts 7
03-14-2008 2:26 PM
Re: Silverlight tab control

I would probably use an Horizontal StackPanel that contains radio buttons to manage the tab :

 </Grid.Resources>
         <Grid.RowDefinitions>
         <RowDefinition Height="30" />
         <RowDefinition Height="*" />
      </Grid.RowDefinitions>
         <StackPanel Orientation="Horizontal">
         <RadioButton VerticalAlignment="Top"
                       Height="30"
                       Width="100"
                       Content="Tab1"
                       Style="{StaticResource tabishRadioButton}"
                       Checked="RadioButton_Checked"/>
         <RadioButton VerticalAlignment="Top"
                       Height="30"
                       Width="100"
                       Content="Tab2"
                      Margin="2,0,0,0"
                      Style="{StaticResource tabishRadioButton}"
                      Checked="RadioButton_Checked_2"/>
      </StackPanel>

I would then add a border to draw the "tabcontrol" border and add grids for each tabs I want to use. I would then simply change their visibility property to collapsed or visible based on the radio button values : 

  <Grid x:Name="LayoutRoot" Background="White">
      <Grid.Resources>
         <Style TargetType="RadioButton"
                x:Key="tabishRadioButton">
            <Setter Property="Template">
               <Setter.Value>
                  <ControlTemplate TargetType="RadioButton">
                     <Grid x:Name="RootElement">
                       
                        <Border x:Name="tabBorder"
                                BorderBrush="Black"
                                BorderThickness="1"
                                Background="White"
                                CornerRadius="4,4,0,0">
                           <ContentPresenter Content="{TemplateBinding Content}"
                                             VerticalAlignment="Center"
                                             HorizontalAlignment="Center" />
                        </Border>
                     </Grid>
                  </ControlTemplate>
               </Setter.Value>
            </Setter>

         </Style>
      </Grid.Resources>
         <Grid.RowDefinitions>
         <RowDefinition Height="30" />
         <RowDefinition Height="*" />
      </Grid.RowDefinitions>
         <StackPanel Orientation="Horizontal">
         <RadioButton VerticalAlignment="Top"
                       Height="30"
                       Width="100"
                       Content="Tab1"
                       Style="{StaticResource tabishRadioButton}"
                       Checked="RadioButton_Checked"/>
         <RadioButton VerticalAlignment="Top"
                       Height="30"
                       Width="100"
                       Content="Tab2"
                      Margin="2,0,0,0"
                      Style="{StaticResource tabishRadioButton}"
                      Checked="RadioButton_Checked_2"/>
      </StackPanel>
      <Border BorderBrush="Black"
              Grid.Row="1"
              BorderThickness="1,1,1,1">
         <Grid>
            <Grid x:Name="tab1Content"
                  Visibility="Collapsed">
               <Border Background="Red"/>
            </Grid>
            <Grid x:Name="tab2Content"
                  Visibility="Collapsed">
               <Border Background="Blue"/>
            </Grid>
            </Grid>
      </Border>

   </Grid>

 A lot of the work would consist of making this visually appealing :) but this would be how I would start to do a tabControl ... without the control :) Good luck !

 

Mathieu Drimonakos
Technical Designer
www.xceed.com

MattDrimo Xceed

Loading...
Joined on 03-10-2008
Posts 28
03-14-2008 2:46 PM
Re: Re: Silverlight tab control

Awesome! Thanks!! I sure hope Microsoft adds a 'tab' like control to the next version of SL. 

phillipi

Loading...
Joined on 01-31-2008
New Jersey
Posts 7
03-14-2008 2:56 PM
Marked as Answer
Re: Re: Silverlight tab control

No problem, like I mentioned the biggest part will be on how you design it visually. The basics cool be something like this :

 <Style TargetType="RadioButton"
                x:Key="tabishRadioButton">
            <Setter Property="Template">
               <Setter.Value>
                  <ControlTemplate TargetType="RadioButton">
                     <Grid x:Name="RootElement">
                       
                        <Border x:Name="tabBorder"
                                BorderBrush="Black"
                                BorderThickness="1"
                                Background="White"
                                CornerRadius="4,4,0,0">
                           <ContentPresenter Content="{TemplateBinding Content}"
                                             VerticalAlignment="Center"
                                             HorizontalAlignment="Center" />
                        </Border>
                     </Grid>
                  </ControlTemplate>
               </Setter.Value>
            </Setter>
         </Style>

Oh and don't forget to mark my post as Answered if it helped :).

Mathieu Drimonakos
Technical Designer
www.xceed.com

MattDrimo Xceed

Loading...
Joined on 03-10-2008
Posts 28
04-29-2008 11:53 AM
Re: Silverlight tab control

Thak you!  I test it.

Cheers,

mikkolaa

Loading...
Joined on 03-18-2008
Posts 9
05-08-2008 8:37 AM
Re: Re: Silverlight tab control

Hi,

Is it possible to change the background, border colour or highlight the tab in some way when one of the tabs is selected.

philsal

Loading...
Joined on 04-08-2008
Posts 44
05-13-2008 8:00 AM
Re: Silverlight tab control

I have tried this code . Its compiling fine but on runtime its throwing exception:

A first chance exception of type 'System.Windows.Markup.XamlParseException' occurred in System.Windows.dll

Additional information: AG_E_PARSER_BAD_PROPERTY_VALUE [Line: 40 Position: 54]

and is showing a blank page on continuing with run.

What is the possible cause Can u help in resolving this?

Binish

Loading...
Joined on 05-13-2008
Posts 8
05-14-2008 6:15 AM
Re: Re: Silverlight tab control
Binish

Loading...
Joined on 05-13-2008
Posts 8
Page view counter