0

XAML スタイル シートの位置を使用して画像からアイコンにアクセスする方法

下の画像のように、2行2列のアイコンにアクセスしたい

XAML スタイル シートを使用して任意のアイデア。

http://www.evohosting.co.uk/blog/wp-content/uploads/2011/07/blue.jpg

ありがとうございました

4

1 に答える 1

0

その画像は分割されるのを正確に助長するものではありません (影の一部が下のアイコンに重なっています) が、分割したい場合は次のことができます。

  1. 行と列が指定されたアイコン シートからアイコンを返すメソッドを持つクラスを作成します。
  2. そのメソッドを呼び出すコンバーターを作成し、それを の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を返す行と列でメソッドを呼び出します。BitmapSourceSourceImage

[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;
    }
}

BitmapImageXAML では、コンストラクターが受け取る 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):

サンプルアプリ

于 2013-08-26T15:21:11.243 に答える