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.