网格没有使用所有可用空间

Question

几周前我开始学习 C# 以开发 UWP 应用程序。我正在关注 Bob Tabor 的教程“面向绝对初学者的 Windows 10 开发”。他在教学时提出挑战，因此我们应用所学。

在他的视频中没有。31、他提出了挑战。我们的想法是制作一个看起来像这样的应用程序：

在解决这个挑战时，我想出了这个 mainpage.xaml。简单介绍一下，顶部的黑色按钮和底部的图像位于 mainpage.xaml 中。还有一个框架，其中根据单击的按钮显示不同的页面。在主页的构造函数中，我导航到 donuts.xaml。

这是我的主页.xaml

<Page

x:Class="Stupendous_Styles_Challenge.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:Stupendous_Styles_Challenge"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Page.Resources>

    <Style TargetType="Button" x:Key="myButtonStyle">

        <Setter Property="Background" Value="Black" />

        <Setter Property="Height" Value="100" />

        <Setter Property="BorderThickness" Value="0, 0, 2, 0" />

        <Setter Property="BorderBrush" Value="Gray" />

        <Setter Property="HorizontalAlignment" Value="Stretch" />

        <Setter Property="VerticalAlignment" Value="Stretch" />

    </Style>

    <Style TargetType="Image" x:Key="myIconStyle">

        <Setter Property="Width" Value="50" />

        <Setter Property="Height" Value="50" />

        <Setter Property="Margin" Value="0, 0, 10, 0" />

    </Style>

</Page.Resources>

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition Height="100" />

        <RowDefinition Height="*" />

    </Grid.RowDefinitions>

Answer 1

如果您明确设置页面的宽度，它将永远不会拉伸：删除Width="600"，或者您可以设置MinWidth="600"。<Pagex:Class="Stupendous_Styles_Challenge.Donuts"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:Stupendous_Styles_Challenge"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" MinWidth="600"><Page.Resources>&nbsp; &nbsp; <Style TargetType="TextBlock" x:Key="myTextBlockStyle">&nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="FontSize" Value="24" />&nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="Margin" Value="10, 0, 0, 0" />&nbsp; &nbsp; </Style>

Answer 2

我认为这可能会解决问题，这是 donuts.xaml 的编辑版本：<Pagex:Class="Stupendous_Styles_Challenge.Donuts"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:Stupendous_Styles_Challenge"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Width="600"><Page.Resources>&nbsp; &nbsp; <Style TargetType="TextBlock" x:Key="myTextBlockStyle">&nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="FontSize" Value="24" />&nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="Margin" Value="10, 0, 0, 0" />&nbsp; &nbsp; </Style>&nbsp; &nbsp; <Style TargetType="Slider" x:Key="mySliderStyle">&nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="Width" Value="200" />&nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="VerticalAlignment" Value="Center"/>&nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="Maximum" Value="24" />&nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="Minimum" Value="0" />&nbsp; &nbsp; &nbsp; &nbsp; <Setter Property="HorizontalAlignment" Value="Stretch" />&nbsp; &nbsp; </Style></Page.Resources><Grid Background="Red" HorizontalAlignment="Stretch">&nbsp; &nbsp; <Grid.RowDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; <RowDefinition Height="200"/>&nbsp; &nbsp; &nbsp; &nbsp; <RowDefinition />&nbsp; &nbsp; </Grid.RowDefinitions>&nbsp; &nbsp; <Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="*"/>&nbsp; &nbsp; </Grid.ColumnDefinitions>&nbsp; &nbsp; <Image Source="Assets/white-logo.png" Height="200" Width="200" HorizontalAlignment="Left" VerticalAlignment="Top"/>&nbsp; &nbsp; <Grid Grid.Row="1">&nbsp; &nbsp; &nbsp; &nbsp; <Grid.RowDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <RowDefinition Height="40"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <RowDefinition Height="40"/>&nbsp; &nbsp; &nbsp; &nbsp; </Grid.RowDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; <Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="*"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="*"/>&nbsp; &nbsp; &nbsp; &nbsp; </Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; <TextBlock Text="Original Glazed Count: " Style="{StaticResource myTextBlockStyle}"/>&nbsp; &nbsp; &nbsp; &nbsp; <Slider Grid.Column="1" Style="{StaticResource mySliderStyle}" />&nbsp; &nbsp; &nbsp; &nbsp; <TextBlock Grid.Row="1" Text="Speedway Special Count: " Style="{StaticResource myTextBlockStyle}" />&nbsp; &nbsp; &nbsp; &nbsp; <Slider Grid.Column="1" Grid.Row="1" Style="{StaticResource mySliderStyle}" />&nbsp; &nbsp; </Grid></Grid>&nbsp;在<Grid Background="Red" HorizontalAlignment="Stretch">&nbsp;部分：&nbsp; &nbsp; <Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="*"/>&nbsp; &nbsp; </Grid.ColumnDefinitions>我认为问题在于框架内的网格没有占用它可以获得的空间并且具有固定的宽度，添加了 columndefinition 它确实占用了它所能占用的所有空间。