uwp - Show ListView items below the the View -
i create transparency effect in groove music app's control bar shown in picture. scroll bar seems end above blue bar seems actual listview doesn't go below bar. how possible make invisible content of listview/scrollviewer hidden below visible again?
as @avk said, implement ui shown in picture, can put scrollviewer , blue bar in grid first, set blue bar's verticalalignment bottom , give opacity. blue bar should have fixed height.
then key point here setting margin content , verticalscrollbar in scrollviewer. verticalscrollbar in template of scrollviewer. modify template of scrollviewer, can select "[scrollviewer]" in "document outline" , right click, select "edit templates" → "edit copy...". in template, can set margin verticalscrollbar like:
<scrollbar x:name="verticalscrollbar" grid.column="1" margin="0,0,0,64" horizontalalignment="right" istabstop="false" maximum="{templatebinding scrollableheight}" orientation="vertical" visibility="{templatebinding computedverticalscrollbarvisibility}" value="{templatebinding verticaloffset}" viewportsize="{templatebinding viewportheight}"/> following complete sample demonstrates this:
<page x:class="uwpapp.mainpage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="using:uwpapp" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:ignorable="d"> <page.resources> <style x:key="scrollviewerstyle1" targettype="scrollviewer"> <setter property="horizontalscrollmode" value="auto"/> <setter property="verticalscrollmode" value="auto"/> <setter property="ishorizontalrailenabled" value="true"/> <setter property="isverticalrailenabled" value="true"/> <setter property="istabstop" value="false"/> <setter property="zoommode" value="disabled"/> <setter property="horizontalcontentalignment" value="left"/> <setter property="verticalcontentalignment" value="top"/> <setter property="verticalscrollbarvisibility" value="visible"/> <setter property="padding" value="0"/> <setter property="borderthickness" value="0"/> <setter property="borderbrush" value="transparent"/> <setter property="background" value="transparent"/> <setter property="usesystemfocusvisuals" value="true"/> <setter property="template"> <setter.value> <controltemplate targettype="scrollviewer"> <border borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}"> <visualstatemanager.visualstategroups> <visualstategroup x:name="scrollingindicatorstates"> <visualstategroup.transitions> <visualtransition from="mouseindicator" to="noindicator"> <storyboard> <fadeoutthemeanimation begintime="0:0:3" targetname="scrollbarseparator"/> <objectanimationusingkeyframes storyboard.targetproperty="indicatormode" storyboard.targetname="verticalscrollbar"> <discreteobjectkeyframe keytime="0:0:3"> <discreteobjectkeyframe.value> <scrollingindicatormode>none</scrollingindicatormode> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="indicatormode" storyboard.targetname="horizontalscrollbar"> <discreteobjectkeyframe keytime="0:0:3"> <discreteobjectkeyframe.value> <scrollingindicatormode>none</scrollingindicatormode> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> </storyboard> </visualtransition> <visualtransition from="touchindicator" to="noindicator"> <storyboard> <fadeoutthemeanimation targetname="scrollbarseparator"/> <objectanimationusingkeyframes storyboard.targetproperty="indicatormode" storyboard.targetname="verticalscrollbar"> <discreteobjectkeyframe keytime="0:0:0.5"> <discreteobjectkeyframe.value> <scrollingindicatormode>none</scrollingindicatormode> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetproperty="indicatormode" storyboard.targetname="horizontalscrollbar"> <discreteobjectkeyframe keytime="0:0:0.5"> <discreteobjectkeyframe.value> <scrollingindicatormode>none</scrollingindicatormode> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> </storyboard> </visualtransition> </visualstategroup.transitions> <visualstate x:name="noindicator"> <storyboard> <fadeoutthemeanimation targetname="scrollbarseparator"/> </storyboard> </visualstate> <visualstate x:name="touchindicator"> <storyboard> <fadeoutthemeanimation targetname="scrollbarseparator"/> <objectanimationusingkeyframes duration="0" storyboard.targetproperty="indicatormode" storyboard.targetname="verticalscrollbar"> <discreteobjectkeyframe keytime="0"> <discreteobjectkeyframe.value> <scrollingindicatormode>touchindicator</scrollingindicatormode> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> <objectanimationusingkeyframes duration="0" storyboard.targetproperty="indicatormode" storyboard.targetname="horizontalscrollbar"> <discreteobjectkeyframe keytime="0"> <discreteobjectkeyframe.value> <scrollingindicatormode>touchindicator</scrollingindicatormode> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="mouseindicator"> <storyboard> <fadeinthemeanimation targetname="scrollbarseparator"/> <objectanimationusingkeyframes duration="0" storyboard.targetproperty="indicatormode" storyboard.targetname="verticalscrollbar"> <discreteobjectkeyframe keytime="0"> <discreteobjectkeyframe.value> <scrollingindicatormode>mouseindicator</scrollingindicatormode> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> <objectanimationusingkeyframes duration="0" storyboard.targetproperty="indicatormode" storyboard.targetname="horizontalscrollbar"> <discreteobjectkeyframe keytime="0"> <discreteobjectkeyframe.value> <scrollingindicatormode>mouseindicator</scrollingindicatormode> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> </visualstatemanager.visualstategroups> <grid background="{templatebinding background}"> <grid.columndefinitions> <columndefinition width="*"/> <columndefinition width="auto"/> </grid.columndefinitions> <grid.rowdefinitions> <rowdefinition height="*"/> <rowdefinition height="auto"/> </grid.rowdefinitions> <scrollcontentpresenter x:name="scrollcontentpresenter" grid.columnspan="2" contenttemplate="{templatebinding contenttemplate}" margin="{templatebinding padding}" grid.rowspan="2"/> <grid grid.columnspan="2" grid.rowspan="2"/> <scrollbar x:name="verticalscrollbar" grid.column="1" margin="0,0,0,64" horizontalalignment="right" istabstop="false" maximum="{templatebinding scrollableheight}" orientation="vertical" visibility="{templatebinding computedverticalscrollbarvisibility}" value="{templatebinding verticaloffset}" viewportsize="{templatebinding viewportheight}"/> <scrollbar x:name="horizontalscrollbar" istabstop="false" maximum="{templatebinding scrollablewidth}" orientation="horizontal" grid.row="1" visibility="{templatebinding computedhorizontalscrollbarvisibility}" value="{templatebinding horizontaloffset}" viewportsize="{templatebinding viewportwidth}"/> <border x:name="scrollbarseparator" background="{themeresource scrollviewerscrollbarseparatorbackground}" grid.column="1" grid.row="1"/> </grid> </border> </controltemplate> </setter.value> </setter> </style> </page.resources> <grid background="{themeresource applicationpagebackgroundthemebrush}"> <scrollviewer style="{staticresource scrollviewerstyle1}"> <stackpanel margin="0,0,0,64"> <stackpanel.resources> <style targettype="textblock"> <setter property="fontsize" value="15" /> <setter property="margin" value="15" /> </style> </stackpanel.resources> <textblock>test 1</textblock> <textblock>test 2</textblock> <textblock>test 3</textblock> <textblock>test 4</textblock> <textblock>test 5</textblock> <textblock>test 6</textblock> <textblock>test 7</textblock> <textblock>test 8</textblock> <textblock>test 9</textblock> <textblock>test 10</textblock> <textblock>test 11</textblock> <textblock>test 12</textblock> </stackpanel> </scrollviewer> <rectangle height="64" verticalalignment="bottom" fill="#ff0085ff" opacity="0.8" /> </grid> </page> and looks like
Comments
Post a Comment