UWP 根据屏幕大小调整控件布局/位置

Question

我目前创建了一个非常简陋的用户界面，其中包含一个 NavigationView 和一个显示来自 UserData 类的信息的 ItemsControl。

我正在研究实现动态界面的方法，该界面根据窗口大小调整框架内容的大小。我目前已将导航视图永久设置为最小作为设计选择，并添加了一个包含 ItemsControl 的框架。当我在非最大化模式下执行程序时，屏幕如下所示：

当我最大化页面时，控件按预期显示：

我相信这与我设置的边距有关，但我不确定如何最好地实现控件的动态移动。我相信导航视图已经预置了所有这些内容，这就是它随着窗口大小移动的原因。我想做类似的事情，以便在重新调整大小时控制跟随。 这样做通常是最好的方法。我看过几次提到的 VisualStateTriggers，想知道这是否是尝试实施的最佳实践。我觉得好像是我需要重新调整大小的 Frame 而不是 ItemsControl。是这样吗？

我仍然希望在每条边缘（底部除外）周围保持 40 像素的边距间距，以保持视觉效果。

对于那些需要它的人，这里是用于整体设计/布局的当前 XAML：

<Page
    x:Class="BudgetSheet.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:mux="using:Windows.UI.Xaml.Controls"    

    xmlns:data="using:BudgetSheet.Data"   

    RequestedTheme="Dark">

    <Page.Resources>
        <data:UserDataCollection x:Key="userDataCollection"/>
    </Page.Resources>

    <Frame Background="{StaticResource CustomAcrylicDarkBackground}">

        <!-- Navigation view Variable decleration -->
        <mux:NavigationView IsSettingsVisible="False" 
                            PaneTitle=" Budget Sheet Menu "                            
                            x:Name="NavView"                             
                            IsBackButtonVisible="Collapsed" 
                            PaneDisplayMode="LeftMinimal" 
                            AlwaysShowHeader="True"        
                            SelectionChanged="NavView_SelectionChanged">

            <!-- All navigation view Items nested within here -->
            <mux:NavigationView.MenuItems>
                <StackPanel Orientation="Horizontal" UseLayoutRounding="False">
                    <AppBarButton Icon="Page2" Margin="0, 2, 1, 0" Tag="New_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="NewFile_ClickAsync"/>
                    <AppBarButton Icon="OpenFile" Margin="1, 2, 0, 0" Tag="Open_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="OpenFile_ClickAsync"/>
                    <AppBarButton Icon="Save" Margin="1, 2, 0, 0" Tag="Save_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="SaveButton_ClickAsync"/>
                    <AppBarButton Icon="Setting" Margin="1, 2, 0, 0" Tag="Settings_Page" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="SettingsButton_Click"/>
                    <AppBarButton Icon="Calculator" Margin="1, 2, 0, 0" Tag="Calculator_Open" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="CalcButton_ClickAsync"/>
                </StackPanel>

                <mux:NavigationViewItemSeparator/>
                <mux:NavigationViewItem Name="HomeItem" 
                                        Content="HOME" 
                                        Tag="HOME_Page" 
                                        FontSize="22" 
                                        HorizontalAlignment="Stretch" 
                                        FontWeight="Bold" 
                                        Foreground="#b880fc"/>
                <NavigationViewItemSeparator/>

                <mux:NavigationViewItem Name="OverviewItem" 
                                        Content="ACCOUNT OVERVIEW" 
                                        Tag="OverView_Page" 
                                        FontSize="22" 
                                        HorizontalAlignment="Stretch" 
                                        FontWeight="Bold" 
                                        Foreground="#b880fc"/>

                <mux:NavigationViewItem Name="BillsItem" 
                                        Content="BILLS" 
                                        Tag="Bills_Page" 
                                        FontSize="22" 
                                        HorizontalAlignment="Stretch" 
                                        FontWeight="Bold" 
                                        Foreground="#b880fc"/>

                <mux:NavigationViewItem Name="PeopleItem" 
                                        Content="BILL PAYERS" 
                                        Tag="BillPayer_Page" 
                                        FontSize="22" 
                                        HorizontalAlignment="Stretch" 
                                        FontWeight="Bold" 
                                        Foreground="#b880fc"/>

                <mux:NavigationViewItem Name="TransfersItem" 
                                        Content="BANK TRANSFERS" 
                                        Tag="Transfers_Page" 
                                        FontSize="22" 
                                        HorizontalAlignment="Stretch" 
                                        FontWeight="Bold" 
                                        Foreground="#b880fc"/>

                <mux:NavigationViewItem Name="PayDatesItem" 
                                        Content="PAY DATES" 
                                        Tag="PayDates_Page" 
                                        FontSize="22" 
                                        HorizontalAlignment="Stretch" 
                                        FontWeight="Bold" 
                                        Foreground="#b880fc"/>
            </mux:NavigationView.MenuItems>


            <!-- Defining the ContentFrame Transition effect-->
            <Frame x:Name="ContentFrame" HorizontalAlignment="Left" Width="1920" Margin="0,0,0,0" VerticalAlignment="Stretch">
                <Frame.ContentTransitions>
                    <TransitionCollection>
                        <NavigationThemeTransition/>
                    </TransitionCollection>
                </Frame.ContentTransitions>


                <!-- All information display is in here. This displays the "Accounts at a Glance" control-->
                <ItemsControl ItemsSource="{StaticResource userDataCollection}" Margin="40,40,40,727">

                    <!-- Changing Orientation of VirtualizingStackPanel -->
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>

                    <!-- Change header for ItemsControl -->
                    <ItemsControl.Template>
                        <ControlTemplate>
                            <Border Background="{StaticResource CustomAcrylicDarkBackground}">
                                <StackPanel>
                                    <TextBlock Text="Accounts At A Glance" FontSize="28" Foreground="#b880fc" Padding="12"/>
                                    <ItemsPresenter/>
                                </StackPanel>
                            </Border>
                        </ControlTemplate>
                    </ItemsControl.Template>


                    <!-- Design template for each card-->
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Grid Width="240" Height="240" Background="Gray" Margin="30,0,0,0" VerticalAlignment="Center" Padding="4">

                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>

                                <TextBlock Grid.Row="0" Text="{Binding Name}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="24"/>
                                <TextBlock Grid.Row="1" Text="{Binding PayDate}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="14" />
                                <TextBlock Grid.Row="2" Text="{Binding NumberOfItems}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="14"/>
                            </Grid>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
                <!-- End of Frame Display-->
            </Frame>



            <NavigationView.PaneFooter>
                <Button x:Name="ChangeUser" Style="{StaticResource TextBlockButtonStyle}" Foreground="#b880fc" >
                    <StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
                        <SymbolIcon Symbol="Contact" Margin="8"/>
                        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Right">      
                                    Change User
                        </TextBlock>
                    </StackPanel>
                </Button>
            </NavigationView.PaneFooter>
        </mux:NavigationView>


    </Frame>
</Page>

对此给您带来的不便，我深表歉意

Answer 1

首先你不应该设置Frame的宽度，去掉width属性，你也不需要设置Frame的Horizo​​ntalAlignment或VerticalAlignment，因为frame会自动拉伸到可用空间.

您犯的第二个错误是为 ItemsControl 设置了狂野的边距，您的下边距太高了。删除边距，如果您想要一些边距，只需设置 Margin="12" （这将在所有 4 个边上设置 12 个边距）。

错误号 3 将 Margin="30,0,0,0" 设置为 DataTemplate 中的 Grid 保持所有 3 边的边距一致，也许在此处设置 Margin="8"。

最后，我不知道您为什么要使用 ItemsControl，因为您可以简单地使用简单易用的 GridView？

下面是固定和改进的更简单的代码，可以实现您想要实现的目标：

<!-- Defining the ContentFrame Transition effect-->
<Frame x:Name="ContentFrame">
    <Frame.ContentTransitions>
        <TransitionCollection>
            <NavigationThemeTransition/>
        </TransitionCollection>
    </Frame.ContentTransitions>


    <!-- All information display is in here. This displays the "Accounts at a Glance" control-->
    <GridView ItemsSource="{StaticResource userDataCollection}" Margin="12"
              Background="{StaticResource CustomAcrylicDarkBackground}">
        <GridView.Header>
            <TextBlock Text="Accounts At A Glance" FontSize="28" Foreground="#b880fc" Padding="12"/>
        </GridView.Header>

        <!-- Design template for each card-->
        <GridView.ItemTemplate>
            <DataTemplate>
                <Grid Width="240" Height="240" Background="Gray" Margin="12" Padding="4">

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <!--you dont need this 4th row below because you have only 3 textblocks and this 4th row with * is causing your content to be pushed upwards within a gridviewitem.-->
                        <!--<RowDefinition Height="*"/>-->
                    </Grid.RowDefinitions>

                    <TextBlock Grid.Row="0" Text="{Binding Name}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="24"/>
                    <TextBlock Grid.Row="1" Text="{Binding PayDate}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="14" />
                    <TextBlock Grid.Row="2" Text="{Binding NumberOfItems}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="14"/>
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
    <!-- End of Frame Display-->
</Frame>