在windows phone 8.1中將列寬設置爲可用寬度的50％

Question

第一次開發/學習WP8.1。

這個問題是關於佈局。

我有2個按鈕。

我希望他們在我的屏幕底部。

我希望每個按鈕佔用屏幕可用寬度的50％。

與此類似：

到目前爲止，我有這樣的：

這是我的標記：

<Page 
    x:Class="Informed.BasicPage1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:Informed" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" 
    > 

    <Grid x:Name="LayoutRoot"> 

     <Grid.ChildrenTransitions> 
      <TransitionCollection> 
       <EntranceThemeTransition/> 
      </TransitionCollection> 
     </Grid.ChildrenTransitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="Auto"/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="*"/> 
      <RowDefinition Height="45"/> 
     </Grid.RowDefinitions> 

     <!-- Title Panel --> 
     <StackPanel Grid.Row="0" Margin="19,0,0,0" Grid.ColumnSpan="2"> 
      <Image Name="imgHeader" Grid.Row="0" Source="Images/bannershort.jpg" Stretch="UniformToFill"/> 
      <TextBlock Text="Log In" Margin="0,-6.5,0,26.5" Style="{ThemeResource HeaderTextBlockStyle}" CharacterSpacing="{ThemeResource PivotHeaderItemCharacterSpacing}"/> 
     </StackPanel> 
     <StackPanel Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.ColumnSpan="2"> 
      <TextBox Name="email" Header="Email address"/> 
      <PasswordBox Name="password" Header="Password"/> 
      <CheckBox Name="showPassword" Content="Show password"/> 

      <!-- Content body --> 
      <TextBlock Name="body" Style="{StaticResource MessageDialogContentStyle}" TextWrapping="Wrap"> 
       <TextBlock.Text> 
        Enter Email Address and Password created. 
       </TextBlock.Text> 
      </TextBlock> 
     </StackPanel> 
     <StackPanel Grid.Row="2" Grid.Column="0" Margin="0,0,0,0" Grid.ColumnSpan="1"> 
      <Button Content="hello" Grid.Column="0" FontFamily="Global User Interface" /> 
     </StackPanel> 
     <StackPanel Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="1"> 
     <Button Content="hello2" Grid.Column="1" FontFamily="Global User Interface" /> 
     </StackPanel> 
    </Grid> 
</Page> 

Answer 1

刪除那些StackPanels他們不需要。當你想要的東西拿可用空間使用HorizontalAlignment = Stretch：

<Button Content="hello" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Stretch" FontFamily="Global User Interface" /> 
<Button Content="hello2" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" FontFamily="Global User Interface" /> 

你也將需要使你的列寬度相等：

<Grid.ColumnDefinitions> 
    <ColumnDefinition Width="*"/> 
    <ColumnDefinition Width="*"/> 
</Grid.ColumnDefinitions> 

你也可以認爲加入Margin="20,0,10,0"（第一）和Margin="10,0,20,0"（第二）。

把一個控件放在面板裏面是沒有意義的（除了一些罕見的情況）。您還可以修改您的代碼，並把這些按鈕一個電網裏面那麼就沒有必要使整個主電網有兩列：

<Grid Grid.Row="2" HorizontalAlignment="Stretch"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 
    <Button Content="hello" Grid.Column="0" HorizontalAlignment="Stretch" FontFamily="Global User Interface" /> 
    <Button Content="hello2" Grid.Column="1" HorizontalAlignment="Stretch" FontFamily="Global User Interface" /> 
</Grid>