在MouseOver期间在ListBox中的其他图像上显示放大的图像

Question

我正在尝试创建各种类型的照片库，并且我设法将图像显示在一个漂亮的网格中，但我正在努力使用转换缩略图的特定触发器（应该）将变换后的缩略图显示在其他图像上。

通过研究我发现将ZIndex更改为高数字应允许转换后的缩略图显示在其他缩略图上，但转换后的缩略图仍显示 其他图像。

代码

<Grid>
    <ListBox ItemsSource="{Binding Images, Mode=OneWay}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <TextBlock Panel.ZIndex="1000" Grid.Row="1" Text="{Binding Label}" Foreground="White" Width="100" Height="20" TextTrimming="CharacterEllipsis" VerticalAlignment="Center">
                        <TextBlock.Background>
                            <SolidColorBrush Opacity="0.50" Color="Black"/>
                        </TextBlock.Background>
                    </TextBlock>
                    <Border Grid.Row="0" Grid.RowSpan="2" BorderThickness="1" Margin="1" x:Name="border" MouseDown="OnImageViewBorderMouseDown">
                        <Image Source="{Binding Thumbnail, Mode=OneWay}" Height="100" Width="100" />
                        <Border.Style>
                            <Style TargetType="Border">
                                <Setter Property="BorderBrush" Value="Black" />
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding ElementName=border, Path=IsMouseOver}" Value="True">
                                        <Setter Property="BorderBrush" Value="{DynamicResource AccentColorBrush}"/>
                                        <Setter Property="Grid.ZIndex" Value="1000"/>
                                        <Setter Property="Panel.ZIndex" Value="1000"/>
                                        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
                                        <Setter Property="RenderTransform">
                                            <Setter.Value>
                                                <ScaleTransform ScaleX="1.20" ScaleY="1.20"/>
                                            </Setter.Value>
                                        </Setter>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Border.Style>
                    </Border>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal" IsItemsHost="True"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>
</Grid>

问题图像

Answer 1

在Panel.ZIndex的Border元素上设置ItemTemplate无效，因为Border不是ItemsPanel中WrapPanel的直接子元素。

您应该通过设置ListBox的ItemContainerStyle属性，将Style应用于ListBoxItem容器元素，该元素是作为ItemsPanel的子元素创建的：

<ListBox ItemsSource="{Binding Images}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Panel.ZIndex" Value="1000"/>
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX="1.20" ScaleY="1.20"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ListBox.ItemContainerStyle>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Thumbnail}" Width="100" Height="100"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Answer 2

从CodePlex上的C.B.R. : Comic Book Reader项目复制的样本ListBox样式，来自文件CBR/Resources/XAML/System/ListBox.xaml

<Style x:Key="CbrStandardListBox" TargetType="{x:Type ListBox}">
    <Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True"/>
    <Setter Property="VirtualizingStackPanel.VirtualizationMode" Value="Standard"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBox}">
                <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="True">
                    <ScrollViewer Style="{DynamicResource CbrScrollViewer}" Focusable="False" Padding="{TemplateBinding Padding}">
                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </ScrollViewer>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.InactiveCaptionTextBrushKey}}"/>
                    </Trigger>
                    <Trigger Property="IsGrouping" Value="True">
                        <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Resources>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Background" Value="{DynamicResource CbrBackgroundNormal}"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Grid Margin="4,0,4,4">
                            <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" 
                                    BorderThickness="1" SnapsToDevicePixels="True"/>
                            <ContentPresenter Margin="8,5"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True" />
                                    <Condition Property="IsSelected" Value="False"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" Value="{DynamicResource CbrBackgroundHighlighted}" />
                                <Setter Property="BorderBrush" Value="{DynamicResource CbrBorderBrushHighlighted}" />
                            </MultiTrigger>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Background" Value="{DynamicResource CbrBackgroundSelected}" />
                                <Setter Property="BorderBrush" Value="{DynamicResource CbrBorderBrushSelected}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Style.Resources>
</Style>