Verwendung eines Grid-Layouts mit XAML

Das folgende Beispiel zeigt ein einfaches Grid-Layout mit zwei Spalten (columns) und zwei Zeilen (rows). Die Breiten -und Höhenangaben können fix in Pixel gemacht werden (Bsp. Width="400") oder relativ mit Prozentangaben (Bsp. Width="5*" für 50%) oder automatisch an die Größe des Inhalts angepasst werden (Bsp. Width="Auto").

Grid-Layout

Die Indizes eines Grids beginnen bei Null (0). Die Angabe Grid.Column="0" Grid.Row="0" bezeichnet also die erste Spalte in der ersten Zeile. Mit diesem Grundwissen kann man schon ein einfaches Grid erstellen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<Grid ShowGridLines="True">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="5*" />
    <ColumnDefinition Width="5*" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <toolkit:HubTile    Grid.Column="0" Grid.Row="0"    Title="One" Background="{StaticResource PhoneAccentBrush}" />
  <TextBlock          Grid.Column="0" Grid.Row="1"    Text="top left" TextAlignment="Center"></TextBlock>
  <toolkit:HubTile    Grid.Column="1" Grid.Row="0"    Title="Two" Background="{StaticResource PhoneAccentBrush}" />
  <TextBlock          Grid.Column="1" Grid.Row="1"    Text="top right" TextAlignment="Center"></TextBlock>
</Grid>

Screenshot

Kompletter XAML-Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<phone:PhoneApplicationPage 
  x:Class="PhoneApp4.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
  xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
  mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
                     FontFamily="{StaticResource PhoneFontFamilyNormal}"
                     FontSize="{StaticResource PhoneFontSizeNormal}"
                     Foreground="{StaticResource PhoneForegroundBrush}"
                     SupportedOrientations="Portrait" Orientation="Portrait"
                     shell:SystemTray.IsVisible="True">
  <Grid x:Name="ContentPanel" ShowGridLines="True">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="5*" />
      <ColumnDefinition Width="5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <toolkit:HubTile    Grid.Column="0" Grid.Row="0"    Title="One" Background="{StaticResource PhoneAccentBrush}" />
    <TextBlock          Grid.Column="0" Grid.Row="1"    Text="top left" TextAlignment="Center"></TextBlock>
    <toolkit:HubTile    Grid.Column="1" Grid.Row="0"    Title="Two" Background="{StaticResource PhoneAccentBrush}" />
    <TextBlock          Grid.Column="1" Grid.Row="1"    Text="top right" TextAlignment="Center"></TextBlock>
  </Grid>
</phone:PhoneApplicationPage>

Hinweis 1: Die Angabe {StaticResource PhoneAccentBrush} kann benutzt werden, um die Akzentfarbe des Telefons zu benutzen.

Hinweis 2: Wer nochmal nachschauen möchte, wie ein Hub-Tile aus dem Windows Phone Toolkit verwendet wird, kann dies hier tun: [post id=3877]Hub Tile Control verwenden[/post].

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.