Question

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

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

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

这是我的mainpage.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>

    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <Button Name="DonutsButton" 
            Style="{StaticResource myButtonStyle}"  
            Click="DonutsButton_Click">

        <StackPanel Orientation="Horizontal">
            <Image Source="Assets/coffee-icon.png" Style="{StaticResource myIconStyle}"/>
            <TextBlock Text="Donuts" FontSize="18" Foreground="White" VerticalAlignment="Center"/>
        </StackPanel>
    </Button>

    <Button Name="CoffeeButton" 
            Style="{StaticResource myButtonStyle}"
            Grid.Column="1" 
            Click="CoffeeButton_Click">

        <StackPanel Orientation="Horizontal">
            <Image Source="Assets/donut-icon.png" Style="{StaticResource myIconStyle}"/>
            <TextBlock Text="Coffee" FontSize="18" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Stretch"/>
        </StackPanel>
    </Button>

    <Button Name="ScheduleButton" 
            Style="{StaticResource myButtonStyle}" 
            Grid.Column="2" 
            Click="ScheduleButton_Click">

        <StackPanel Orientation="Horizontal">
            <Image Source="Assets/schedule-icon.png" Style="{StaticResource myIconStyle}"/>
            <TextBlock Text="Schedule" FontSize="18" Foreground="White" VerticalAlignment="Center"/>
        </StackPanel>
    </Button>

    <Button Name="CompleteButton"
            Style="{StaticResource myButtonStyle}"
            Grid.Column="3" 
            Click="CompleteButton_Click">

        <StackPanel Orientation="Horizontal">
            <Image Source="Assets/schedule-icon.png" Style="{StaticResource myIconStyle}"/>
            <TextBlock Text="Complete" FontSize="18" Foreground="White" VerticalAlignment="Center"/>
        </StackPanel>
    </Button>

    <Grid Grid.Row="1" Grid.ColumnSpan="4">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>

        <Frame Name="myFrame"></Frame>

        <Image Grid.Column="1" Source="Assets\background.jpg" Stretch="UniformToFill"/>
    </Grid>

</Grid>

问题非常愚蠢。该应用程序运行正常，看起来完全像这样。但是，当我调整窗口大小时，中间（最大的[第一帧]）部分不会调整大小。而是在侧面显示白色边框。像这样：

然后，出于好奇，我将myFrame的背景更改为浅蓝色。结果是：

这意味着框架实际上占据了整个区域。这是我的donuts.xaml：

<Page
x: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>
    <Style TargetType="TextBlock" x:Key="myTextBlockStyle">
        <Setter Property="FontSize" Value="24" />
        <Setter Property="Margin" Value="10, 0, 0, 0" />
    </Style>

    <Style TargetType="Slider" x:Key="mySliderStyle">
        <Setter Property="Width" Value="200" />
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Maximum" Value="24" />
        <Setter Property="Minimum" Value="0" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
    </Style>
</Page.Resources>

<Grid Background="Red" HorizontalAlignment="Stretch">
    <Grid.RowDefinitions>
        <RowDefinition Height="200"/>
        <RowDefinition />
    </Grid.RowDefinitions>

    <Image Source="Assets/white-logo.png" Height="200" Width="200" HorizontalAlignment="Left" VerticalAlignment="Top"/>

    <Grid Grid.Row="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <TextBlock Text="Original Glazed Count: " Style="{StaticResource myTextBlockStyle}"/>
        <Slider Grid.Column="1" Style="{StaticResource mySliderStyle}" />

        <TextBlock Grid.Row="1" Text="Speedway Special Count: " Style="{StaticResource myTextBlockStyle}" />
        <Slider Grid.Column="1" Grid.Row="1" Style="{StaticResource mySliderStyle}" />
    </Grid>

</Grid>

请注意，网格将“ HorizontalAlignment”指定为“ Stretch”。有人可以帮我弄清楚为什么会这样吗？

Answer 1

如果您明确设置页面的宽度，它将永远不会拉伸：

删除Width="600"，或者您也可以设置MinWidth="600"。

<Page
x: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>
    <Style TargetType="TextBlock" x:Key="myTextBlockStyle">
        <Setter Property="FontSize" Value="24" />
        <Setter Property="Margin" Value="10, 0, 0, 0" />
    </Style>

Answer 2

我认为这可能可以解决问题，这是donuts.xaml的编辑版本：

<Page
x: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>
    <Style TargetType="TextBlock" x:Key="myTextBlockStyle">
        <Setter Property="FontSize" Value="24" />
        <Setter Property="Margin" Value="10, 0, 0, 0" />
    </Style>

    <Style TargetType="Slider" x:Key="mySliderStyle">
        <Setter Property="Width" Value="200" />
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Maximum" Value="24" />
        <Setter Property="Minimum" Value="0" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
    </Style>
</Page.Resources>

<Grid Background="Red" HorizontalAlignment="Stretch">
    <Grid.RowDefinitions>
        <RowDefinition Height="200"/>
        <RowDefinition />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Image Source="Assets/white-logo.png" Height="200" Width="200" HorizontalAlignment="Left" VerticalAlignment="Top"/>

    <Grid Grid.Row="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <TextBlock Text="Original Glazed Count: " Style="{StaticResource myTextBlockStyle}"/>
        <Slider Grid.Column="1" Style="{StaticResource mySliderStyle}" />

        <TextBlock Grid.Row="1" Text="Speedway Special Count: " Style="{StaticResource myTextBlockStyle}" />
        <Slider Grid.Column="1" Grid.Row="1" Style="{StaticResource mySliderStyle}" />
    </Grid>

</Grid>

在

中添加了此内容

<Grid Background="Red" HorizontalAlignment="Stretch">

部分：

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

我认为问题在于框架内的网格没有占用它可能获得的空间并且没有固定宽度，添加的columndefinition确实占用了所有可能的空间。

网格未使用所有可用空间

2 个答案: