セルに画像を表示する

連結グリッドでセルに画像を表示するには、列のCellTemplate プロパティを使用して画像要素を含むデータテンプレートに連結する方法があります。この方法では、数値プロパティにバインドされている数値を自動的に画像に変えるValueConverterを使用します。

たとえば、次の例をご覧ください。

【実行例】

マークアップ	コードのコピー
<c1:C1FlexGrid Name="_flex" AutoGenerateColumns="False" > <c1:C1FlexGrid.Columns> <c1:Column Header="Alert" Binding="{Binding Alert}" Width="" /> <c1:Column Header="Image" Width="" > <c1:Column.CellTemplate> <DataTemplate> <Image Margin="4" Source="{Binding Path=Alert, Converter={StaticResource AlertImageConverter}}"/> </DataTemplate> </c1:Column.CellTemplate> </c1:Column> <c1:Column Header="Message" Binding="{Binding Message}" Width="2*" /> </c1:C1FlexGrid.Columns> </c1:C1FlexGrid>

マークアップ

コードのコピー

<c1:C1FlexGrid Name="_flex" AutoGenerateColumns="False" >
    <c1:C1FlexGrid.Columns>
        <c1:Column Header="Alert" Binding="{Binding Alert}" Width="*" />
        <c1:Column Header="Image" Width="*" >
            <c1:Column.CellTemplate>
                <DataTemplate>
                    <Image 
                        Margin="4" 
                        Source="{Binding Path=Alert, Converter={StaticResource AlertImageConverter}}"/>
                </DataTemplate>
            </c1:Column.CellTemplate>
        </c1:Column>
        <c1:Column Header="Message" Binding="{Binding Message}" Width="2*" />
    </c1:C1FlexGrid.Columns>
</c1:C1FlexGrid>

バインディングのコンバータープロパティは「AlertImageConverter」という静的リソースに設定されています。このパブリッククラスをメインアプリケーションに定義して、アプリケーションリソースに次のように追加されます。

<Window.Resources>
<local:AlertImageConverter x:Key="AlertImageConverter" />
</Window.Resources>

最終的に、AlertImageConverter クラスを次のように実装します。

Visual Basic
C#

	コードのコピー
Public Class AlertImageConverter Implements IValueConverter ' アプリケーションのリソースから静的イメージをロードします Private Shared _bmpRed As BitmapImage Private Shared _bmpYellow As BitmapImage Private Shared _bmpGreen As BitmapImage Shared Sub New() _bmpRed = New BitmapImage(New Uri("/Resources/redBell.png", UriKind.Relative)) _bmpYellow = New BitmapImage(New Uri("/Resources/yellowBell.png", UriKind.Relative)) _bmpGreen = New BitmapImage(New Uri("/Resources/greenBell.png", UriKind.Relative)) End Sub ' 「Alert」int型を当該するイメージに変換します Public Function Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements IValueConverter.Convert Select Case (CType(value, Integer)) Case 1 Return _bmpRed Case 2 Return _bmpYellow End Select Return _bmpGreen End Function ' 一方変換のみ（CovertBackは使用されません） Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements IValueConverter.ConvertBack Throw New NotImplementedException End Function End Class

コードのコピー

Public Class AlertImageConverter
    Implements IValueConverter

    ' アプリケーションのリソースから静的イメージをロードします
    Private Shared _bmpRed As BitmapImage
    Private Shared _bmpYellow As BitmapImage
    Private Shared _bmpGreen As BitmapImage

    Shared Sub New()
        _bmpRed = New BitmapImage(New Uri("/Resources/redBell.png", UriKind.Relative))
        _bmpYellow = New BitmapImage(New Uri("/Resources/yellowBell.png", UriKind.Relative))
        _bmpGreen = New BitmapImage(New Uri("/Resources/greenBell.png", UriKind.Relative))
    End Sub

    ' 「Alert」int型を当該するイメージに変換します
    Public Function Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, 
        ByVal culture As System.Globalization.CultureInfo) As Object Implements IValueConverter.Convert
        Select Case (CType(value, Integer))
            Case 1
                Return _bmpRed
            Case 2
                Return _bmpYellow
        End Select

        Return _bmpGreen
    End Function

    ' 一方変換のみ（CovertBackは使用されません）
    Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, 
        ByVal culture As System.Globalization.CultureInfo) As Object Implements IValueConverter.ConvertBack
        Throw New NotImplementedException
    End Function
End Class

	コードのコピー
public class AlertImageConverter : IValueConverter { // アプリケーションのリソースから静的イメージをロードします static BitmapImage _bmpRed, _bmpYellow, _bmpGreen; static AlertImageConverter() { _bmpRed = new BitmapImage(new Uri("/Resources/redBell.png", UriKind.Relative)); _bmpYellow = new BitmapImage(new Uri("/Resources/yellowBell.png", UriKind.Relative)); _bmpGreen = new BitmapImage(new Uri("/Resources/greenBell.png", UriKind.Relative)); } // 「Alert」int型を当該するイメージに変換します public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { switch ((int)value) { case 1: return _bmpRed; case 2: return _bmpYellow; } return _bmpGreen; } // 一方変換のみ（CovertBackは使用されません） public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } }

コードのコピー

public class AlertImageConverter : IValueConverter
{
    
    // アプリケーションのリソースから静的イメージをロードします
    static BitmapImage _bmpRed, _bmpYellow, _bmpGreen;
    static AlertImageConverter()
    {
        _bmpRed = new BitmapImage(new Uri("/Resources/redBell.png", UriKind.Relative));
        _bmpYellow = new BitmapImage(new Uri("/Resources/yellowBell.png", UriKind.Relative));
        _bmpGreen = new BitmapImage(new Uri("/Resources/greenBell.png", UriKind.Relative));
    }

    // 「Alert」int型を当該するイメージに変換します
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        switch ((int)value)
        {
            case 1: return _bmpRed;
            case 2: return _bmpYellow;
        }
        return _bmpGreen;
    }

    // 一方変換のみ（CovertBackは使用されません）
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
   
}