c# - Manipulate Image controls in WPF -
i'm learning wpf in free time using flickr.net api.
the first feature want perform search images name/description/tags. leads me play around images in wpf.
this setup:
- xaml
<grid> <itemscontrol x:name="photolist" horizontalalignment="left" height="639" margin="10,10,0,0" verticalalignment="top" width="1060" style="{dynamicresource scrollableitemcontrolstyle}" > <itemscontrol.itemspanel> <itemspaneltemplate> <wrappanel orientation="horizontal" height="639" width="1060"/> </itemspaneltemplate> </itemscontrol.itemspanel> <itemscontrol.itemtemplate> <datatemplate datatype="{x:type sys:string}"> <image width="200" source="{binding url}" margin="0,0,5,5" mousedown="openselectedimage" mouseenter="image_mouseenter" mouseleave="image_mouseleave"> </image> </datatemplate> </itemscontrol.itemtemplate> </itemscontrol> <button x:name="backbutton" style="{dynamicresource modernbuttonstyle}" content="back" horizontalalignment="left" margin="710,654,0,0" verticalalignment="top" width="360" height="56 " tabindex="2" background="#ff6600cc" isdefault="true" foreground="white" click="backbutton_click"/> </grid> - c#
public observablecollection<photoresult> images; public imagesearchresult(list<photoresult> imagelist) { initializecomponent(); if (imagelist.count > 0) { images = new observablecollection<photoresult>(); foreach (var image in imagelist) { images.add(image); } photolist.itemssource = images; } } could achive:
- my wrappanel doesn't scroll @ all.
- when mouse hover image control, can have size changed (with animation) indicate selection. overlays other control, not rearrange position. solve one? think zindex doesn't work expected in case.
- also, can change image border @ selection? i'm not able @ moment.
if want have "selection-behaviour" should use wpf control implementing itemscontrol - "itemscontrol" not provide selection.
if use "listbox" (msdn listbox) can set itemspanel whatever want. e.g. use "uniformgrid" each item shares same size. set desired rows/columns.
<itemspaneltemplate x:key="itemspaneltemplate"> <uniformgrid rows="2"/> </itemspaneltemplate> to achieve resizing "mouseover" or set border in selection case, define "itemcontainerstyle" listbox.
<style x:key="listboxitemstyle" targettype="{x:type listboxitem}"> <setter property="background" value="transparent"/> <setter property="horizontalcontentalignment" value="{binding horizontalcontentalignment, relativesource={relativesource ancestortype={x:type itemscontrol}}}"/> <setter property="verticalcontentalignment" value="{binding verticalcontentalignment, relativesource={relativesource ancestortype={x:type itemscontrol}}}"/> <setter property="padding" value="2,0,0,0"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type listboxitem}"> <border x:name="border" borderbrush="black" borderthickness="0"> <visualstatemanager.visualstategroups> <visualstategroup x:name="commonstates"> <visualstate x:name="normal"/> <visualstate x:name="mouseover"> <storyboard> <doubleanimationusingkeyframes storyboard.targetproperty="(frameworkelement.layouttransform).(transformgroup.children)[0].(scaletransform.scalex)" storyboard.targetname="image"> <easingdoublekeyframe keytime="0" value="1.25"/> </doubleanimationusingkeyframes> <doubleanimationusingkeyframes storyboard.targetproperty="(frameworkelement.layouttransform).(transformgroup.children)[0].(scaletransform.scaley)" storyboard.targetname="image"> <easingdoublekeyframe keytime="0" value="1.25"/> </doubleanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="disabled"/> </visualstategroup> <visualstategroup x:name="selectionstates"> <visualstate x:name="unselected"/> <visualstate x:name="selected"> <storyboard> <coloranimationusingkeyframes storyboard.targetproperty="(border.borderbrush).(solidcolorbrush.color)" storyboard.targetname="border"> <easingcolorkeyframe keytime="0" value="#ffb61f1f"/> </coloranimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="selectedunfocused"/> </visualstategroup> </visualstatemanager.visualstategroups> <image x:name="image" height="100" width="100"> <image.layouttransform> <transformgroup> <scaletransform/> <skewtransform/> <rotatetransform/> <translatetransform/> </transformgroup> </image.layouttransform> </image> </border> <controltemplate.triggers> <trigger property="isselected" value="true"> <setter property="foreground" value="{dynamicresource {x:static systemcolors.highlighttextbrushkey}}"/> </trigger> <multitrigger> <multitrigger.conditions> <condition property="isselected" value="true"/> <condition property="selector.isselectionactive" value="false"/> </multitrigger.conditions> <setter property="foreground" value="{dynamicresource {x:static systemcolors.inactiveselectionhighlighttextbrushkey}}"/> </multitrigger> <trigger property="isenabled" value="false"> <setter property="foreground" value="{dynamicresource {x:static systemcolors.graytextbrushkey}}"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style> in summary can use listbox combining itemspanel , itemcontainerstyle in way:
<listbox itemspanel="{dynamicresource itemspaneltemplate}" itemssource="{binding collection}" itemcontainerstyle="{dynamicresource listboxitemstyle}" /> this not complete solution questions, should provide starting point.
Comments
Post a Comment