如何突出显示ItemsControl中的选定项目? [英] How to highlight selected item in ItemsControl?

问题描述

我有以下XAML.如何突出显示ItemsControl中的选定项目?我可以为ListView覆盖选定的项目模板，但如何对ItemsControl实现相同的效果?有没有其他可显示图像集合的控件?

I have the following XAML. How can i highlight the selected item in the ItemsControl ? I can override the selected item template for ListView but how to achieve the same for ItemsControl? Is there any alternative control that can display a collection of images ?

<Window x:Class="ImageScrollDemo.View.MoviePosterView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ImageScrollDemo"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    Title="MoviePosterView" Height="367" Width="725" Foreground="White">
<Window.Background>
    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="#FF505050" Offset="0"/>
        <GradientStop Color="#FF202020" Offset="1"/>
    </LinearGradientBrush>
</Window.Background>
<Window.DataContext>
    <local:MainWindowViewModel />
</Window.DataContext>
<Window.Resources>
    <local:MainWindowViewModel x:Key="ViewModel" />

    <Style TargetType="Image" x:Key="ImageHover">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Opacity" Value="1" />
                <Setter Property="BitmapEffect">
                    <Setter.Value>
                        <OuterGlowBitmapEffect GlowColor="Gold" GlowSize="8"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="Opacity" Value="0.7" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<i:Interaction.Triggers>
    <i:EventTrigger EventName="Loaded">
        <i:InvokeCommandAction Command="{Binding PopulateMovieGrid}" />
    </i:EventTrigger>
</i:Interaction.Triggers>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="60" />
    </Grid.RowDefinitions>
    <ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto">
        <ItemsControl Name="itemsCtrl" HorizontalContentAlignment="Center" ItemsSource="{Binding Path=MovieCollection, Mode=TwoWay}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="5" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <ItemsControl.ItemContainerStyle>
                <Style TargetType="ContentPresenter">
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <Border BorderBrush="Black" BorderThickness="5">
                                    <ContentPresenter Content="{Binding}"/>
                                </Border>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ItemsControl.ItemContainerStyle>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                        <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
                            <Image Style="{StaticResource ImageHover}" Margin="0,5,0,0" RenderOptions.BitmapScalingMode="HighQuality" SnapsToDevicePixels="True" HorizontalAlignment="Center" Source="{Binding Path=Poster}" Height="150" />
                            <TextBlock Name="txtTitle" FontSize="10" HorizontalAlignment="Center" TextAlignment="Justify" Text="{Binding Title}" TextWrapping="Wrap" MaxWidth="110" />
                        </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Grid>

推荐答案

ItemsControl不跟踪SelectedItem

如果您想要这种行为，我建议覆盖ListBox

If you want that behavior, I would suggest overwriting the styles and templates for a ListBox

<ListBox Name="itemsCtrl" HorizontalContentAlignment="Center" ItemsSource="{Binding Path=MovieCollection, Mode=TwoWay}">

    <ListBox.Resources>
        <!-- Set SelectedItem Background here -->
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Yellow"/>
    </ListBox.Resources>

    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="5" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

    <ListBox.ItemTemplate>
        <DataTemplate>
                <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
                    <Image Style="{StaticResource ImageHover}" Margin="0,5,0,0" RenderOptions.BitmapScalingMode="HighQuality" SnapsToDevicePixels="True" HorizontalAlignment="Center" Source="{Binding Path=Poster}" Height="150" />
                    <TextBlock Name="txtTitle" FontSize="10" HorizontalAlignment="Center" TextAlignment="Justify" Text="{Binding Title}" TextWrapping="Wrap" MaxWidth="110" />
                </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

这篇关于如何突出显示ItemsControl中的选定项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！