Xamarin Form - How to make UI Responsive in UWP

Question

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.:)

Answer 1

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>

Answer 2

In UWP, we use the VisualStateManager and AdaptiveTrigger elements to create adaptive layouts. You could check the official Tutorial: Create adaptive layouts document to learn how to make adaptive UI.

There're many samples using adaptive layouts in XAML Controls Gallery. You could check these demos for reference.

For your question, you just said you want a responsive UI, but you're not specific to a particular issue about adaptive layout. So, I could only provide you with this information. If you want to get more help, you need to post a specific question about using VisualStateManager and AdaptiveTrigger to make responsive layouts.