Окно заполнения одной колонкой

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> 

Основная идея здесь заключается в том, что я устанавливаю StackPanels в колонке 1, которые должны использовать столько места, сколько необходимо, и другие две колонки должны затем просто заполнить оставшуюся часть пространства , Но это не так.

EDIT: См. Обновленное изображение выше. Наверное, это факт, что я использую разделяемую панель. Экран учетной записи отображается в рамке на панели разделения. Например это код для него в 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> 

Редактировать, чтобы помочь с отладкой :

Я включил все ваши панели, и все они совпали, как я ожидал.

Если это не работает для вас, то вы либо не показывать весь код, или вам нужно отладки и повернуть вещи вкл/выкл, вернуться к простой дизайн, который работает и отталкиваться оттуда и т. д.