In an ItemsControl, how can I change the opacity of all the items not selected?

Question

I know the question sounds a little strange, but I'd like to change the opacity of all the items not selected in an ItemsControl. In other words, I'd like to make more "visible" the selected item, showing the others item more "obfuscated".

I have a custom control "MyCustomControl" derived from ItemsControl, where each item is an instance of a class "MyObject".

I made a style for my custom control where I set the ItemTemplate to be an Image with Source property bound to the property "LargeImage" of "MyObject". Here comes the problem. When I select an item I'd like to set the opacity of the others element, but I haven't found a way!

Here's my (simplified) XAML code:

<Style TargetType="{x:Type MyCustomControl}" x:Key="MyStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ui:MyCustomControl}">
                <Border Height="{TemplateBinding Height}" Width="Auto" Background="{TemplateBinding Background}">
                    <ItemsPresenter VerticalAlignment="Center" IsHitTestVisible="True"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"></StackPanel>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <Grid>
                    <Button>
                        <Image Source="{Binding Path=LargeImage}" Stretch="Uniform"/>
                    </Button>
                </Grid>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

<ListBox>
    <ListBox.ItemContainerStyle>
        <Setter Property="IsSelected" Value="{Binding IsSelected}"/>
        <Setter Property="Opacity" Value="{Binding IsSelected, Converter={StaticResource YourOpacityConverter}}"/>
    </ListBox.ItemContainerStyle>
</ListBox>

The above shows how you could do this with a ListBox, just to avoid confusion with your own types. It assumes your data items (MyObject) have an IsSelected property and that you've put a converter resource in your visual tree somewhere.

You could forgo the converter and instead trigger a state change when IsSelected changes, but you get the idea.

HTH,
Kent

Answer 2

I think a very simple solution would be adding a trigger to the data template that uses the "IsSelected" property, using either a Trigger or a DataTrigger,something like that:

                <DataTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter Property="Opacity" Value="Yourvalue"/>
                    </Trigger>
                    <DataTrigger  Binding="{Binding IsSelected}" Value="False">
                        <Setter Property="Opacity" Value="Yourvalue"/>
                    </DataTrigger>
                </DataTemplate.Triggers>