c# - Display some images on gridview and flipview -
i have gridview contains images xaml , code below:
xaml:
<progressring x:name="busyindicator" margin="10,0,10,10" verticalalignment="top" horizontalalignment="right" width="45" height="45"/> <gridview x:name="imagegridview" margin="15,100,10,0" height="600" width="1200" itemssource="{x:bind listingdatasourcedetail}" automationproperties.automationid="itemdetailscrollviewer" datacontext="{binding selecteditem, elementname=itemlistview}" scrollviewer.horizontalscrollmode="auto" scrollviewer.verticalscrollmode="auto" horizontalalignment="left" verticalalignment="top" isitemclickenabled="true" scrollviewer.zoommode="disabled" scrollviewer.verticalscrollbarvisibility="disabled" scrollviewer.horizontalscrollbarvisibility="auto" itemclick="imagegridview_itemclick" selectionchanged="imagegridview_selectionchanged" > <gridview.itemtemplate> <datatemplate x:datatype="local:listingclass"> <grid height="320" width="250" margin="10,0,0,0" background="{x:null}" borderbrush="#ff646464" borderthickness="1"> <grid.columndefinitions> <columndefinition width="auto"/> <columndefinition width="auto"/> <columndefinition width="auto"/> <columndefinition width="auto"/> <columndefinition width="auto"/> <columndefinition width="auto"/> </grid.columndefinitions> <image x:name="cover1" grid.column="0" source="{binding imageurl1}" horizontalalignment="center" stretch="uniform" automationproperties.name="{binding title}"/> <image x:name="cover2" grid.column="1" source="{binding imageurl2}" horizontalalignment="center" stretch="uniform" automationproperties.name="{binding title}"/> <image x:name="cover3" grid.column="2" source="{binding imageurl3}" horizontalalignment="center" stretch="uniform" automationproperties.name="{binding title}"/> <image x:name="cover4" grid.column="3" source="{binding imageurl4}" horizontalalignment="center" stretch="uniform" automationproperties.name="{binding title}"/> <image x:name="cover5" grid.column="4" source="{binding imageurl5}" horizontalalignment="center" stretch="uniform" automationproperties.name="{binding title}"/> <image x:name="cover6" grid.column="5" source="{binding imageurl6}" horizontalalignment="center" stretch="uniform" automationproperties.name="{binding title}"/> </grid> </datatemplate> </gridview.itemtemplate> <gridview.itemspanel> <itemspaneltemplate> <itemswrapgrid orientation="vertical" /> </itemspaneltemplate> </gridview.itemspanel> </gridview> code:
public async void listing() { try { busyindicator.isactive = true; string urlpath = "http://.../api/detail"; var httpclient = new httpclient(new httpclienthandler()); var values = new list<keyvaluepair<string, string>> { new keyvaluepair<string, string>("api_key", "b1729409..."), new keyvaluepair<string, string>("id-sekolah", "60400172") }; var response = await httpclient.postasync(urlpath, new formurlencodedcontent(values)); response.ensuresuccessstatuscode(); string jsontext = await response.content.readasstringasync(); jsonobject jsonobject = jsonobject.parse(jsontext); jsonobject jsondata = jsonobject["data"].getobject(); jsonobject groupobject1 = jsondata.getobject(); string id = groupobject1["id"].getstring(); string title = groupobject1["nama"].getstring(); string urlimage1 = groupobject1.containskey("img_1") && groupobject1["img_1"] != null ? groupobject1["img_1"].getstring() : string.empty; string urlimage2 = groupobject1.containskey("img_2") && groupobject1["img_2"] != null ? groupobject1["img_2"].getstring() : string.empty; string urlimage3 = groupobject1.containskey("img_3") && groupobject1["img_3"] != null ? groupobject1["img_3"].getstring() : string.empty; string urlimage4 = groupobject1.containskey("img_4") && groupobject1["img_4"] != null ? groupobject1["img_4"].getstring() : string.empty; string urlimage5 = groupobject1.containskey("img_5") && groupobject1["img_5"] != null ? groupobject1["img_5"].getstring() : string.empty; string urlimage6 = groupobject1.containskey("img_6") && groupobject1["img_6"] != null ? groupobject1["img_6"].getstring() : string.empty; listingclass file = new listingclass(); file.id = int32.parse(id); file.title = title; file.imageurl1 = urlimage1; file.imageurl2 = urlimage2; file.imageurl3 = urlimage3; file.imageurl4 = urlimage4; listingdatasourcedetail.add(file); imagegridview.itemssource = listingdatasourcedetail; busyindicator.isactive = false; } and when user clicks image on gridview, show flipview larger image xaml , code below:
xaml:
<stackpanel x:name="listingfullimagedetailbox" margin="0,0,10,10" height="auto" visibility="collapsed"> <progressring x:name="listingdetailloading" margin="10,0,10,10" verticalalignment="center" horizontalalignment="center" width="45" height="45"/> <grid x:name="listingfullimagedetailgrid" borderbrush="#ff990000" borderthickness="1"> <grid.rowdefinitions> <rowdefinition height="auto"/> <rowdefinition height="*"/> </grid.rowdefinitions> <appbarbutton x:name="closelistingfullimagebtn" grid.column="1" icon="clear" horizontalalignment="right" foreground="black" click="closelistingfullimagebtn_click"/> <flipview x:name="listingimagefullflipview" grid.row="1" grid.rowspan="3" grid.column="0" margin="0,0,0,0" itemssource="{x:bind listingdatasourcedetail}" selectedindex="{binding elementname=imagegridview, path=selectedindex, mode=twoway}" width="650" height="500" verticalalignment="center" horizontalalignment="left" borderbrush="black" borderthickness="1" background="{x:null}"> <flipview.itemtemplate> <datatemplate x:datatype="local:listingclass"> <grid x:name="content" margin="0,0,0,0"> <image x:name="cover1" source="{binding imageurlfull1}" horizontalalignment="center" stretch="uniform" automationproperties.name="{binding id}"/> <image x:name="cover2" source="{binding imageurlfull2}" horizontalalignment="center" stretch="uniform" automationproperties.name="{binding id}"/> <image x:name="cover3" source="{binding imageurlfull3}" horizontalalignment="center" stretch="uniform" automationproperties.name="{binding id}"/> <image x:name="cover4" source="{binding imageurlfull4}" horizontalalignment="center" stretch="uniform" automationproperties.name="{binding id}"/> <image x:name="cover5" source="{binding imageurlfull5}" horizontalalignment="center" stretch="uniform" automationproperties.name="{binding id}"/> <image x:name="cover6" source="{binding imageurlfull6}" horizontalalignment="center" stretch="uniform" automationproperties.name="{binding id}"/> </grid> </datatemplate> </flipview.itemtemplate> </flipview> </grid> </stackpanel> code:
private async void imagegridview_itemclick(object sender, itemclickeventargs e) { try { busyindicator.isactive = true; string urlpath = "http://.../api/detail"; var httpclient = new httpclient(new httpclienthandler()); var values = new list<keyvaluepair<string, string>> { new keyvaluepair<string, string>("api_key", "b1729409..."), new keyvaluepair<string, string>("id-sekolah", "60400172") }; var response = await httpclient.postasync(urlpath, new formurlencodedcontent(values)); response.ensuresuccessstatuscode(); string jsontext = await response.content.readasstringasync(); jsonobject jsonobject = jsonobject.parse(jsontext); jsonobject jsondata = jsonobject["data"].getobject(); jsonobject groupobject1 = jsondata.getobject(); string id = groupobject1["id"].getstring(); string title = groupobject1["nama"].getstring(); string urlimage1 = groupobject1.containskey("img_1") && groupobject1["img_1"] != null ? groupobject1["img_1"].getstring() : string.empty; string urlimage2 = groupobject1.containskey("img_2") && groupobject1["img_2"] != null ? groupobject1["img_2"].getstring() : string.empty; string urlimage3 = groupobject1.containskey("img_3") && groupobject1["img_3"] != null ? groupobject1["img_3"].getstring() : string.empty; string urlimage4 = groupobject1.containskey("img_4") && groupobject1["img_4"] != null ? groupobject1["img_4"].getstring() : string.empty; string urlimage5 = groupobject1.containskey("img_5") && groupobject1["img_5"] != null ? groupobject1["img_5"].getstring() : string.empty; string urlimage6 = groupobject1.containskey("img_6") && groupobject1["img_6"] != null ? groupobject1["img_6"].getstring() : string.empty; imagegridview.visibility = visibility.collapsed; listingfullimagedetailbox.visibility = visibility.visible; listingdetailloading.isactive = true; observablecollection<listingclass> imageinfos = new observablecollection<listingclass>(); listingclass info = new listingclass(); info.imageurlfull1 = new bitmapimage(new uri(urlimage1)); info.imageurlfull2 = new bitmapimage(new uri(urlimage2)); info.imageurlfull3 = new bitmapimage(new uri(urlimage3)); info.imageurlfull4 = new bitmapimage(new uri(urlimage4)); imageinfos.add(info); listingimagefullflipview.itemssource = imageinfos; var listingimageflipview = (gridview)sender; listingimagefullflipview.selectedindex = listingimageflipview.selectedindex; listingdetailloading.isactive = false; } } listingclass:
class listingclass { public int id { get; set; } public string title { get; set; } public string imageurl1 { get; set; } public string imageurl2 { get; set; } public string imageurl3 { get; set; } public string imageurl4 { get; set; } public string imageurl5 { get; set; } public string imageurl6 { get; set; } public imagesource imageurlfull1 { get; set; } public imagesource imageurlfull2 { get; set; } public imagesource imageurlfull3 { get; set; } public imagesource imageurlfull4 { get; set; } public imagesource imageurlfull5 { get; set; } public imagesource imageurlfull6 { get; set; } } i want show images on gridview (4 6 images corresponding image provided on json). , after user selects image, show image on flipview. i'm having trouble, is, can show first index on gridview. , in flipview displayed image not match user's selected image on gridview , image can not shifted. how handle it?
json:
"img_1": "http://sekolah.pendidikan.id/gb/1-60400172.jpg", "img_2": "http://sekolah.pendidikan.id/gb/2-60400172.jpg", "img_3": "http://sekolah.pendidikan.id/gb/3-60400172.jpg", "img_4": "http://sekolah.pendidikan.id/gb/4-60400172.jpg", "img_5": "", "img_6": "",
since have same elements in gridview , flipview, have single itemssource list can reduce code don't want call same api go same image.
to change flipview corresponding gridview selected item, can use selectedindex="{binding elementname=mygridview, path=selectedindex, mode=twoway}"
sample code:
<gridview x:name="mygridview" itemssource="{x:bind itemssourcecollection}"> <gridview.itemtemplate> <datatemplate x:datatype="local:itemsource"> <!-- code --> </datatemplate> </gridview.itemtemplate> </gridview> <flipview itemssource="{x:bind itemssourcecollection}" selectedindex="{binding elementname=mygridview, path=selectedindex, mode=twoway}"> <flipview.itemtemplate> <datatemplate x:datatype="local:itemsource"> <!-- code --> </datatemplate> </flipview.itemtemplate> </flipview> sample output:
set itemssource of both gridview , flipview listingdatasourcedetail , use below code add item it.
string id = groupobject1["id"].getstring(); string title = groupobject1["nama"].getstring(); (int = 1; <= 6; i++) { if (groupobject1[$"img_{i}"] != null && groupobject1.containskey($"img_{i}") && !string.isnullorempty(groupobject1[$"img_{i}"].getstring())) { listingdatasourcedetail.add(new listingclass { id = id, title = title, imageurl = new bitmapimage(new uri(groupobject1[$"img_{i}"].getstring())) }); } }
Comments
Post a Comment