在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"（第二个）。

将一个控件放在面板中是没有意义的（除了一些罕见的情况）。您也可以修改代码并将 Buttons 放在 Grid 中，然后不需要使用两列构建整个主 Grid ：< / p>

<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>