Xamarin Form - 如何在 UWP 中使 UI 响应答案

【问题标题】：Xamarin Form - How to make UI Responsive in UWPXamarin Form - 如何在 UWP 中使 UI 响应
【发布时间】：2019-12-01 08:18:48
【问题描述】：

我正在开发 uwp 桌面应用程序中的 DMS 应用程序。我已经开发了设计。但是我的设计没有响应性。我浏览了很多 UI 响应式文章，但我无法使 ui 响应式。:(我上传了我的一个项目模块，请通过它并让我知道有什么问题。我想让 ui 响应表单登录页面添加新用户。 link 下载 UWPUIResponsive zip 文件。
在此先感谢。:)

【问题讨论】：

标签： windows-10-universal uwp-xaml xamarin.uwp

【解决方案1】：

在 UWP 中，我们使用 VisualStateManager 和 AdaptiveTrigger 元素来创建自适应布局。您可以查看官方Tutorial: Create adaptive layouts 文档了解如何制作自适应 UI。

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

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

【讨论】：

感谢您的宝贵回复，请您在我上传的项目中建议我。如何为登录或用户表单实现此功能

【解决方案2】：

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

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

【讨论】：

感谢您宝贵的重播，请您为标头执行此操作并添加用户页面，然后我会明白的。所以我可以将此应用于所有页面，请执行一次 :( 因为我无法使我的标题响应。并且对于添加新用户页面有这么多字段那么如何管理所有字段？
请参考tutorial
我已经声明了这么多列是好还是不好。添加用户表单和标题
你有什么解决办法link
能否请您发布添加用户页面的代码，以便我知道并为所有其他页面应用逻辑:(