Positioning UI Elements with a Grid : Grid « Containers « Silverlight

1. Silverlight
2. Containers
3. Grid

Positioning UI Elements with a Grid

    

<UserControl x:Class='SilverlightApplication3.MainPage'
    xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' 
    xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
    xmlns:d='http://schemas.microsoft.com/expression/blend/2008' 
    xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006' 
    mc:Ignorable='d' 
    d:DesignWidth='640' 
    d:DesignHeight='480'>
  <UserControl.Resources>
    <Style TargetType="TextBlock" x:Key="TextBlockStyle">
      <Setter Property="Foreground" Value="#FFCBCBDF"/>
      <Setter Property="FontSize" Value="16"/>
      <Setter Property="VerticalAlignment" Value="Bottom"/>
    </Style>
  </UserControl.Resources>
  <Grid x:Name="LayoutRoot" MinHeight="400"  MinWidth="600">
    <Grid.Background>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF26302B"/>
        <GradientStop Color="#FF26302B" Offset="1"/>
        <GradientStop Color="#FF26302B" Offset="0.5"/>
        <GradientStop Color="#FF748A7F" Offset="0.25"/>
        <GradientStop Color="#FF748A7F" Offset="0.7"/>
      </LinearGradientBrush>
    </Grid.Background>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="*"/>
      <RowDefinition Height="2*"/>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" 
                VerticalAlignment="Center">
      <TextBlock Margin="4,4,4,4" Style="{StaticResource TextBlockStyle}" 
                 Text="Silverlight" />
      <TextBlock Margin="4,4,4,4" Padding="8,8" 
                 Style="{StaticResource TextBlockStyle}" Text="Silverlight" />
      <TextBlock Margin="4,4,4,4" Style="{StaticResource TextBlockStyle}" 
                 Text="Silverlight" />
      <TextBlock Margin="4,4,4,4" Style="{StaticResource TextBlockStyle}" 
                 Text="Silverlight" />
    </StackPanel>
    <StackPanel  Grid.Row="0" Grid.Column="1" >
      <Rectangle MinHeight="40" Fill="#FFBB8C27" Stroke="#FF000000" Margin="4"  
                 MinWidth="50" RadiusX="10" RadiusY="10" />
      <Rectangle MinHeight="40"  Fill="#FF6E6EEA" Stroke="#FF000000" 
                 Margin="0,0,4,0" MinWidth="50" RadiusX="10" RadiusY="10"/>
      <Rectangle MinHeight="40" Fill="#FF008000" Stroke="#FF000000" Margin="4,4" 
                 MinWidth="50" RadiusX="10" RadiusY="10"/>
      <Rectangle MinHeight="40" Fill="#FF00FFFF" Stroke="#FF000000" Margin="4,0" 
                 MinWidth="50" RadiusX="10" RadiusY="10"/>
    </StackPanel>
    <StackPanel Grid.Row="1" Grid.Column="0" Orientation="Horizontal" >
      <Rectangle MinHeight="40" Fill="#FFBB8C27" Stroke="#FF000000" Margin="4"  
                 MinWidth="50" RadiusX="10" RadiusY="10"/>
      <Rectangle MinHeight="40"  Fill="#FF6E6EEA" Stroke="#FF000000" 
                 Margin="0,0,4,0" MinWidth="50" RadiusX="10" RadiusY="10"/>
      <Rectangle MinHeight="40" Fill="#FF008000" Stroke="#FF000000" Margin="4,4" 
                 MinWidth="50" RadiusX="10" RadiusY="10"/>
      <Rectangle MinHeight="40" Fill="#FF00FFFF" Stroke="#FF000000" Margin="4,0" 
                 MinWidth="50" RadiusX="10" RadiusY="10"/>
    </StackPanel>
    <StackPanel Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" 
                VerticalAlignment="Center">
      <TextBlock Margin="4,4,4,4" Style="{StaticResource TextBlockStyle}" 
                 Text="Silverlight" />
      <TextBlock Margin="4,4,4,4" Style="{StaticResource TextBlockStyle}" 
                 Text="Silverlight" />
      <TextBlock Margin="4,4,4,4" Padding="8,8" 
                 Style="{StaticResource TextBlockStyle}" Text="Silverlight" />
      <TextBlock Margin="4,4,4,4" Style="{StaticResource TextBlockStyle}" 
                 Text="Silverlight" />
    </StackPanel>

  </Grid>
</UserControl>

   
    
    
    
  

Related examples in the same category

1.	A Simple Grid Control
2.	Span two rows and two columns with an Image control
3.	Implementing a Grid to Set the Layout of Silverlight Controls
4.	Grid example
5.	ColumnSpan example
6.	Grid example 2* row and column definitions
7.	Use Grid to layout a Calendar
8.	Set Grid Row and Column for a Button
9.	Grid with Column Definition and Row definition
10.	Define rows / columns for Grid
11.	Using Grid.ColumnSpan
12.	Set Grid Row Height and Column Width to Auto
13.	Mixing row height styles
14.	Show Grid Lines
15.	Multiple Items in a Grid Cell
16.	Grid in ScrollViewer
17.	Margin vs Padding and Grid
18.	ColumnDefinition.Width=Auto
19.	Bind to Grid Width and Height
20.	Set Row and Column Index when Adding Buttons to Grid
21.	Put more than one Object to one Grid Cell
22.	Set Column and Row index when adding Controls to a Grid
23.	Empty RowDefinition and ColumnDefinition
24.	Use the Grid element to create a standard user interface (UI) dialog box.
25.	Place and size rectangles and ellipses in Grid cells
26.	Use Image as the Grid background
27.	Automatic Width and Height
28.	Layout Controls with Grid in code
29.	Set control to specific row and column in code
30.	Show Grid lines in code
31.	A basic Grid using star sizing.
32.	A basic Grid using auto sizing
33.	The basic syntax of a Grid
34.	Arranging content within a Grid
35.	Proportional Grid
36.	Nested Grids
37.	Grid cell stretch mode
38.	Programmatically adding a row and a column while setting the height and width
39.	Programmatically removing a row and a column
40.	The basic syntax and usage of a GridSplitter
41.	Star sizing Grid
42.	Grid mouse button up event