Windows 8 Store App中的XAML对齐方式

Question

Not being at all familiar with XAML, I'm trying to get a very simple layout designed where the main page consists of two parts:

1. On the left, I want an image that will scale to fit the available height but maintain its aspect ratio.
2. On the right, I want a panel that will eventually contain text and controls - at the moment I just have text.

I can get the image to behave ok by using a ViewBox but I can't seem to get the right side of the screen to fill the remaining gap. See screenshot:

What I want is for the area that contains the text to stretch to the right with the text centred within it.

The relevant XAML code is:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
  <StackPanel Orientation="Horizontal">
    <Viewbox HorizontalAlignment="Right">
      <Image Source="Assets/ABCImage.png"></Image>
    </Viewbox>
    <StackPanel Orientation="Vertical">
      <TextBlock Text="ABC Viewer"
                 TextAlignment="Center"
                 FontSize="48"></TextBlock>
      <TextBlock Text="Test application"
                 TextAlignment="Center"
                 FontSize="24"></TextBlock>
    </StackPanel>
  </StackPanel>
</Grid>

This is taking me far too long to figure out. Can someone please put me out of my misery?

Answer 1

Try this :

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Viewbox Grid.Column="0"
           HorizontalAlignment="Right">
    <Image Source="Assets/ABCImage.png"></Image>
  </Viewbox>
  <StackPanel Grid.Column="1">
    <TextBlock Text="SEM Viewer"
               TextAlignment="Center"
               FontSize="48" />
    <TextBlock Text="Test application"
               TextAlignment="Center"
               FontSize="24" />
  </StackPanel>
</Grid>