Question

我目前已经创建了一个非常粗糙的用户界面，其中包含一个NavigationView和一个ItemsControl，用于显示UserData类中的信息。

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

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

我相信这与我设置的边距有关，但是我不确定如何最好地实现控件的动态移动。我相信导航视图已经预先准备好了所有这些，这就是为什么它随窗口大小移动。我想做类似的事情，以便在调整大小时遵循该控件。通常最好的方法是这样做。我见过VisualStateTriggers提到过几次，并且想知道这是否是尝试实现的最佳实践。我觉得好像是我需要调整大小而不是ItemsControl的Frame。是这样吗

我仍然想在每个边缘（底部除外）周围保持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

首先，您不应该设置框架的宽度，删除width属性，也不需要设置框架的HorizontalAlignment或VerticalAlignment，因为框架会自动将自身拉伸到可用空间

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

错误号3正在将 Margin =“ 30,0,0,0” 设置为您的 DataTemplate 中的网格，以保持所有3个面上的边距均匀，也许在此处设置 Margin =“ 8” 。

最后，我不知道为什么只使用 GridView 就能轻松使用ItemsControl了？

这是下面经过固定和完善的简单代码，可以完成您要实现的目标：

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

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

1 个答案: