Tuesday, March 24, 2009

Switching Between Grids in a Silverlight Control

 

I'm just getting started with Silverlight and I wanted to know how to switch between two different grids with different content.  In that way, the same Silverlight control can appear to serve different purposes as needed.

The trick is to define a container control that covers the entire surface, such as a Canvas or single cell grid.  Then add two or more container controls which hold the alternate content.  As long as only one of those container controls has the Visibility = Visible setting, that container will be the one rendered in the designer at compile time.  The rest of the ricontainers should have the Visiblity = Collapsed setting.

The following XAML code provides an example. The first grid is the outer container.  The second grid implements a grid of 9 buttons with the center button with a red background color.  The third grid implements a similar grid of 25 buttons.  The visibility of the grids can easily be managed in C# or VB code.

<UserControl x:Class="Silverlight.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<
Grid x:Name="LayoutRoot" Background="AliceBlue" Width="900" Height="250" ShowGridLines="True">
<
Grid.RowDefinitions>
<
RowDefinition></RowDefinition>
</
Grid.RowDefinitions>
<
Grid.ColumnDefinitions>
<
ColumnDefinition></ColumnDefinition>
</
Grid.ColumnDefinitions>

<
Grid x:Name="G09" Background="AliceBlue" Width="900" Height="250" ShowGridLines="True" Grid.Row="0" Grid.Column="0" Visibility="Visible">
<
Grid.RowDefinitions>
<
RowDefinition Height="84"></RowDefinition>
<
RowDefinition Height="83"></RowDefinition>
<
RowDefinition Height="83"></RowDefinition>
</
Grid.RowDefinitions>
<
Grid.ColumnDefinitions>
<
ColumnDefinition Width="300"></ColumnDefinition>
<
ColumnDefinition Width="300"></ColumnDefinition>
<
ColumnDefinition Width="300"></ColumnDefinition>
</
Grid.ColumnDefinitions>
<
Button Height="40" Width="50" Grid.Row="0" Grid.Column="0" x:Name="btnG09R0C0" Click="btnG09_Click" Content="R0C0" Tag="G09R0C0" VerticalAlignment="Bottom" HorizontalAlignment="Right"></Button>
<
Button Height="40" Width="50" Grid.Row="0" Grid.Column="1" x:Name="btnG09R0C1" Click="btnG09_Click" Content="R0C1" Tag="G09R0C1" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
<
Button Height="40" Width="50" Grid.Row="0" Grid.Column="2" x:Name="btnG09R0C2" Click="btnG09_Click" Content="R0C2" Tag="G09R0C2" VerticalAlignment="Bottom" HorizontalAlignment="Left"></Button>
<
Button Height="40" Width="50" Grid.Row="1" Grid.Column="0" x:Name="btnG09R1C0" Click="btnG09_Click" Content="R1C0" Tag="G09R1C0" VerticalAlignment="Center" HorizontalAlignment="Right"></Button>
<
Button Height="40" Width="50" Grid.Row="1" Grid.Column="1" x:Name="btnG09R1C1" Click="btnG09_Click" Content="R1C1" Tag="G09R1C1" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Red"></Button>
<
Button Height="40" Width="50" Grid.Row="1" Grid.Column="2" x:Name="btnG09R1C2" Click="btnG09_Click" Content="R1C2" Tag="G09R1C2" VerticalAlignment="Center" HorizontalAlignment="Left"></Button>
<
Button Height="40" Width="50" Grid.Row="2" Grid.Column="0" x:Name="btnG09R2C0" Click="btnG09_Click" Content="R2C0" Tag="G09R2C0" VerticalAlignment="Top" HorizontalAlignment="Right"></Button>
<
Button Height="40" Width="50" Grid.Row="2" Grid.Column="1" x:Name="btnG09R2C1" Click="btnG09_Click" Content="R2C1" Tag="G09R2C1" VerticalAlignment="Center" HorizontalAlignment="Center" ></Button>
<
Button Height="40" Width="50" Grid.Row="2" Grid.Column="2" x:Name="btnG09R2C2" Click="btnG09_Click" Content="R2C2" Tag="G09R2C2" VerticalAlignment="Top" HorizontalAlignment="Left"></Button>
</
Grid>
<
Grid x:Name="G25" Background="AliceBlue" Width="900" Height="250" ShowGridLines="True" Visibility="Collapsed" Grid.Row="0" Grid.Column="0" >
<
Grid.RowDefinitions>
<
RowDefinition Height="50"></RowDefinition>
<
RowDefinition Height="50"></RowDefinition>
<
RowDefinition Height="50"></RowDefinition>
<
RowDefinition Height="50"></RowDefinition>
<
RowDefinition Height="50"></RowDefinition>
</
Grid.RowDefinitions>
<
Grid.ColumnDefinitions>
<
ColumnDefinition Width="180"></ColumnDefinition>
<
ColumnDefinition Width="180"></ColumnDefinition>
<
ColumnDefinition Width="180"></ColumnDefinition>
<
ColumnDefinition Width="180"></ColumnDefinition>
<
ColumnDefinition Width="180"></ColumnDefinition>
</
Grid.ColumnDefinitions>
<
Button Height="40" Width="50" Grid.Row="0" Grid.Column="0" x:Name="btnG25R0C0" Click="btnG25_Click" Content="R0C0" Tag="G25R0C0" VerticalAlignment="Center" HorizontalAlignment="Right"></Button>
<
Button Height="40" Width="50" Grid.Row="0" Grid.Column="1" x:Name="btnG25R0C1" Click="btnG25_Click" Content="R0C1" Tag="G25R0C1" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
<
Button Height="40" Width="50" Grid.Row="0" Grid.Column="2" x:Name="btnG25R0C2" Click="btnG25_Click" Content="R0C2" Tag="G25R0C2" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
<
Button Height="40" Width="50" Grid.Row="0" Grid.Column="3" x:Name="btnG25R0C3" Click="btnG25_Click" Content="R0C3" Tag="G25R0C3" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
<
Button Height="40" Width="50" Grid.Row="0" Grid.Column="4" x:Name="btnG25R0C4" Click="btnG25_Click" Content="R0C4" Tag="G25R0C4" VerticalAlignment="Center" HorizontalAlignment="Left"></Button>

<
Button Height="40" Width="50" Grid.Row="1" Grid.Column="0" x:Name="btnG25R1C0" Click="btnG25_Click" Content="R1C0" Tag="G25R1C0" VerticalAlignment="Center" HorizontalAlignment="Right"></Button>
<
Button Height="40" Width="50" Grid.Row="1" Grid.Column="1" x:Name="btnG25R1C1" Click="btnG25_Click" Content="R1C1" Tag="G25R1C1" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
<
Button Height="40" Width="50" Grid.Row="1" Grid.Column="2" x:Name="btnG25R1C2" Click="btnG25_Click" Content="R1C2" Tag="G25R1C2" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
<
Button Height="40" Width="50" Grid.Row="1" Grid.Column="3" x:Name="btnG25R1C3" Click="btnG25_Click" Content="R1C3" Tag="G25R1C3" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
<
Button Height="40" Width="50" Grid.Row="1" Grid.Column="4" x:Name="btnG25R1C4" Click="btnG25_Click" Content="R1C4" Tag="G25R1C4" VerticalAlignment="Center" HorizontalAlignment="Left"></Button>

<
Button Height="40" Width="50" Grid.Row="2" Grid.Column="0" x:Name="btnG25R2C0" Click="btnG25_Click" Content="R2C0" Tag="G25R2C0" VerticalAlignment="Center" HorizontalAlignment="Right"></Button>
<
Button Height="40" Width="50" Grid.Row="2" Grid.Column="1" x:Name="btnG25R2C1" Click="btnG25_Click" Content="R2C1" Tag="G25R2C1" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
<
Button Height="40" Width="50" Grid.Row="2" Grid.Column="2" x:Name="btnG25R2C2" Click="btnG25_Click" Content="R2C2" Tag="G25R2C2" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Red"></Button>
<
Button Height="40" Width="50" Grid.Row="2" Grid.Column="3" x:Name="btnG25R2C3" Click="btnG25_Click" Content="R2C3" Tag="G25R2C3" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
<
Button Height="40" Width="50" Grid.Row="2" Grid.Column="4" x:Name="btnG25R2C4" Click="btnG25_Click" Content="R2C4" Tag="G25R2C4" VerticalAlignment="Center" HorizontalAlignment="Left"></Button>

<
Button Height="40" Width="50" Grid.Row="3" Grid.Column="0" x:Name="btnG25R3C0" Click="btnG25_Click" Content="R3C0" Tag="G25R3C0" VerticalAlignment="Center" HorizontalAlignment="Right"></Button>
<
Button Height="40" Width="50" Grid.Row="3" Grid.Column="1" x:Name="btnG25R3C1" Click="btnG25_Click" Content="R3C1" Tag="G25R3C1" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
<
Button Height="40" Width="50" Grid.Row="3" Grid.Column="2" x:Name="btnG25R3C2" Click="btnG25_Click" Content="R3C2" Tag="G25R3C2" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
<
Button Height="40" Width="50" Grid.Row="3" Grid.Column="3" x:Name="btnG25R3C3" Click="btnG25_Click" Content="R3C3" Tag="G25R3C3" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
<
Button Height="40" Width="50" Grid.Row="3" Grid.Column="4" x:Name="btnG25R3C4" Click="btnG25_Click" Content="R3C4" Tag="G25R3C4" VerticalAlignment="Center" HorizontalAlignment="Left"></Button>

<
Button Height="40" Width="50" Grid.Row="4" Grid.Column="0" x:Name="btnG25R4C0" Click="btnG25_Click" Content="R4C0" Tag="G25R4C0" VerticalAlignment="Center" HorizontalAlignment="Right"></Button>
<
Button Height="40" Width="50" Grid.Row="4" Grid.Column="1" x:Name="btnG25R4C1" Click="btnG25_Click" Content="R4C1" Tag="G25R4C1" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
<
Button Height="40" Width="50" Grid.Row="4" Grid.Column="2" x:Name="btnG25R4C2" Click="btnG25_Click" Content="R4C2" Tag="G25R4C2" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
<
Button Height="40" Width="50" Grid.Row="4" Grid.Column="3" x:Name="btnG25R4C3" Click="btnG25_Click" Content="R4C3" Tag="G25R4C3" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
<
Button Height="40" Width="50" Grid.Row="4" Grid.Column="4" x:Name="btnG25R4C4" Click="btnG25_Click" Content="R4C4" Tag="G25R4C4" VerticalAlignment="Center" HorizontalAlignment="Left"></Button>
</
Grid>
</
Grid>
</
UserControl>



 



Hope that helps.



Joe Kunk

Microsoft MVP VB


Okemos, MI USA




No comments: