Xamarin 表单 - 如何使 UI 在 UWP 中响应

Question

我正在 uwp 桌面应用程序中开发 DMS 应用程序。我开发了 design.but 我的设计不是 responsive.I 我浏览了那么多 UI 响应式文章，但我无法使 ui 响应式。:( 我已上传我的一个项目模块请检查一下，让我知道 it.I 想要制作 ui 响应式表单登录页面以添加新用户有什么问题。 link 下载 UWPUI 响应式 zip 文件。
提前致谢。:)

Answer 1

在UWP中，我们使用VisualStateManager and AdaptiveTrigger elements to create adaptive layouts. You could check the official Tutorial: Create adaptive layouts文档来学习如何使自适应UI。

XAML Controls Gallery 中有很多使用自适应布局的示例。您可以查看这些演示以供参考。

对于你的问题，你只是说你想要一个响应式 UI，但你并不是特定于自适应布局的特定问题。所以，我只能为您提供这些信息。如果您想获得更多帮助，您需要 post 一个关于使用 VisualStateManager 和 AdaptiveTrigger 制作响应式布局的具体问题。

Answer 2

Xavier Xie - MSFT 的回复是正确的。我检查了你的 link，如果你想让 UI 响应你的页面，你可以创建包含不同 VisualState 匹配不同 window 大小的 VisualStateGroups。当你调整 window 的大小时， AdaptiveTrigger 将被触发，然后你可以在 VisualState.Setters 中 re-layout ，例如：

<Page.Resources>
    <x:Double x:Key="NarrowMinWidth">0</x:Double>
    <x:Double x:Key="NormalMinWidth">521</x:Double>
    <x:Double x:Key="WideMinWidth">1200</x:Double>
</Page.Resources>

<Grid>
......
<VisualStateManager.VisualStateGroups>
     <VisualStateGroup x:Name="AdaptiveVisualStateGroup">
         <VisualState x:Name="VisualStateNarrow">
             <VisualState.StateTriggers>
                 <AdaptiveTrigger MinWindowWidth="{StaticResource NarrowMinWidth}" />
             </VisualState.StateTriggers>
             <VisualState.Setters>
                 <!--  TODO: change properties for narrow view  -->
                 <Setter Target="UserNameSTP.(Grid.Column)" Value="4" />
                 <Setter Target="UserNameSTP.(Grid.Row)" Value="3" />
                 <Setter Target="UserNameTBK.Margin" Value="10,-25,0,0" />
                 <Setter Target="UserNameSTP.Width" Value="80" />

             </VisualState.Setters>
         </VisualState>
         <VisualState x:Name="VisualStateNormal">
             <VisualState.StateTriggers>
                 <AdaptiveTrigger MinWindowWidth="{StaticResource NormalMinWidth}" />
             </VisualState.StateTriggers>
             <VisualState.Setters>
                 <!--  TODO: change properties for normal view  -->
                 <Setter Target="UserNameTBK.Text" Value="NormalMinWidth" />
             </VisualState.Setters>
         </VisualState>
         <VisualState x:Name="VisualStateWide">
             <VisualState.StateTriggers>
                 <AdaptiveTrigger MinWindowWidth="{StaticResource WideMinWidth}" />
             </VisualState.StateTriggers>
             <VisualState.Setters>
                 <!--  TODO: change properties for wide view  -->
                 <Setter Target="UserNameTBK.Text" Value="WideMinWidth" />
             </VisualState.Setters>
         </VisualState>
     </VisualStateGroup>
 </VisualStateManager.VisualStateGroups> 
......

</Grid>

Xamarin 表单 - 如何使 UI 在 UWP 中响应

Xamarin Form - How to make UI Responsive in UWP

windows-10-universal

uwp-xaml

xamarin.uwp