windows phone - How to accessicon from images using position in XAML style sheet -
how accessicon images using position in xaml style sheet
like have below image , want access icon @ 2 row , 2 column
by using xaml style sheet idea.
http://www.evohosting.co.uk/blog/wp-content/uploads/2011/07/blue.jpg
thank you
that image not conducive being split (some of shadows overlap icons below), if want can:
- create class has method returns icon icon sheet given row , column
- create converter calls method , use
source
binding ofimage
.
this class takes source image , width , height of each icon. given row , column index, geticon
function calculates x , y position of icon , returns croppedbitmap
containing icon. icons ask cached don't end creating same icon multiple times.
public class iconsheet { public bitmapimage sheetsource; private int iconwidth, iconheight; private dictionary<tuple<int, int>, croppedbitmap> cache = new dictionary<tuple<int, int>, croppedbitmap>(); public iconsheet( bitmapimage sheetsource, int iconwidth, int iconheight ) { sheetsource = sheetsource; this.iconwidth = iconwidth; this.iconheight = iconheight; } public bitmapsource geticon( int row, int column ) { var key = tuple.create( row, column ); if( !cache.containskey( key ) ) { cache.add( key, new croppedbitmap( sheetsource, new int32rect( column * iconwidth, row * iconheight, iconwidth, iconheight ) ) ); } return cache[key]; } }
next create ivalueconverter
takes iconsheet
value , row , column parameter (formatted string "row,col"
). calls geticon
method row , column returns bitmapsource
can use source
of our image
.
[valueconversion( typeof( bitmapimage ), typeof( bitmapsource ) )] public class iconsheetindexer : ivalueconverter { public object convert( object value, type targettype, object parameter, system.globalization.cultureinfo culture ) { var iconsheet = (value iconsheet); var coords = (parameter string).split( ',' ).select( s => int.parse( s.trim() ) ).tolist(); return iconsheet.geticon( coords[0], coords[1] ); } public object convertback( object value, type targettype, object parameter, system.globalization.cultureinfo culture ) { return null; } }
in xaml, we'll define 3 parameters our constructor takes - icon sheet bitmapimage
, width , height of each icon. we'll define converter resource.
<window.resources> <bitmapimage x:key="iconsheetsource" urisource="blue.jpg" /> <sys:int32 x:key="iconwidth">95</sys:int32> <sys:int32 x:key="iconheight">95</sys:int32> <local:iconsheetindexer x:key="iconsheetindexer"/> </window.resources>
in code-behind, create iconsheet using parameters defined in xaml resources:
public partial class mainwindow : window { public iconsheet iconsheet { get; private set; } public mainwindow() { initializecomponent(); iconsheet = new iconsheet( this.findresource( "iconsheetsource" ) bitmapimage, (int)this.findresource( "iconwidth" ), (int)this.findresource( "iconheight" ) ); this.datacontext = this; } }
then if want use, example, icon @ row 1, column 3:
<image source="{binding iconsheet, converter={staticresource iconsheetindexer}, converterparameter='1,3'}" stretch="none"/>
results (as uniformgrid
each of 16 icons bound image
):
Comments
Post a Comment