Question

我们正在开展一个学校项目并且已陷入死胡同。我们试图让grid填充整个父窗口，但我们根本无法这样做。

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

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

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

我们如何解决这个问题？我们已经尝试过什么对我们来说似乎是拉伸的一切保证金不是真正的选择，因为我们希望它能够重新调整大小。

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

修改

我们持有＆＃34;观点＆＃34;在可能导致问题的框架内。当我重新调整框架的大小时，图像会重新调整大小，而分割视图会移动到中间区域。但缩放不适用于splitview和图片。

以下是splitview的代码：

    <!--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"来填充屏幕。永远不要绑定宽度/高度属性。

这应足以全屏显示（如果您的网格直接位于某个页面下，而不是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"。这就是说：“而不是使用我的全屏，只使用你最不需要的任何尺寸并与左边对齐”。删除这些作业和Frame的宽度。当您想要填充父控件时，防止使用对齐（左/右/中心）或大小（宽度/高度）。

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

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

UWP网格填充父窗口

1 个答案: