UWP 网格填充父窗口 [英] UWP grid to fill parent window

问题描述

我们正在开展一个学校项目，但遇到了死胡同.我们试图让 grid 填充整个父窗口，但我们根本无法这样做.

We are working on a school project and has run into a dead end. We are trying to make the grid fill the entire parent window but we are simply not able to do so.

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

This is what the designer shows and how we want it to look:

这是我们运行它时的样子:

And this is how it looks when we run it:

这是我们的 xaml 代码:

Here is our xaml code:

<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>

我们该怎么做?
我们已经尝试了在我们看来似乎一切都带有拉伸的东西.保证金并不是一个真正的选择，因为我们希望它能够重新调整大小.

How do we go about this?
We have tried what to us seems everything with stretching. Margin is not really an option as we want it to be able to re-size.

似乎(对我们而言)网格适合相关面板并缩小到该大小.我们有点确定，如果我们让网格适合窗口的屏幕大小，相关面板将被放置在中间.提前感谢您的帮助！

It seems like (to us) that the grid is fitting the relative panel and shrinks to that size. We are somewhat sure that if we get the grid to fit the screen size of the window the relative panel will be placed in the middle. Thanks for your help in advance!

我们将视图"保存在可能导致问题的框架内.当我重新调整框架大小时，图像会重新调整大小并且拆分视图移动到中间"，但缩放对拆分视图和图片都不起作用.

We hold the "views" inside a frame that might be causing the problem. When i re-size the frame the image re-sized and the splitview moves to the "middle" but the scaling doesn't work on the splitview nor the picture.

这是拆分视图的代码:

    <!--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 中，但两者之间没有区别.

We've tried with the frame being inside a splitview.content but there is no difference between the two.

推荐答案

您正在努力 :) 有时 XAML 可能很容易.

You're trying to hard :) Sometimes XAML can be easy.

Grid 和 RelativePanel 等容器控件会自动缩放到其父级的完整可用大小，而其他类似 StackPanel 的容器控件只会增长到最小其子元素所需的大小.只有后一种类型需要 Horizo​​ntalAlignment="Stretch" 和 VerticalAlignment="Stretch" 来填充屏幕.永远不要绑定 Width/Height 属性.

Container controls like Grid and RelativePanel automatically scale to the full available size of their parent, while others like StackPanel only grow to the minimal size needed for their child elements. Only the latter type needs HorizontalAlignment="Stretch" and VerticalAlignment="Stretch" to fill the screen. Never bind the Width/Height properties.

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

This should be enough to go full screen (if your grid is directly under a page and not in a StackPanel or similar control):

<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 都有 Horizo​​ntAlignment="Left".这就是说:不要使用我的全屏，只使用您最低需要的任何尺寸并与左侧对齐".删除这些分配和 Frame 的宽度.当您想要填充父控件时，请避免使用对齐方式(左/右/居中)或大小(宽度/高度).

I noticed both SplitView and Frame have HorizontAlignment="Left". That's saying: "instead of using my full screen, only use whatever size you minimally need and align to the left". Remove those assignments and the width of your Frame. Prevent using alignments (left/right/center) or sizes (width/height) when you want to fill your parent control.

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

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

这篇关于UWP 网格填充父窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！