xaml - Create a page indicator in wp8 -
hi trying implement slider shown in figure below. easy in web using jquery. problem have implement in wp8. idea how make circular rings marked , on swipe right ring should marked. code snippet if have great.
you may try way. sample.
mainpage.xaml
<grid> <hub name="hub" sectionsinviewchanged="hub_sectionsinviewchanged" > <hubsection tag="0" background="red" /> <hubsection tag="1" background="blue" /> <hubsection tag="2" background="green" /> <hubsection tag="3" background="aqua" /> </hub> <grid width="80" height="30" verticalalignment="bottom" margin="20,20,20,20"> <grid.columndefinitions> <columndefinition width="20" /> <columndefinition width="20" /> <columndefinition width="20" /> <columndefinition width="20" /> </grid.columndefinitions> <ellipse name="circle1" margin="5,0,5,0" fill="white" width="10" height="10" grid.column="0" opacity="1"/> <ellipse name="circle2" margin="5,0,5,0" fill="white" width="10" height="10" grid.column="1" opacity="0.5"/> <ellipse name="circle3" margin="5,0,5,0" fill="white" width="10" height="10" grid.column="2" opacity="0.5"/> <ellipse name="circle4" margin="5,0,5,0" fill="white" width="10" height="10" grid.column="3" opacity="0.5"/> </grid> </grid>
and function event sectionsinviewchanged in mainpage.xaml.cs
private void hub_sectionsinviewchanged(object sender, sectionsinviewchangedeventargs e) { circle1.opacity = 0.5; circle2.opacity = 0.5; circle3.opacity = 0.5; circle4.opacity = 0.5; var tag = hub.sectionsinview[0].tag.tostring(); switch(tag) { case "0": circle1.opacity = 1; break; case "1": circle2.opacity = 1; break; case "2": circle3.opacity = 1; break; case "3": circle4.opacity = 1; break; default : circle1.opacity = 1; break; } }
Comments
Post a Comment