Question

我有以下XAML。如何突出显示ItemsControl中的选定项？我可以覆盖ListView的选定项目模板，但如何为ItemsControl实现相同的功能？是否有可以显示图像集的替代控件？

<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>

Answer 1

ItemsControl不会跟踪SelectedItem

如果您想要这种行为，我建议您覆盖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>

Answer 2

您也可以通过表达式混合互动来完成此操作。在顶部容器（StackPanel或网格）的ItemsTemplate中使用事件名称MouseLeftDown或Tapped Event（在Windows 8.1中）。

xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
<i:Interaction.Triggers>
    <i:EventTrigger EventName="MouseLeftDown">
        <Core:ChangePropertyAction PropertyName="Background" Value="Green"/>
    </i:EventTrigger>
</i:Interaction.Triggers>

这应该可以解决问题

如何突出ItemsControl中的所选项？

2 个答案: