XAML スタイル シートの位置を使用して画像からアイコンにアクセスする方法
下の画像のように、2行2列のアイコンにアクセスしたい
XAML スタイル シートを使用して任意のアイデア。
http://www.evohosting.co.uk/blog/wp-content/uploads/2011/07/blue.jpg
ありがとうございました
XAML スタイル シートの位置を使用して画像からアイコンにアクセスする方法
下の画像のように、2行2列のアイコンにアクセスしたい
XAML スタイル シートを使用して任意のアイデア。
http://www.evohosting.co.uk/blog/wp-content/uploads/2011/07/blue.jpg
ありがとうございました
その画像は分割されるのを正確に助長するものではありません (影の一部が下のアイコンに重なっています) が、分割したい場合は次のことができます。
Source
バインディングとして使用しImage
ます。このクラスは、ソース画像と各アイコンの幅と高さを受け取ります。行と列のインデックスを指定すると、GetIcon
関数はアイコンの X と Y の位置を計算し、アイコンCroppedBitmap
を含む を返します。求めるアイコンはキャッシュされるため、同じアイコンを何度も作成することはありません。
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];
}
}
次に、 を値としてIValueConverter
受け取り、IconSheet
行と列をパラメーター ( string としてフォーマット"row,col"
) として受け取る を作成します。の として使用できるGetIcon
を返す行と列でメソッドを呼び出します。BitmapSource
Source
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 as IconSheet);
var coords = (parameter as 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;
}
}
BitmapImage
XAML では、コンストラクターが受け取る 3 つのパラメーター (アイコン シートを として、各アイコンの幅と高さ) を定義します。また、コンバーターをリソースとして定義します。
<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>
コード ビハインドで、XAML リソースで定義したパラメーターを使用して IconSheet を作成します。
public partial class MainWindow : Window
{
public IconSheet IconSheet { get; private set; }
public MainWindow()
{
InitializeComponent();
IconSheet = new IconSheet( this.FindResource( "iconSheetSource" ) as BitmapImage,
(int)this.FindResource( "iconWidth" ),
(int)this.FindResource( "iconHeight" ) );
this.DataContext = this;
}
}
次に、たとえば、行 1、列 3 のアイコンを使用する場合:
<Image Source="{Binding IconSheet, Converter={StaticResource iconSheetIndexer}, ConverterParameter='1,3'}" Stretch="None"/>
結果 ( にUniformGrid
バインドされた 16 個のアイコンのそれぞれを持つとしてImage
):