Xamarin Form - 如何在 UWP 中使 UI 响应 [英] Xamarin Form - How to make UI Responsive in UWP

问题描述

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

I am developing the DMS application in uwp desktop application. I have developed the design.but my designs are not responsive.I am gone through so many UI responsive articles but i am not able to make the ui responsive.:( I am uploaded my one project module please go through it and let me know whats wrong in it.I want to make ui responsive form login page to add new user. link Download the UWPUIResponsive zip file.
thanks in advance.:)

推荐答案

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

Xavier Xie - MSFT's reply is correct. And I checked your link, if you want to make UI responsive for your page, You could create VisualStateGroups that contains different VisualState match different window size. When you resize the window, the AdaptiveTrigger will be triggered then you we could re-layout in the VisualState.Setters , For example:

<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 Form - 如何在 UWP 中使 UI 响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！