Bind a view model property to an image

Question

I have a user permissions screen and I would like to have a number of images that represent each permission for the user i.e. a tick for enabled and a cross for disabled.

The permissions will be shown in a grid with View, Add, Edit and Delete along the top and the category along the left-hand side.

           View | Add | Edit | Delete
            y   |  n  |   y  |   y

I want the user to be able to click the image and toggle between a tick and cross. I have the trigger to set the correct image type based on the property value, but I'm not sure how to (or if I can) bind the image to the object property.

    <Image Grid.Column="1" Grid.Row="1" Width="24" Height="24">
        <Image.Style>
            <Style>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=PermissionViewModel.IsEmployeeView}" Value="True">
                        <Setter Property="Image.Source" Value="Check.png"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Path=PermissionViewModel.IsEmployeeView}" Value="False">
                        <Setter Property="Image.Source" Value="Delete.png"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Image.Style>
    </Image>

I can see that the image has no binding to the object property so, how do set the property when they click the image?

Or is there another way to do this? I would like to do as much in XAML as I can.

Thanks in advance

Answer 1

It looks like you want to implement a checkbox that looks different from the standard checkbox. In this case you could restyle the checkbox to have the look you're after. Then you could just bind the restyled checkbox to the underlying boolean value.

See also: this Stackoverflow question