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，它应该根据需要使用尽可能多的空间，然后其他两列应该只填充剩下的空间，但事实并非如此。 / p>

编辑：请参阅上面的更新图片。我想我必须使用拆分窗格这一事实。帐户屏幕显示在拆分面板的框架中。例如，这是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>

编辑以帮助调试：

我打开了所有面板，它们都符合我的预期。

如果这对您不起作用，那么您要么没有显示所有代码，要么需要调试并打开/关闭事物，回到可以工作和构建的简单设计等等。

用一列填充窗口

1 个答案: