Silverlight layout: Grid

        <Grid ShowGridLines="True" Background="Gray">
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Button Grid.Row="0" Grid.Column="0" Content="0 - 0"></Button>
            <Button Grid.Row="0" Grid.Column="1" Content="0 - 1"></Button>
            <Button Grid.Row="0" Grid.Column="2" Content="0 - 2"></Button>
            <Button Grid.Row="1" Grid.Column="0" Content="1 - 0"></Button>
            <Button Grid.Row="1" Grid.Column="1" Content="1 - 1"></Button>
            <Button Grid.Row="1" Grid.Column="2" Content="1 - 2"></Button>
        </Grid>

Silverlight: HorizontalAlignment

    <Grid x:Name="LayoutRoot" Background="White">
      <StackPanel Background="Gray" Width="400">
          <TextBlock Text="HorizontalAlignment"></TextBlock>
          <Button Content="Default"></Button>
          <Button HorizontalAlignment="Center"  Content="Center"></Button>
          <Button HorizontalAlignment="Left"  Content="Left"></Button>
          <Button HorizontalAlignment="Right"  Content="Right"></Button>
          <Button HorizontalAlignment="Stretch"  Content="Stretch"></Button>
      </StackPanel>
  
  </Grid>

Silverlight layout of StackPanel

    <Grid x:Name="LayoutRoot" Background="White">
      <StackPanel Background="Gray" Width="400">
          <Button Content="Button"></Button>
          <Button Content="Button"></Button>
          <Button Content="Button"></Button>
          <Button Content="Button"></Button>
          <StackPanel Orientation="Horizontal" Background="LightGray">
              <Button Content="Button"></Button>
              <Button Content="Button"></Button>
              <Button Content="Button"></Button>
              <Button Content="Button"></Button>
          </StackPanel>
      </StackPanel>
  
  </Grid>

Border of Silverlight

Modify on MainPage.xaml of last article of "Silverlight 5/Visual Basic: Add event handling code" to add borders on the TextBlock and Button.

    <Grid x:Name="LayoutRoot" Background="White">
    <StackPanel>
        <Border Margin="5" Background="Yellow">
            <TextBlock x:Name="textBlock" Text="Hello!"></TextBlock>
        </Border>
        <Border Margin="20" Background="LightBlue" BorderBrush="SteelBlue" BorderThickness="5" CornerRadius="10">
            <Button x:Name="button1" Click="button1_Click" Content="Click Me"></Button>
        </Border>
    </StackPanel>
</Grid>

Silverlight 5/Visual Basic: Add event handling code

- Modify from the last article "Hello Visual Basic Silverlight 5, using Microsoft Visual Studio 11 Ultimate Beta". Edit MainPage.xaml in XAML view to add property of Click="button1_Click", to specify the call-back function once the button clicked.

    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel>
            <TextBlock x:Name="textBlock" Text="Hello!"></TextBlock>
            <Button x:Name="button1" Click="button1_Click" Content="Click Me"></Button>
        </StackPanel>
    </Grid>

- Click the Design tab to switch to Design view, and double click on the button, to insert code of button1_Click() in MainPage.xaml.vb.


- Enter the code:

    Private Sub button1_Click(sender As Object, e As RoutedEventArgs)
        textBlock.Text = "Hello, I'm here!"
    End Sub

- Run it.



Next:
- Border of Silverlight