Hello all! I have following snippet to handle tab alike control. I would like to get reference to selected tab (radiobutton) and change it's color in C# codebehid code. How can I get it? Ordinary Tab1.Background doesn't work.

Cheers,

<UserControl x:Class="SilverlightTabPage.Page"xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300">
      <Grid x:Name="LayoutRoot" Background="Aqua" Visibility="Visible">
            <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" Visibility="Visible"/>
                                                </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}"Visibility="Visible"Checked="RadioButton_Checked"/>
                  <RadioButton VerticalAlignment="Top"Height="30"Width="100"Content="Tab2"Margin="2,0,0,0"Visibility="Visible" Style="{StaticResource tabishRadioButton}"Checked="RadioButton_Checked_2"/>
            </StackPanel>

......

......

      </Grid>
</UserControl> 

I see two problems with the XAML.

1) You need to give an x:Name="Tab1" to the radio button

2) You need to template bind the background of the Border in the control template to the Background property of the radio button like this

<Border Background={TemplateBinding Background}..../>

At the moment the Background is hard coded as white.

Hope this helps,
Jim
Blog: http://jimmangaly.blogspot.com/

Please MARK the replies as answer if they answer your question

http://www.identitymine.com/

Hello, I tried to use Background property with following code but couldn't get it work. Where the bug might be?

Cheers,

       
    <Grid x:Name="mainLayout" Background="White" SizeChanged="mainLayout_SizeChanged" >
        <Grid.Resources>
            <Style TargetType="RadioButton" x:Key="tabishRadioButton">
                <Setter Property="Background" Value="LightGray"/>
                    <Setter Property="Template">
                     <Setter.Value>
                        <ControlTemplate TargetType="RadioButton">
                            <Grid x:Name="RootElement">
                                <Border x:Name="tabBorder"
                                    BorderBrush="Black"
                                    BorderThickness="1"
                                    CornerRadius="4,4,0,0"
                                    Background="{TemplateBinding Background}">    
                                    <ContentPresenter Content="{TemplateBinding Content}"
                                                 VerticalAlignment="Center"                                                
                                                 HorizontalAlignment="Center" Visibility="Visible"/>
                                </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"
                       x:Name="Tab" 
                       Content="tab1Content"
                       Style="{StaticResource tabishRadioButton}"
                       Visibility="Visible"
                       Checked="Tab_Checked"/>

            <RadioButton VerticalAlignment="Top"
                       Height="30"
                       Width="100"
                       Content="tab2Content"
                       x:Name="Tab2"                          
                       Margin="2,0,0,0"
                       Visibility="Visible"                        
                       Style="{StaticResource tabishRadioButton}"
                       Checked="Tab2_Checked"/>

            <RadioButton VerticalAlignment="Top"
                       Height="30"
                       Width="100"
                       Content="tab3Content"
                       x:Name="Tab3"                          
                       Margin="2,0,0,0"
                       Visibility="Visible"                        
                       Style="{StaticResource tabishRadioButton}"
                       Checked="Tab3_Checked"/>
                                  
        </StackPanel>

       // Codebehind .cs

        private void Tab_Checked(object sender, RoutedEventArgs e)
        {
            tab2Content.Visibility = Visibility.Visible;
            SetTabColor(Tab, Colors.LightGray);
        } 
 

        public void SetTabColor(RadioButton btn, Color Col)
        {
            btn.SetValue(RadioButton.BackgroundProperty, new SolidColorBrush(Col));
        }

Hi Mikkolaa,

There were a few things wrong with the code you posted. Check the code below. It works like a tab control:

Page.xaml

<Grid x:Name="mainLayout" Background="White" >

<Grid.Resources>

<Style TargetType="RadioButton" x:Key="tabishRadioButton">

<Setter Property="Background" Value="Gray"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="RadioButton">

<Grid x:Name="RootElement">

<Border x:Name="tabBorder"

BorderBrush="Black"

BorderThickness="1"

CornerRadius="4,4,0,0"

Background="{TemplateBinding Background}">

<ContentPresenter Content="{TemplateBinding Content}"

VerticalAlignment="Center"

HorizontalAlignment="Center" Visibility="Visible"/>

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

x:Name="Tab1"

Content="tab1Content"

Style="{StaticResource tabishRadioButton}"

GroupName="grp1"

Checked="Tab_Checked" Unchecked="Tab1_Unchecked"/>

<RadioButton VerticalAlignment="Top"

Height="30"

Width="100"

Content="tab2Content"

x:Name="Tab2"

Margin="2,0,0,0"

GroupName="grp1"

Style="{StaticResource tabishRadioButton}"

Checked="Tab_Checked" Unchecked="Tab1_Unchecked"/>

<RadioButton VerticalAlignment="Top"

Height="30"

Width="100"

Content="tab3Content"

x:Name="Tab3"

Margin="2,0,0,0"

GroupName="grp1"

Style="{StaticResource tabishRadioButton}"

Checked="Tab_Checked" Unchecked="Tab1_Unchecked"/>

</StackPanel>

</Grid>

Hope this helps,
Jim (http://jimmangaly.blogspot.com/)

Please MARK the replies as answers if they answered your question

http://www.identitymine.com/

Thanks, it works!

How to add contents and controls to be displayed on individual Radio Button checked event. i have tried but unable to do so.

This works for me, note that I wanted to encapsulate my views as userControls as I am building a lot of function into these views. The XAML was modeled off the code above but I added a Grid to hold my views that will be created dynamically after the stackpanel so things look like:

<StackPanel Orientation="Horizontal">

Content="Appointment" Style="{StaticResource tabishRadioButton}" GroupName="grp1" Checked="Tab_Checked" Unchecked="Tab1_Unchecked"/>

<RadioButton VerticalAlignment="Top" Height="30" Width="100" Content="Scheduling" x:Name="Tab2" Margin="2,0,0,0" GroupName="grp1" Style="{StaticResource tabishRadioButton}"

Checked="Tab1_Checked" Unchecked="Tab1_Unchecked"/>

</StackPanel>

<Grid Grid.Row="1" x:Name="Tabs">             <<<<<Added this>>>>>>>>>>>>>>>>>

</Grid>

Tabs is where my views will live on the Page and the XAML for these is real simple as for a test I just draw a Red and Black Grid in response to the clicks on the tabs.I have 2 userControls Tab1 and Tab2 where the XAML looks like:

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<Grid x:Name="Page2" Background="Red">

</UserControl>

My code behind for the main page Adds and removes the Tab Usercontrols to the Child collection of tabs. I track the lastpage and last radio so I

can keep the UI in sync. That code looks like:

Tab1 Page1 = null;

UIElement LastPage = null;

        Page1 = new Tab1();

                radioButton.Background = new SolidColorBrush(Colors.LightGray);

                if (LastRadioButton != null)

I have tried this.But its just adding a grid to stackpanel, Radiobutton container,but I need content of grid to change for individual radiobutton checked.

Like if I want hyperlinks under individual radio button checked event.

Your implementation gives the UI of a tabcontrol but not different options or submenu under each tab.

Hello

 I read the posts, and basically I think this is a task for the SilverLight framework. We don't have time for all this details.Besides this is to complex to use.

There are several important controls missing: TreeView , Tab Control, Tab Page, Menu.  I also don't see anywhere how to open windows from SilverLight.

We need to have the basics in the GUI interface. Our focus is in developing our aplications not in solving the basics that sould be supported by the framework.

I don't have the time to find ways to workaround these limitations.

From my point of view, I think Microsoft should hire Component Art, Infragistics and some other companies to help them implement the framework, and present the users (us) with a more complete solution.

My situation is: I need an alternative to the aspx nightmare, this seems to be the way, but half framework is not enough.

Best regards

 LS