用一列填充窗口

Question

我遇到了一个似乎微不足道的问题，但却让我头疼。在UWP应用程序上工作时，我正在设计一个帐户屏幕。 Currently it looks like this: 显然，我希望这是居中，并有背景填充窗口，无论窗口大小。下面是我当前的代码

<Grid Background="#FFECF0F1" x:Name="RootGrid"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="*" /> 
     <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 

    <Grid.ColumnDefinitions> 
     <ColumnDefinition x:Name="FirstColumn" Width="*"/> 
     <ColumnDefinition x:Name="SecondColumn" Width="Auto" /> 
     <ColumnDefinition x:Name="ThirdColumn" Width="*" /> 
    </Grid.ColumnDefinitions> 

    <StackPanel Orientation="Vertical" Grid.Column="1"> 
     <RelativePanel Grid.Column="1" x:Name="UserInfoPanel" HorizontalAlignment="Stretch" BorderBrush="Black" BorderThickness="0,0,0,1" Visibility="Collapsed"> 
      <Ellipse Stroke="Black" StrokeThickness="3" HorizontalAlignment="Left" Height="100" VerticalAlignment="Center" Width="100" Margin="25" > 
       <Ellipse.Fill> 
        <ImageBrush x:Name="accountImage" /> 
       </Ellipse.Fill> 
      </Ellipse> 
      <TextBlock x:Name="displayUserName" RelativePanel.AlignHorizontalCenterWithPanel="True" Margin="0,10,0,0" TextWrapping="Wrap" FontSize="24" Text="User Name" VerticalAlignment="Top" /> 
      <Button x:Name="signOutButton" Click="signOutButton_Click" Content="Sign Out" Margin="0,0,10,10" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignBottomWithPanel="True" VerticalAlignment="Bottom" Width="131"/> 
     </RelativePanel> 
     <StackPanel Orientation="Vertical" Grid.Column="1"> 
      <TextBlock x:Name="signInText" Text="Not Currently Signed In " FontSize="20" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,10,0,0" /> 
      <Button x:Name="signInButton" Content="Sign In" HorizontalAlignment="Center" VerticalAlignment="Bottom" Click="signInButton_Click" Margin="0,10,0,0" Width="66"/> 
     </StackPanel> 
     <StackPanel x:Name="BioPanel" Orientation="Vertical" Grid.Column="1" Margin="10,0" Width="500" Visibility="Collapsed"> 
      <TextBlock x:Name="preferedCar" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Preferred Car:" Margin="0,20,0,0"/> 
      <ComboBox x:Name="dropDownCar" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> 
      <TextBlock x:Name="bestScore" TextWrapping="Wrap" Text="Best Score: 6.9" Margin="0,20,0,0" /> 
      <TextBlock x:Name="drivingTime" TextWrapping="Wrap" Text="Time Driving with FuelE.co: 32 Hours" Margin="0,20,0,0" /> 
      <TextBox x:Name="bio" TextWrapping="Wrap" Text="Your Bio" Height="236" Margin="0,20,0,0" /> 
     </StackPanel> 
    </StackPanel> 
</Grid> 

这里的主要想法是，我设置在1列StackPanels，根据需要，应使用尽可能多的空间，然后将另外两列，应该只是填补空间的其余部分， 但这种情况并非如此。

编辑： 查看上面更新的图片。我想这一定是我正在使用分割窗格的事实。帐户屏幕正在分屏显示在一个框架中。例如，这是在main.xaml它的代码：

  <SplitView.Content> 
      <Frame Name="MyFrame" Background="#FFECF0F1"></Frame> 
     </SplitView.Content> 

，然后在C＃：

MyFrame.Navigate(typeof(Account)); 

也许有件事我必须与框架做的就是它填补了屏幕？

再次感谢

Answer 1

根据您显示的内容，您不需要所有这些行和列。

尝试是这样的：

<Grid Name="LayoutRoot" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Yellow"> 
    <StackPanel HorizontalAlignment="Center" Background="Gray"> 
     <TextBlock Text="illegitimi non carborundum" Margin="0,10"/> 
     <TextBlock Text="illegitimi non carborundum" Margin="0,10"/> 
     <TextBlock Text="illegitimi non carborundum" Margin="0,10"/> 
    </StackPanel> 
</Grid> 

其中给出：

而且你的代码可能是这样的：

<Grid Background="#FFECF0F1" x:Name="RootGrid"> 
    <StackPanel HorizontalAlignment="Center"> 
     <RelativePanel Grid.Column="1" x:Name="UserInfoPanel" HorizontalAlignment="Stretch" BorderBrush="Black" BorderThickness="0,0,0,1" Visibility="Collapsed"> 
      <Ellipse Stroke="Black" StrokeThickness="3" HorizontalAlignment="Left" Height="100" VerticalAlignment="Center" Width="100" Margin="25" > 
       <Ellipse.Fill> 
        <ImageBrush x:Name="accountImage" /> 
       </Ellipse.Fill> 
      </Ellipse> 
      <TextBlock x:Name="displayUserName" RelativePanel.AlignHorizontalCenterWithPanel="True" Margin="0,10,0,0" TextWrapping="Wrap" FontSize="24" Text="User Name" VerticalAlignment="Top" /> 
      <Button x:Name="signOutButton" Click="signOutButton_Click" Content="Sign Out" Margin="0,0,10,10" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignBottomWithPanel="True" VerticalAlignment="Bottom" Width="131"/> 
     </RelativePanel> 
     <StackPanel Orientation="Vertical" Grid.Column="1"> 
      <TextBlock x:Name="signInText" Text="Not Currently Signed In " FontSize="20" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,10,0,0" /> 
      <Button x:Name="signInButton" Content="Sign In" HorizontalAlignment="Center" VerticalAlignment="Bottom" Click="signInButton_Click" Margin="0,10,0,0" Width="66"/> 
     </StackPanel> 
     <StackPanel x:Name="BioPanel" Orientation="Vertical" Grid.Column="1" Margin="10,0" Width="500" Visibility="Collapsed"> 
      <TextBlock x:Name="preferedCar" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Preferred Car:" Margin="0,20,0,0"/> 
      <ComboBox x:Name="dropDownCar" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> 
      <TextBlock x:Name="bestScore" TextWrapping="Wrap" Text="Best Score: 6.9" Margin="0,20,0,0" /> 
      <TextBlock x:Name="drivingTime" TextWrapping="Wrap" Text="Time Driving with FuelE.co: 32 Hours" Margin="0,20,0,0" /> 
      <TextBox x:Name="bio" TextWrapping="Wrap" Text="Your Bio" Height="236" Margin="0,20,0,0" /> 
     </StackPanel> 
    </StackPanel> 
</Grid> 

编辑与调试帮助：

我把所有面板都打开了，它们都按照我的预期对齐。

如果这不适合你，那么你要么没有显示所有的代码，或者你需要调试和扭转乾坤的开/关，回到一个简单的设计，工程和从那里建立等。