在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

删除那些不需要的StackPanel.当你想要一些东西占用空间时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>