如何在XAML中根据窗口大小动态调整文本与图片的位置

云上老周

2026-9-30

实现方案

你需要的是典型的响应式断点布局效果，核心逻辑是检测窗口宽度阈值，低于阈值时切换元素排布规则，和你提供的Windows设置应用的演示效果逻辑完全一致：
效果演示动图

实现思路

不管是Web端还是Windows桌面端应用，实现逻辑都相通：

默认宽屏状态下，图片和文本横向左右排布
监听窗口宽度变化，当宽度小于你设定的阈值时，将排布规则改为纵向上下排列
可选添加过渡动画，让布局切换过程更流畅

Web端实现示例（CSS + HTML）

<div class="display-container">
  <img src="你的图片路径" alt="展示图" class="display-img">
  <div class="text-area">
    <h3>功能标题</h3>
    <p>这里是对应的功能说明文本，支持任意内容填充</p>
  </div>
</div>

/* 宽屏默认布局 */
.display-container {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px;
  transition: all 0.25s ease; /* 加过渡实现丝滑切换效果 */
}
.display-img {
  width: 280px;
  flex-shrink: 0;
}
.text-area {
  flex: 1;
}

/* 小屏布局：宽度小于768px时触发 */
@media (max-width: 768px) {
  .display-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .display-img {
    width: 100%;
    max-width: 380px;
    align-self: center; /* 小屏幕下图片居中显示，可按需调整 */
  }
}