Setting a different property in XAML gridview using the DisplayMemberBinding

Question

I'm trying to create a grid view with 3 columns, these are taken from a struct:

    public struct ColorAttribute
    {
        public Color Color { get; set; }

        public string TextValue { get; set; }

        public int Count { get; set; }
    }

And then I want to build a the table like so:

    <ListView ItemsSource="{Binding ColorAttributes}">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="Color" Width="120" DisplayMemberBinding="{Binding Color}"/>
                <GridViewColumn Header="Color Name" Width="120" DisplayMemberBinding="{Binding TextValue}" />
                <GridViewColumn Header="Count" Width="50" DisplayMemberBinding="{Binding Count}" />
            </GridView>
        </ListView.View>
    </ListView>

The part I'm not sure about though, is that for the first column, I want to just display a little box of the color, but I'm not sure how to bind the DisplayMemberBinding to something else like the foreground. Currently it just shows as the RGB value again.

Answer 1

You can define template for the cell and inside the DataTemplate bind Background or Foreground to Color in your view model. You have to create a converter to convert Color to Brush .

<Windows.Resources>
    <local:ColorToBrushConverter x:Key="ColorToBrushConverter" />
</Window.Resources>
...
<ListView ItemsSource="{Binding ColorAttributes}">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Color" Width="120">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Border Margin="0,0,5,0" Width="20" 
                             Background="{Binding Color, Converter={StaticResource ColorToBrushConverter}}"/>
                            <TextBlock Text="{Binding Color}" 
                             Foreground="{Binding Color, Converter={StaticResource ColorToBrushConverter}}"/>
                        </StackPanel>                                
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
            <GridViewColumn Header="Color Name" Width="120" DisplayMemberBinding="{Binding TextValue}" />
            <GridViewColumn Header="Count" Width="50" DisplayMemberBinding="{Binding Count}" />
        </GridView>
    </ListView.View>
</ListView>

Color to brush converter