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.
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
Post a Comment