0

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

2 Answers2

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>
Nico Zhu
  • 32,367
  • 2
  • 15
  • 36
  • Thank you fro your valuable replay would you please do this for Header and add user page then i will got the idea. so i can apply this for all pages please do this once :( because i cant able to make my header responsive. And for add new user page there is so many field so how to manage that all field ? –  Jul 24 '19 at 07:55
  • Please refer this [tutorial](https://learn.microsoft.com/en-us/windows/uwp/design/basics/xaml-basics-adaptive-layout) – Nico Zhu Jul 24 '19 at 08:18
  • I have declared so many columns is it a good or not .for add user form and for header –  Jul 24 '19 at 09:01
  • do you have any solution for this [link](https://stackoverflow.com/q/57177253/11362349) –  Jul 24 '19 at 09:02
  • would you please post code for add user page so i got the idea and apply logic for all other pages :( –  Jul 29 '19 at 06:26
  • @ketan, sorry ketan, I have provided tutorial for this issue and post instance code, please edit the other page base on your requirement, we could not help op achieve all the feature, this does not meet so policy. – Nico Zhu Aug 07 '19 at 02:48
0

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.

Xie Steven
  • 8,544
  • 1
  • 9
  • 23
  • thank you for your valuable reply would you please suggest me in my uploaded project. how to implement this for login or user form –  Jul 24 '19 at 04:57