windows 10 - How to Scroll whole page vertically in XAML (UWP) when screen height getting decrease? -


i working on windows universal platform app. have query regarding screen height.i used visual state manage screen width app responsive when height of screen decrease time content of page cut , not display.so checked windows app , idea scroll viewer not have idea place scroll viewer app work.i used masterdetail layout.

i attached screenshot of app understand issue , attached code.

desktop screen proper height

small height screen

code:it sample code not whole code.

<grid background="white" x:name="maingrid">     <visualstatemanager.visualstategroups>         <visualstategroup x:name="pagesizestatesgroup"                           currentstatechanged="oncurrentstatechanged">             <visualstate x:name="mediumstate">                 <visualstate.statetriggers>                     <adaptivetrigger minwindowwidth="720"  />                 </visualstate.statetriggers>                 <visualstate.setters>                     <setter target="mastercolumn.width" value="350" />                     <setter target="detailcolumn.width" value="*"/>                 </visualstate.setters>             </visualstate>             <visualstate x:name="widestate">                 <visualstate.statetriggers>                     <adaptivetrigger minwindowwidth="1024"  />                 </visualstate.statetriggers>                 <visualstate.setters>                     <setter target="mastercolumn.width" value="600" />                     <setter target="detailcolumn.width" value="*"/>                 </visualstate.setters>             </visualstate>             <visualstate x:name="mobilestate">                 <visualstate.statetriggers>                     <adaptivetrigger minwindowwidth="320"  />                 </visualstate.statetriggers>                 <visualstate.setters>                     <setter target="mastercolumn.width" value="0"/>                     <setter target="detailcolumn.width" value="*"/>                 </visualstate.setters>             </visualstate>         </visualstategroup>      </visualstatemanager.visualstategroups>      <grid>         <grid.rowdefinitions>             <rowdefinition height="auto" />             <rowdefinition height="*" />         </grid.rowdefinitions>         <grid.columndefinitions>             <columndefinition x:name="mastercolumn" width="600" />             <columndefinition x:name="detailcolumn"  width="*" />         </grid.columndefinitions>          <stackpanel x:name="titlepanel" grid.row="0" grid.column="0">             <grid>                 <grid.columndefinitions>                     <columndefinition width="auto"/>                     <columndefinition width="*"/>                 </grid.columndefinitions>                  <image x:name="img_head" grid.column="0"  stretch="fill" height="47" margin="0,0,10,0"/>                  <stackpanel x:name="logo_txt_pnl" grid.column="1" verticalalignment="center" horizontalalignment="left">                     <textblock x:name="customer_title" .... verticalalignment="center"  horizontalalignment="center"/>                 </stackpanel>                  <image grid.row="0"  x:name="line_dashboard" grid.columnspan="2"   verticalalignment="bottom" height="8" />             </grid>         </stackpanel>          <stackpanel name="life_time_pnl" grid.row="1" grid.column="0">             <!--code grid , all-->         </stackpanel>          <stackpanel x:name="sales_report_pnl" grid.row="0" grid.column="1" verticalalignment="stretch" horizontalalignment="stretch">             <!--coding here-->         </stackpanel>          <stackpanel x:name="stackreport"  grid.row="1" grid.column="1" verticalalignment="top" >             <!--report coding here-->         </stackpanel>          <stackpanel x:name="stacklinechart" grid.row="1" grid.column="1" verticalalignment="center" margin="50,0,20,50"  horizontalalignment="stretch">             <!--chart coding-->         </stackpanel>          <stackpanel x:name="chartreportpnl" orientation="vertical" grid.row="1" grid.column="1"  verticalalignment="bottom" margin="0,0,0,2">             <!--report all-->         </stackpanel>      </grid> </grid> 

so suggest me how define scroll viewer app responsive per height.

just put elements scrollview control, it's automatically changing, when page large enough, there's no scrollbar on side , when becomes smaller, it's autmatically turn on.

example:

<scrollview grid.row="1" grid.column="0" >    <stackpanel name="life_time_pnl">       <!--code grid , all-->    </stackpanel> </scrollview>  <scrollview grid.row="0" grid.column="1">    <stackpanel x:name="sales_report_pnl" verticalalignment="stretch" horizontalalignment="stretch">       <!--coding here-->    </stackpanel> </scrollview> 

Comments

Popular posts from this blog

java - Suppress Jboss version details from HTTP error response -

gridview - Yii2 DataPorivider $totalSum for a column -

Sass watch command compiles .scss files before full sftp upload -