c# - Scrolling ListBox with buttons WPF -
how can scroll sections using buttons in wpf?
i have next listbox:
i need each arrow (buttons) left & right perform scroll action (back & next)
here code of listbox (since code of buttons not important pasting listbox code)
<listbox grid.column="1" grid.row="1" name="categorieslistbox" scrollviewer.verticalscrollbarvisibility="disabled" scrollviewer.horizontalscrollbarvisibility="hidden" background="#00ffffff" borderbrush="{x:null}"> <listbox.itemspanel> <itemspaneltemplate> <uniformgrid rows="2" verticalalignment="center" background="#00ffffff"/> </itemspaneltemplate> </listbox.itemspanel> <listbox.itemcontainerstyle> <style targettype="{x:type listboxitem}"> <setter property="focusable" value="false"/> </style> </listbox.itemcontainerstyle> <listbox.itemtemplate> <datatemplate> <button height="{binding elementname=dummygrid, path=actualheight}" width="{binding elementname=dummygrid, path=actualwidth}" margin="2"> <button.content> <viewbox stretch="uniform" horizontalalignment="stretch" verticalalignment="stretch"> <textblock foreground="white" fontfamily="/bundypos;component/fonts/#helveticarounded" textalignment="center" margin="7" text="{binding a}"></textblock> </viewbox> </button.content> <button.style> <style targettype="{x:type button}"> <setter property="background" value="{binding color}"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type button}"> <border cornerradius="15" borderbrush="white" borderthickness="2,2,2,2" background="{templatebinding background}"> <contentpresenter horizontalalignment="center" verticalalignment="center"/> </border> </controltemplate> </setter.value> </setter> <style.triggers> <trigger property="ismouseover" value="true"> <setter property="background" value="#3cb878"/> <setter property="foreground" value="black"/> </trigger> </style.triggers> </style> </button.style> </button> </datatemplate> </listbox.itemtemplate> </listbox> i cant perform listbox.scrollintoview(categoryitem[position]); because listbox have different row or values per row. there function "scrolltohorizontaloffset"?
try code..it referance
create window in wpf this...
<window x:class="autoscrolllistbox.mainwindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:autoscrolllistbox" title="autoscrolllistbox" height="600" width="800" windowstartuplocation="centerscreen" > <window.resources> <resourcedictionary> <resourcedictionary.mergeddictionaries> <resourcedictionary source="autoscrolllistboxdictionary.xaml"/> </resourcedictionary.mergeddictionaries> <lineargradientbrush x:key="equipmentitembackground" endpoint="0.5,1" startpoint="0.5,0"> <gradientstop color="#ff223b84" offset="1"/> <gradientstop color="#ff4b94ec" offset="0.7"/> </lineargradientbrush> <lineargradientbrush x:key="equipmentitemselectedbackground" endpoint="0.5,1" startpoint="0.5,0"> <gradientstop color="#ff1c9b37" offset="1"/> <gradientstop color="#ff26de2c" offset="0.7"/> </lineargradientbrush> <datatemplate datatype="{x:type local:equipmentitem}" > <border x:name="border" borderbrush="black" borderthickness="1" cornerradius="4" width="84" height="68" verticalalignment="center" horizontalalignment="center" padding="1" background="{staticresource equipmentitembackground}"> <stackpanel > <textblock text="{binding name}" foreground="white" fontsize="12" textalignment="left" verticalalignment="center" horizontalalignment="center" margin="5"/> <textblock text="{binding campaignname}" foreground="white" fontsize="12" textalignment="left" verticalalignment="center" horizontalalignment="center" margin="5"/> </stackpanel> </border> <datatemplate.triggers> <datatrigger binding="{binding isselected, relativesource={relativesource findancestor, ancestortype={x:type listboxitem}}}" value="true" > <setter targetname="border" property="background" value="{staticresource equipmentitemselectedbackground}" /> </datatrigger> </datatemplate.triggers> </datatemplate> </resourcedictionary> </window.resources> <grid> <tabcontrol margin="0" name="tabcontrol1" verticalalignment="stretch"> <tabitem header="horizontal listbox" > <stackpanel> <listbox x:name="horizontallistbox" selectionmode="extended" style="{ staticresource listboxwithautoscroll_horizontal }" selector.selectionchanged="horizontallistbox_selectionchanged"> </listbox> <listbox x:name="horizontalselecteditemslistbox" height="100" style="{staticresource listboxwithautoscroll_horizontal}" > </listbox> </stackpanel> </tabitem> <tabitem header="vertical listbox" > <stackpanel orientation="horizontal" horizontalalignment="center"> <listbox x:name="verticallistbox" selectionmode="extended" style="{staticresource listboxwithautoscroll_vertical}" selector.selectionchanged="verticallistbox_selectionchanged"> </listbox> <listbox x:name="verticalselecteditemslistbox" width="100" style="{staticresource listboxwithautoscroll_vertical}" itemcontainerstyle="{staticresource customlistboxitem}" > </listbox> </stackpanel> </tabitem> </tabcontrol> </grid> look cs code of above window
using system.text; using system.windows; using system.windows.controls; using system.windows.data; using system.windows.documents; using system.windows.input; using system.windows.media; using system.windows.media.imaging; using system.windows.navigation; using system.windows.shapes; using system.collections.objectmodel; namespace autoscrolllistbox { public partial class mainwindow : window { observablecollection<equipmentitem> m_selectedequipmenthorizontal = new observablecollection<equipmentitem>(); observablecollection<equipmentitem> m_selectedequipmentvertical = new observablecollection<equipmentitem>(); public mainwindow() { initializecomponent(); } protected override void oninitialized( eventargs e ) { base.oninitialized( e ); observablecollection<equipmentitem> equipmentlist1 = new observablecollection<equipmentitem>(); this.horizontallistbox.itemssource = equipmentlist1; createequipments( equipmentlist1, "tank-" ); this.horizontalselecteditemslistbox.itemssource = m_selectedequipmenthorizontal; observablecollection<equipmentitem> equipmentlist2 = new observablecollection<equipmentitem>(); this.verticallistbox.itemssource = equipmentlist2; createequipments( equipmentlist2, "tank-" ); this.verticalselecteditemslistbox.itemssource = m_selectedequipmentvertical; } private observablecollection<equipmentitem> createequipments( observablecollection<equipmentitem> equipmentlist, string prefix ) { int maxitemcount = 20; for( int = 0; < maxitemcount; i++ ) { equipmentlist.add( new equipmentitem() { name = prefix + i.tostring(), campaignname = "batch_ " + i.tostring() } ); } return equipmentlist; } private void horizontallistbox_selectionchanged( object sender, selectionchangedeventargs e ) { if( e.addeditems.count > 0 ) { foreach( equipmentitem item in e.addeditems ) { m_selectedequipmenthorizontal.add( item ); } } if( e.removeditems.count > 0 ) { foreach( equipmentitem item in e.removeditems ) { m_selectedequipmenthorizontal.remove( item ); } } } private void verticallistbox_selectionchanged( object sender, selectionchangedeventargs e ) { if( e.addeditems.count > 0 ) { foreach( equipmentitem item in e.addeditems ) { m_selectedequipmentvertical.add( item ); } } if( e.removeditems.count > 0 ) { foreach( equipmentitem item in e.removeditems ) { m_selectedequipmentvertical.remove( item ); } } } } } then create resourcedirectory change style of window, this
<resourcedictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <!-- fill brushes --> <solidcolorbrush x:key="normalbrush" color="#ffcccccc"/> <solidcolorbrush x:key="pressedbrush" color="#ffeeeeee"/> <solidcolorbrush x:key="disabledforegroundbrush" color="#888" /> <!-- border brushes --> <lineargradientbrush x:key="normalborderbrush" startpoint="0,0" endpoint="0,1"> <gradientbrush.gradientstops> <gradientstopcollection> <gradientstop color="#ccc" offset="0.0"/> <gradientstop color="#444" offset="1.0"/> </gradientstopcollection> </gradientbrush.gradientstops> </lineargradientbrush> <style x:key="scrollbarlinebutton" targettype="{x:type repeatbutton}"> <setter property="snapstodevicepixels" value="true"/> <setter property="overridesdefaultstyle" value="true"/> <setter property="focusable" value="false"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type repeatbutton}"> <border name="border" cornerradius="2" background="{staticresource normalbrush}" borderbrush="{staticresource normalborderbrush}" > <path horizontalalignment="center" verticalalignment="center" fill="gray" data="{binding path=content, relativesource={relativesource templatedparent}}" opacity="{binding path=opacity, relativesource={relativesource templatedparent}}" /> </border> <controltemplate.triggers> <trigger property="ispressed" value="true"> <setter targetname="border" property="background" value="{staticresource pressedbrush}" /> </trigger> <trigger property="isenabled" value="false"> <setter property="foreground" value="{staticresource disabledforegroundbrush}"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style> <style x:key="scrollbarpagebutton" targettype="{x:type repeatbutton}"> <setter property="snapstodevicepixels" value="true"/> <setter property="overridesdefaultstyle" value="true"/> <setter property="istabstop" value="false"/> <setter property="focusable" value="false"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type repeatbutton}"> <border background="transparent" /> </controltemplate> </setter.value> </setter> </style> <style x:key="scrollbarthumb" targettype="{x:type thumb}"> <setter property="snapstodevicepixels" value="true"/> <setter property="overridesdefaultstyle" value="true"/> <setter property="istabstop" value="false"/> <setter property="focusable" value="false"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type thumb}"> <border cornerradius="2" background="{templatebinding background}" borderbrush="{templatebinding borderbrush}" borderthickness="1" /> </controltemplate> </setter.value> </setter> </style> <style x:key="customlistboxitem" targettype="{x:type listboxitem}"> <setter property="snapstodevicepixels" value="true"/> <setter property="overridesdefaultstyle" value="true"/> <setter property="template"> <setter.value> <controltemplate targettype="listboxitem"> <border name="border" padding="1" snapstodevicepixels="true"> <contentpresenter /> </border> </controltemplate> </setter.value> </setter> </style> <!--listboxwithautoscroll_horizontal--> <style x:key="listboxwithautoscroll_horizontal" targettype="{x:type listbox}" > <setter property="snapstodevicepixels" value="true"/> <setter property="overridesdefaultstyle" value="true"/> <setter property="scrollviewer.horizontalscrollbarvisibility" value="auto"/> <setter property="scrollviewer.verticalscrollbarvisibility" value="auto"/> <setter property="scrollviewer.cancontentscroll" value="true"/> <setter property="background" value="transparent"/> <setter property="itemcontainerstyle" value="{staticresource customlistboxitem}"/> <setter property="template"> <setter.value > <controltemplate> <grid > <scrollviewer x:name="scrollviewer" > <scrollviewer.template> <controltemplate targettype="{x:type scrollviewer}" > <grid> <scrollbar x:name="part_horizontalscrollbar" orientation="horizontal" value="{templatebinding horizontaloffset}" maximum="{templatebinding scrollablewidth}" viewportsize="{templatebinding viewportwidth}" visibility="{templatebinding computedhorizontalscrollbarvisibility}" height="{binding height, elementname=panel}"> <scrollbar.template> <controltemplate> <track x:name="part_track"> <track.decreaserepeatbutton> <repeatbutton command="scrollbar.pageleftcommand" style="{staticresource scrollbarpagebutton}"/> </track.decreaserepeatbutton> <track.increaserepeatbutton> <repeatbutton command="scrollbar.pagerightcommand" style="{staticresource scrollbarpagebutton}"/> </track.increaserepeatbutton> <track.thumb> <thumb style="{staticresource scrollbarthumb}" background="gray" opacity="0.8" margin="0,-1" /> </track.thumb> </track> </controltemplate> </scrollbar.template> </scrollbar> <scrollcontentpresenter margin="0,2" height="auto" verticalalignment="center"/> </grid> </controltemplate> </scrollviewer.template> <itemspresenter/> </scrollviewer> <grid x:name="panel" margin="0,2" > <grid.columndefinitions> <columndefinition width="auto"/> <columndefinition width="*"/> <columndefinition width="auto"/> </grid.columndefinitions> <repeatbutton x:name="lineleftbutton" grid.column="0" width="20" opacity="0" visibility="collapsed" style="{staticresource scrollbarlinebutton}" content="m 8 0 l 8 32 l 0 16 z" command="{x:static scrollbar.lineleftcommand}" commandtarget="{binding elementname=scrollviewer}" clickmode="hover" /> <repeatbutton x:name="linerightbutton" grid.column="2" width="20" opacity="0" visibility="collapsed" style="{staticresource scrollbarlinebutton}" content="m 0 0 l 8 16 l 0 32 z" command="{x:static scrollbar.linerightcommand}" commandtarget="{binding elementname=scrollviewer}" clickmode="hover"/> </grid> </grid> <controltemplate.triggers> <multitrigger> <multitrigger.conditions> <condition property="ismouseover" value="true"/> <condition property="computedhorizontalscrollbarvisibility" sourcename="scrollviewer" value="visible"/> </multitrigger.conditions> <multitrigger.setters> <setter targetname="lineleftbutton" property="visibility" value="visible" /> <setter targetname="linerightbutton" property="visibility" value="visible" /> </multitrigger.setters> <multitrigger.enteractions> <beginstoryboard> <storyboard> <doubleanimation storyboard.targetname="lineleftbutton" storyboard.targetproperty="opacity" to="0.8" duration="0:0:0.25"/> <doubleanimation storyboard.targetname="linerightbutton" storyboard.targetproperty="opacity" to="0.8" duration="0:0:0.25"/> </storyboard> </beginstoryboard> </multitrigger.enteractions> <multitrigger.exitactions> <beginstoryboard> <storyboard> <doubleanimation storyboard.targetname="lineleftbutton" storyboard.targetproperty="opacity" to="0" duration="0:0:0.25"/> <doubleanimation storyboard.targetname="linerightbutton" storyboard.targetproperty="opacity" to="0" duration="0:0:0.25"/> </storyboard> </beginstoryboard> </multitrigger.exitactions> </multitrigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> <setter property="itemspanel"> <setter.value > <itemspaneltemplate> <virtualizingstackpanel orientation="horizontal"/> </itemspaneltemplate> </setter.value> </setter> </style> <!--listboxwithautoscroll_vertical--> <style x:key="listboxwithautoscroll_vertical" targettype="{x:type listbox}" > <setter property="snapstodevicepixels" value="true"/> <setter property="overridesdefaultstyle" value="true"/> <setter property="scrollviewer.horizontalscrollbarvisibility" value="auto"/> <setter property="scrollviewer.verticalscrollbarvisibility" value="auto"/> <setter property="scrollviewer.cancontentscroll" value="true"/> <setter property="background" value="transparent"/> <setter property="itemcontainerstyle" value="{staticresource customlistboxitem}"/> <setter property="template"> <setter.value > <controltemplate> <grid > <scrollviewer x:name="scrollviewer" > <scrollviewer.template> <controltemplate targettype="{x:type scrollviewer}" > <grid> <scrollbar x:name="part_verticalscrollbar" orientation="vertical" value="{templatebinding verticaloffset}" maximum="{templatebinding scrollableheight}" viewportsize="{templatebinding viewportheight}" visibility="{templatebinding computedverticalscrollbarvisibility}" width="{binding width, elementname=panel}"> <scrollbar.template> <controltemplate> <track x:name="part_track" isdirectionreversed="true"> <track.decreaserepeatbutton> <repeatbutton command="scrollbar.pageupcommand" style="{staticresource scrollbarpagebutton}"/> </track.decreaserepeatbutton> <track.increaserepeatbutton> <repeatbutton command="scrollbar.pagedowncommand" style="{staticresource scrollbarpagebutton}"/> </track.increaserepeatbutton> <track.thumb> <thumb style="{staticresource scrollbarthumb}" background="gray" opacity="0.8" margin="-1,0" /> </track.thumb> </track> </controltemplate> </scrollbar.template> </scrollbar> <scrollcontentpresenter margin="2,0" width="auto" horizontalalignment="center"/> </grid> </controltemplate> </scrollviewer.template> <itemspresenter/> </scrollviewer> <grid x:name="panel" margin="2,0"> <grid.rowdefinitions> <rowdefinition height="auto"/> <rowdefinition height="*"/> <rowdefinition height="auto"/> </grid.rowdefinitions> <repeatbutton x:name="lineupbutton" grid.row="0" height="20" opacity="0" visibility="collapsed" style="{staticresource scrollbarlinebutton}" content="m 0 8 l 32 8 l 16 0 z" command="{x:static scrollbar.lineupcommand}" commandtarget="{binding elementname=scrollviewer}" clickmode="hover" /> <repeatbutton x:name="linedownbutton" grid.row="2" height="20" opacity="0" visibility="collapsed" style="{staticresource scrollbarlinebutton}" content="m 0 0 l 16 8 l 32 0 z" command="{x:static scrollbar.linedowncommand}" commandtarget="{binding elementname=scrollviewer}" clickmode="hover"/> </grid> </grid> <controltemplate.triggers> <multitrigger> <multitrigger.conditions> <condition property="ismouseover" value="true"/> <condition property="computedverticalscrollbarvisibility" sourcename="scrollviewer" value="visible"/> </multitrigger.conditions> <multitrigger.setters> <setter targetname="lineupbutton" property="visibility" value="visible" /> <setter targetname="linedownbutton" property="visibility" value="visible" /> </multitrigger.setters> <multitrigger.enteractions> <beginstoryboard> <storyboard> <doubleanimation storyboard.targetname="lineupbutton" storyboard.targetproperty="opacity" to="0.8" duration="0:0:0.25"/> <doubleanimation storyboard.targetname="linedownbutton" storyboard.targetproperty="opacity" to="0.8" duration="0:0:0.25"/> </storyboard> </beginstoryboard> </multitrigger.enteractions> <multitrigger.exitactions> <beginstoryboard> <storyboard> <doubleanimation storyboard.targetname="lineupbutton" storyboard.targetproperty="opacity" to="0" duration="0:0:0.25"/> <doubleanimation storyboard.targetname="linedownbutton" storyboard.targetproperty="opacity" to="0" duration="0:0:0.25"/> </storyboard> </beginstoryboard> </multitrigger.exitactions> </multitrigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> <setter property="itemspanel"> <setter.value > <itemspaneltemplate> <virtualizingstackpanel orientation="vertical"/> </itemspaneltemplate> </setter.value> </setter> </style> you can add items listbox using binding.so, create class it.
using system; using system.collections.generic; using system.linq; using system.text; namespace autoscrolllistbox { public class equipmentitem { public string name { get; set; } public string campaignname { get; set; } public string imagepath { get; set; } } } 
Comments
Post a Comment