windows store apps - Creating a 2D image gallery (Horizontal + Vertical) in C# -
i working on project fashion store app windows phone. catalogue need create image gallery in if scroll vertically see images related same product, , if scroll sideways see next/previous product.
i have started off creating little concept gallery 3x3 images. 1 column planes, second tanks , third warships. used 1 horizontal flipview has 3 vertical flipviews it's items.
here xaml code:
<grid background="{themeresource applicationpagebackgroundthemebrush}"> <flipview x:name="flipbase"> <flipview x:name="a"> <flipview.itemspanel> <itemspaneltemplate> <virtualizingstackpanel orientation="vertical" /> </itemspaneltemplate> </flipview.itemspanel> </flipview> <flipview x:name="b"> <flipview.itemspanel> <itemspaneltemplate> <virtualizingstackpanel orientation="vertical" /> </itemspaneltemplate> </flipview.itemspanel> </flipview> <flipview x:name="c"> <flipview.itemspanel> <itemspaneltemplate> <virtualizingstackpanel orientation="vertical" /> </itemspaneltemplate> </flipview.itemspanel> </flipview> </flipview> </grid>
here c# code: public sealed partial class mainpage : page { public mainpage() { this.initializecomponent();
//primeira columna image foto = new image(); foto.source = new bitmapimage(new uri("ms-appx:///assets/plane/plane_spitfire.jpg")); a.items.add(foto); foto = new image(); foto.source = new bitmapimage(new uri("ms-appx:///assets/plane/plane_stuka.jpg")); a.items.add(foto); foto = new image(); foto.source = new bitmapimage(new uri("ms-appx:///assets/plane/plane_yak9.jpg")); a.items.add(foto); //segunda columna foto = new image(); foto.source = new bitmapimage(new uri("ms-appx:///assets/tank/tank_is.jpg")); b.items.add(foto); foto = new image(); foto.source = new bitmapimage(new uri("ms-appx:///assets/tank/tank_patton.jpg")); b.items.add(foto); foto = new image(); foto.source = new bitmapimage(new uri("ms-appx:///assets/tank/tank_tiger.jpg")); b.items.add(foto); //terceira columna foto = new image(); foto.source = new bitmapimage(new uri("ms-appx:///assets/destroyer/destroyer_german.jpg")); c.items.add(foto); foto = new image(); foto.source = new bitmapimage(new uri("ms-appx:///assets/destroyer/destroyer_russian.jpg")); c.items.add(foto); foto = new image(); foto.source = new bitmapimage(new uri("ms-appx:///assets/destroyer/destroyer_usa.jpg")); c.items.add(foto); } }
i have 2 main questions: -is there better way this? (one allow me dynamically add columns , items) -how can restrict horizontal movement when vertical movement detected, , viceversa (to prevent diagonal movement)?
this first post here. thank answers!
Comments
Post a Comment