填充父项的 UWP 网格 window

Question

我们正在进行一个学校项目，运行进入了死胡同。我们试图让 grid 填满整个父级 window 但我们根本做不到。

这是设计师展示的内容以及我们希望它的外观：

这就是我们运行它的样子：

这是我们的 xaml 代码：

<Grid x:Name="Grid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ActualWidth, RelativeSource = {RelativeSource Mode=TemplatedParent}}" Height="{Binding ActualHeight, RelativeSource ={RelativeSource Mode=TemplatedParent}}">
    <Grid.Background>
        <ImageBrush Stretch="UniformToFill" ImageSource="Assets/france_countryside.jpg" Opacity="0.4" />
    </Grid.Background>

    <!--Search section-->

    <RelativePanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ElementName=Grid,Path=ActualWidth}">
        <TextBlock Text="Find available apartment" FontSize="24" Margin="30" RelativePanel.AlignHorizontalCenterWithPanel="True" />
        <AutoSuggestBox Name="AutoSuggestBox" 
                        PlaceholderText="Search" 
                        Width="300" 
                        RelativePanel.AlignHorizontalCenterWithPanel="True" 
                        Margin="0,100,0,0"
                        TextChanged="AutoSuggestBox_OnTextChanged"
                        Header="Destination:"/>
        <CalendarDatePicker Name="CheckInPicker" Header="Check in:" RelativePanel.Below="AutoSuggestBox" RelativePanel.AlignLeftWith="AutoSuggestBox" Margin="0,40,0,0" PlaceholderText="select a date" IsTodayHighlighted="False"/>
        <CalendarDatePicker Name="CheckOutPicker" Header="Check out:" RelativePanel.Below="AutoSuggestBox" RelativePanel.AlignRightWith="AutoSuggestBox" Margin="0,40,0,0"/>
        <ComboBox x:Name="numberOfGuestsBox"  Width="127" RelativePanel.Below="CheckInPicker" RelativePanel.AlignLeftWith="AutoSuggestBox" Margin="0,30,0,0" PlaceholderText="Choose" Header="Guests:" FontSize="15">
            <x:String>1</x:String>
            <x:String>2</x:String>
            <x:String>3</x:String>
            <x:String>4</x:String>
            <x:String>5</x:String>
            <x:String>6</x:String>
            <x:String>7</x:String>
            <x:String>8</x:String>
            <x:String>9</x:String>
            <x:String>10</x:String>
        </ComboBox>
        <ToggleSwitch Header="Smoking allowed?" Margin="0,30,0,0" RelativePanel.Below="CheckOutPicker" RelativePanel.AlignLeftWith="CheckOutPicker" OffContent="Eew - No!" OnContent="Ya man!"/>
        <Button x:Name="SearchButton" Content="Search available apartments" RelativePanel.Below="numberOfGuestsBox" RelativePanel.AlignHorizontalCenterWithPanel="True" Margin="0,30,0,30" Width="300" Height="50" Background="MediumSeaGreen" Foreground="AliceBlue" Click="SearchButton_Click"/>
    </RelativePanel>
</Grid>

我们该怎么做？
我们已经尝试过拉伸对我们来说似乎一切。边距并不是一个真正的选项，因为我们希望它能够重新调整大小。

（对我们而言）网格似乎适合相关面板并缩小到该尺寸。我们有点确定，如果我们让网格适合 window 的屏幕尺寸，相关面板将放置在中间。提前感谢您的帮助！

编辑：

我们将 "views" 保存在可能导致问题的框架内。当我重新调整框架大小时，图像重新调整大小并且拆分视图移动到 "middle" 但缩放不适用于拆分视图或图片。

这里是拆分视图的代码：

    <!--Split View-->
    <SplitView Name="MySplitView" 
               Grid.Row="1" 
               DisplayMode="CompactOverlay" 
               OpenPaneLength="200" 
               CompactPaneLength="48" 
               HorizontalAlignment="Left">

        <!--SplitView Pane for icons-->
        <SplitView.Pane>
            <ListBox Name="IconsLIstBox" SelectionMode="Single" SelectionChanged="IconsLIstBox_OnSelectionChanged">
                <ListBoxItem Name="HomeListItem">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#xE10F;"/>
                        <TextBlock Text="Home" Margin="20,0,0,0"/>
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem Name="LocationsListBoxItem">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#xE1D1;"/>
                        <TextBlock Text="Locations" Margin="20,0,0,0"/>
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem Name="MostPopularListBoxItem">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#xE24A;"/>
                        <TextBlock Text="Most Popular" Margin="20,0,0,0"/>
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem Name="MapListBoxItem">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#xE128;"/>
                        <TextBlock Text="Map" Margin="20,0,0,0"/>
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem Name="ProfileListBoxItem">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#xE170;"/>
                        <TextBlock Text="Profile" Margin="20,0,0,0"/>
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem Name="ContactListBoxItem">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#xE166;"/>
                        <TextBlock Text="Contact" Margin="20,0,0,0"/>
                    </StackPanel>
                </ListBoxItem>
            </ListBox>
        </SplitView.Pane>

        <!--SplitView Content-->
        <Frame x:Name="MyFrame" HorizontalAlignment="Left" Width="1043"/>
    </SplitView>

</Grid>

我们试过将框架放在 splitview.content 内，但两者之间没有区别。

Answer 1

你很努力 :) 有时 XAML 可以很容易。

Grid 和 RelativePanel 等容器控件会自动缩放到其父元素的全部可用大小，而 StackPanel 等其他容器控件只会增长到其子元素所需的最小大小。只有后一种类型需要 HorizontalAlignment="Stretch" 和 VerticalAlignment="Stretch" 才能填满屏幕。永远不要绑定 Width/Height 属性。

这应该足以全屏显示（如果您的网格直接位于页面下方而不是 StackPanel 或类似控件中）：

<Grid x:Name="Grid">
    <Grid.Background>
        <ImageBrush Stretch="UniformToFill" ImageSource="Assets/france_countryside.jpg" Opacity="0.4" />
    </Grid.Background>

    <!--Search section-->

    <RelativePanel>
        ...
    </RelativePanel>
</Grid>

编辑回复问题中splitview添加的代码：

我注意到 SplitView 和 Frame 都有 HorizontAlignment="Left"。也就是说："instead of using my full screen, only use whatever size you minimally need and align to the left"。删除那些分配和 Frame 的宽度。当您想填充父控件时，请避免使用对齐方式 (left/right/center) 或大小 (width/height)。

<!--Split View-->
<SplitView Name="MySplitView" 
           Grid.Row="1" 
           DisplayMode="CompactOverlay" 
           OpenPaneLength="200" 
           CompactPaneLength="48">
....

    <!--SplitView Content-->
    <Frame x:Name="MyFrame" />
</SplitView>

填充父项的 UWP 网格 window

UWP grid to fill parent window

c#

grid

xaml

uwp