Question

I have a ListView with a few GridViewColumn. One of the columns I am showing the visibility of layers and I binded the icon and the opacity, but I am not sure how to bind it to a property called IsVisible so that whenever an item is clicked in that column, it will toggle the IsVisible boolean value.

Any ideas on how to do this?

<GridViewColumn Width="20">
    <GridViewColumnHeader Content="X" />
    <GridViewColumn.CellTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Width="18"
                Height="18"
                Source="{Binding VisibleIcon}"
                        Opacity="{Binding VisibleOpacity}"
                        />
            </StackPanel>
        </DataTemplate>
    </GridViewColumn.CellTemplate>
</GridViewColumn>

Additionally, VisibleOpacity defines the Opacity for the icon but I feel like this is not a good way to do it because I had to create this property solely for this purpose. Is there a way to do this inline in xaml? Maybe like:

Opacity = (this.IsVisible) ? 1 : 0.5;

Answer 1

EDIT : ok, so I think this should be good now..

Still assuming that your collection is a collection of :

public class Effect : INotifyPropertychanged
{
    //Some properties


    private bool isVisible;
    public bool IsVisible
    {
        get { return isVisible;}
        set { isVisible=value;//plus raise propertychanged notification}
    }      
}

then I think the simplest way to propagate the image click both to your code property and to the image opacity is to wrap your icon in a toggle button. Here is a code I have used and tested. Just replace the values by yours and put this in your data template, it should work fine this time :

<ToggleButton x:Name="tgBtn" Height="20" Width="20" IsChecked="{Binding IsVisible}" 
              BorderThickness="0" Background="Transparent" >
    <ToggleButton.Style>
        <Style TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Image Width="18"
                           Height="18"                 
                           Source="C:\USERS\thumbnail.jpeg">
                            <Image.Style>
                                <Style TargetType="{x:Type Image}">
                                    <Setter Property="Opacity" Value="1"/>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding ElementName=tgBtn, Path=IsChecked}" Value="false">
                                            <Setter Property="Opacity" Value="0.5"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Image.Style>
                        </Image>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ToggleButton.Style>
</ToggleButton>