如何根据 xaml 中的 windows 大小动态更改文本和图像的位置

Question

我想在用户调整应用程序大小时更改图像和文本的位置 window 并且宽度非常小。请参考随附的 gif，它显示了 Windows 设置应用程序的情况。我想做一些类似的事情。

Answer 1

I want to change the position of image and Text when the user resize the app window

您要找的是Adaptive layouts with visual states and state triggers。

当您的应用程序 window 增大或缩小超过一定数量时，您可以更改布局属性以重新定位、调整大小、重排、显示或替换 UI 的部分。您需要先为 UI 定义不同的视觉状态。然后在 window 宽度或 window 高度超过指定阈值时应用它们。上面的文档显示了针对不同 windows 大小更改视觉状态的不同方法。

常见的方式有两种：

处理 Window.SizeChanged Event in the code behind. Then call the VisualStateManager.GoToState method 以应用适当的视觉状态。

使用 XAML 中的 AdaptiveTrigger Class。当 window 的尺寸增大或缩小超过您定义的值时，将触发应用视觉状态。

 <VisualStateManager.VisualStateGroups>
     <VisualStateGroup>
         <VisualState>
             <VisualState.StateTriggers>
                 <!-- VisualState to be triggered when the
                      window width is >=640 effective pixels. -->
                 <AdaptiveTrigger MinWindowWidth="640" />
             </VisualState.StateTriggers>

             <VisualState.Setters>
                 <Setter Target="mySplitView.DisplayMode" Value="Inline"/>
                 <Setter Target="mySplitView.IsPaneOpen" Value="True"/>
             </VisualState.Setters>
         </VisualState>
     </VisualStateGroup>
 </VisualStateManager.VisualStateGroups>

请查看此文档以获取更多信息和代码示例：Adaptive layouts with visual states and state triggers。

如何根据 xaml 中的 windows 大小动态更改文本和图像的位置

How to dynamically change position of Text and Image depending upon windows size in xaml

xaml

uwp

winrt-xaml

uwp-xaml