UWP Adjust Control layout/position 基于屏幕尺寸
UWP Adjust Control layout/position based on Screen Size
我目前创建了一个非常粗糙的用户界面，其中包含一个 NavigationView 和一个显示来自 UserData 的信息的 ItemsControl class。
我正在研究实现根据 windows 大小调整框架内容大小的动态界面的方法。我目前将导航视图永久设置为最小作为设计选择，并添加了一个包含 ItemsControl 的框架。当我在非最大化模式下执行程序时，屏幕如下所示：
当我最大化页面时，控件按预期显示：
我相信这与我设置的边距有关，但我不确定如何最好地实现控件的动态移动。我相信导航视图已将所有这些预先烘焙到其中，这就是它以 window 大小移动的原因。我想做类似的事情，以便在重新调整大小时控制跟随。
通常最好的方法是什么。我看到 VisualStateTriggers 被提到过几次，想知道这是否是尝试实施的最佳实践。我觉得好像我需要重新调整大小的是框架而不是 ItemsControl。是这样吗？
我仍然希望在每个边缘周围保持 40 像素的边距间距（底部除外）以保持视觉效果。
对于那些需要它的人，这里是当前 XAML 整体 design/Layout:
<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>
对于由此给您带来的不便，我们深表歉意
First of all you should not set the width of the Frame, remove the width property and you dont need to set HorizontalAlignment or VerticalAlignment of Frame as well, because frame automatically stretches itself to the available space.
the second mistake you are making is to set wild margins to the ItemsControl your lower margin is just too high. remove the margins and if you want some margin just set Margin="12" ( this will set 12 margin on all 4 sides ).
Mistake number 3 is setting the Margin="30,0,0,0" to the Grid within your DataTemplate keep the margin uniform on all 3 sides, maybe set Margin="8" here.
Last of all I dont know why you are using ItemsControl when you can simply use a GridView which is much straight forward and simpler to use?
下面是固定和改进的更简单的代码，可以实现您想要实现的目标：
<!-- 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>
我目前创建了一个非常粗糙的用户界面，其中包含一个 NavigationView 和一个显示来自 UserData 的信息的 ItemsControl class。
我正在研究实现根据 windows 大小调整框架内容大小的动态界面的方法。我目前将导航视图永久设置为最小作为设计选择，并添加了一个包含 ItemsControl 的框架。当我在非最大化模式下执行程序时，屏幕如下所示：
当我最大化页面时，控件按预期显示：
我相信这与我设置的边距有关，但我不确定如何最好地实现控件的动态移动。我相信导航视图已将所有这些预先烘焙到其中，这就是它以 window 大小移动的原因。我想做类似的事情，以便在重新调整大小时控制跟随。 通常最好的方法是什么。我看到 VisualStateTriggers 被提到过几次，想知道这是否是尝试实施的最佳实践。我觉得好像我需要重新调整大小的是框架而不是 ItemsControl。是这样吗？
我仍然希望在每个边缘周围保持 40 像素的边距间距（底部除外）以保持视觉效果。
对于那些需要它的人，这里是当前 XAML 整体 design/Layout:
<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>
对于由此给您带来的不便，我们深表歉意
First of all you should not set the width of the Frame, remove the width property and you dont need to set HorizontalAlignment or VerticalAlignment of Frame as well, because frame automatically stretches itself to the available space.
the second mistake you are making is to set wild margins to the ItemsControl your lower margin is just too high. remove the margins and if you want some margin just set Margin="12" ( this will set 12 margin on all 4 sides ).
Mistake number 3 is setting the Margin="30,0,0,0" to the Grid within your DataTemplate keep the margin uniform on all 3 sides, maybe set Margin="8" here.
Last of all I dont know why you are using ItemsControl when you can simply use a GridView which is much straight forward and simpler to use?
下面是固定和改进的更简单的代码，可以实现您想要实现的目标：
<!-- 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>