时间戳

首页 > 解决方案 > Xamarin Form - 如何在 UWP 中使 UI 响应

windows-10-universal - Xamarin Form - 如何在 UWP 中使 UI 响应

问题描述

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

标签： windows-10-universaluwp-xamlxamarin.uwp

解决方案

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>

推荐阅读