如何使用XAML样式表中的位置从图像中访问图标

Question

如何使用XAML样式表中的位置从图像中访问图标

就像我有下面的图像，我想访问2行和2列的图标

通过使用XAML样式表的任何想法。

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

谢谢

Answer 1

该图像并不完全有助于分割（一些阴影与下面的图标重叠），但如果你想这样做，你可以：

1. 创建一个类，该类具有从给定行和列的图标表返回图标的方法
2. 创建一个调用该方法的转换器，并将其用作Source的{​​{1}}绑定。

此类获取源图像以及每个图标的宽度和高度。给定行和列索引，Image函数计算图标的X和Y位置，并返回包含图标的GetIcon。您要求的图标会被缓存，因此您不会多次创建相同的图标。

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）。它使用行和列调用"row,col"方法，该行返回GetIcon，我们可以将其用作BitmapSource的{​​{1}}。

Source

在XAML中，我们将定义构造函数采用的三个参数 - 图标表作为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;
    }
}

在代码隐藏中，使用我们在XAML资源中定义的参数创建IconSheet：

BitmapImage

然后，如果您想使用第1行第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>

结果（作为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; } } ，16个图标中的每一个都绑定到<Image Source="{Binding IconSheet, Converter={StaticResource iconSheetIndexer}, ConverterParameter='1,3'}" Stretch="None"/> ）：