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

Question

当用户调整应用程序窗口的大小并且宽度非常小时，我想改变图像和文本的位置。请参阅随附的 gif，它显示了 Windows 设置应用程序发生的情况。我想做类似的事情。

Answer 1

当用户调整应用窗口大小时，我想改变图像和文本的位置

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

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

常用的方法有两种：

1. 在后面的代码中处理Window.SizeChanged Event。然后调用VisualStateManager.GoToState method 应用适当的视觉状态。

2. 在 XAML 中使用 AdaptiveTrigger Class。当窗口大小超过您定义的值时，将触发应用视觉状态。

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