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:

  1. create class has method returns icon icon sheet given row , column
  2. create converter calls method , use source binding of image.

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):

example app


Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -