Question

Below is a sample of what I am after:

I have decided to implement that using a ListView (tried a custom control based on Selector but I could not managed to output anything satisfying).

My list displays fine but I am struggling to find how to change the image source when the item gets selected. Here is my code:

<UserControl.Resources>
    <DataTemplate x:Key="PagingIndicatorTemplate">
        <Image Width="20" Height="20">
            <Image.Style>
                <Style TargetType="Image">
                    <Setter Property="Source" Value="/MyProject;component/Resources/Images/ic_paging_button_normal.png" />
                <!-- I guess that's where I need to put my stuff to change the image ? ... -->
                </Style>
            </Image.Style>
        </Image>
    </DataTemplate>
</UserControl.Resources>

    <ListView Name="PagingIndicator" 
              Height="30" 
              ItemTemplate="{DynamicResource PagingIndicatorTemplate}" 
              ItemsSource="{Binding Path=News}">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Style.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
                </Style.Resources>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>

Answer 1

I have decided to solve the problem like that:

• Make two different item templates (each with their own images, styles for mouse over, mouse pressed, …)
• Change the Template property of the ListViewItem with a trigger on its IsSelected property.