c# - ItemsControl clickable items -

c# - ItemsControl clickable items -

i've made app streams video video device , added ability take screenshots of video, when capture taken shows in itemscontrol rest of captures taken.

my question how can create each item "image" shown in itemscontrol clickable can preview ?

i store image details in list :

list<imagedetails> images = new list<imagedetails>();

this xaml code of itemscontrol :

edit : wrapped within button template within datatemplate , called mousebuttonclickup event on button nil happens. did misplaced button template ?

<itemscontrol name="imagelist" itemssource="{binding imagelist}" > <itemscontrol.itemtemplate> <datatemplate> <button width="auto" height="auto" horizontalalignment="stretch" verticalalignment="stretch" mouseleftbuttonup="button_mouseleftbuttonup"> <button.template> <controltemplate> <border x:name="imagecanv" borderthickness="1" borderbrush="#ffd0d1d7" padding="5" margin="5,5,0,0" mouseleftbuttonup="imagecanv_mouseleftbuttonup"> <stackpanel orientation="horizontal"> <!--image , dimensions--> <grid x:name="picgrid" width="88" height="55"> <image x:name="imgcontainer" source="{binding path}" mouseleftbuttonup="imgcontainer_mouseleftbuttonup"/> <textblock background="#b2000000" foreground="white" height="16" textalignment="center" verticalalignment="bottom"> <textblock.text> <multibinding stringformat="{}{0}x{1}"> <binding path="height"/> <binding path="width"/> </multibinding> </textblock.text> </textblock> </grid> <!--name, type , size--> <stackpanel orientation="vertical" margin="5,0,0,0" verticalalignment="center"> <textblock name="imagename" margin="1" foreground="#ff787878" text="{binding filename}"/> <textblock name="imagetype" margin="1" foreground="#ff787878"> <textblock.text> <multibinding stringformat="type: {0}"> <binding path="extension"/> </multibinding> </textblock.text> </textblock> <textblock name="imagesize" margin="1" foreground="#ff787878"> <textblock.text> <multibinding stringformat="size: {0} bytes"> <binding path="size"/> </multibinding> </textblock.text> </textblock> </stackpanel> </stackpanel> </border> </controltemplate> </button.template> </button> </datatemplate> </itemscontrol.itemtemplate> <itemscontrol.itemspanel> <itemspaneltemplate > <stackpanel x:name="stackeditems" orientation="horizontal" /> </itemspaneltemplate> </itemscontrol.itemspanel> <itemscontrol.template> <controltemplate> <scrollviewer name="scroller" padding="{templatebinding padding}" horizontalscrollbarvisibility="visible" > <itemspresenter /> </scrollviewer> </controltemplate> </itemscontrol.template> </itemscontrol>

the click event:

private void button_mouseleftbuttonup(object sender, mousebuttoneventargs e) { messagebox.show("clickable!"); }

this code behind viewing captures :

private void capture_click(object sender, routedeventargs e) { // create bitmap of same dimension of panelvideopreview (width x height) using (bitmap bitmap = new bitmap(viewpanel.width, viewpanel.height)) { using (graphics g = graphics.fromimage(bitmap)) { // paramters phone call g.copyfromscreen , image system.drawing.rectangle rectanglepanelvideopreview = viewpanel.bounds; system.drawing.point sourcepoints = viewpanel.pointtoscreen(new system.drawing.point(viewpanel.clientrectangle.x, viewpanel.clientrectangle.y)); g.copyfromscreen(sourcepoints, system.drawing.point.empty, rectanglepanelvideopreview.size); } string strgrabfilename = string.format(@"d:\app result\\snapshot_{0:yyyymmdd_hhmmss}.jpg", datetime.now); seek { bitmap.save(strgrabfilename, system.drawing.imaging.imageformat.jpeg); imageview(strgrabfilename); } grab (exception) { } } } public void imageview (string file) { imagedetails id = new imagedetails() { path = file, filename = system.io.path.getfilename(file), extension = system.io.path.getextension(file) }; bitmapimage img = new bitmapimage(); img.begininit(); img.cacheoption = bitmapcacheoption.onload; img.urisource = new uri(file, urikind.absolute); img.endinit(); id.width = img.pixelwidth; id.height = img.pixelheight; // couldn't find file size in bitmapimage fileinfo fi = new fileinfo(file); id.size = fi.length; images.add(id); //images.insert(i, id); imagelist.itemssource = null; imagelist.itemssource = images; }

have thought using commanding instead of click events? given you're using wpf , not silverlight, here's i've done accomplish click functionality datatemplates rendered in itemscontrol:

<datatemplate x:key="yourdatatemplate"> <textblock> <textblock.inputbindings> <mousebinding mouseaction="leftclick" command="{binding yourcommand}" commandparameter="{binding yourcommandparameter}"></mousebinding> </textblock.inputbindings> </textblock> </datatemplate>

the secondary advantage avoid reliance on (relatively untestable) code-behind.

if you'd stick click events, have considered making top-level command in datatemplate button? can remove styling button see fit, if necessary. button still has click property in datatemplates, , can phone call datacontext in click original imagedetails object used binding.

c# wpf itemscontrol