用一列填充窗口

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> 

編輯與調試幫助：

我把所有面板都打開了，它們都按照我的預期對齊。

如果這不適合你，那麼你要麼沒有顯示所有的代碼，或者你需要調試和扭轉乾坤的開/關，回到一個簡單的設計，工程和從那裏建立等。