在 WPF 中操作图像控件

Question

我正在使用 Flickr.NET API 在空闲时间学习 WPF。

我要执行的第一个功能是按名称/描述/标签搜索图像。这导致我在 WPF 中使用图像。

这是我的设置：

- XAML

<Grid>
    <ItemsControl x:Name="PhotoList" HorizontalAlignment="Left" Height="639" Margin="10,10,0,0" VerticalAlignment="Top" Width="1060" Style="{DynamicResource ScrollableItemControlStyle}" >
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal" Height="639" Width="1060"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type sys:String}">
                <Image Width="200" Source="{Binding Url}" Margin="0,0,5,5" MouseDown="OpenSelectedImage" MouseEnter="Image_MouseEnter" MouseLeave="Image_MouseLeave">
                </Image>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
    <Button x:Name="BackButton" Style="{DynamicResource ModernButtonStyle}" Content="Back" HorizontalAlignment="Left" Margin="710,654,0,0" VerticalAlignment="Top" Width="360" Height="56  " TabIndex="2" Background="#FF6600CC" IsDefault="True" Foreground="White" Click="BackButton_Click"/>
</Grid>  

- C#

public ObservableCollection<PhotoResult> images;
public ImageSearchResult(List<PhotoResult> imageList)
{
    InitializeComponent();
    if (imageList.Count > 0)
    {
        images = new ObservableCollection<PhotoResult>();
        foreach (var image in imageList)
        {
            images.Add(image);
        }
        PhotoList.ItemsSource = images;
    }
}

我们能做到吗：

1. 我的 WrapPanel 根本不滚动。
2. 当鼠标悬停在图像控件上时，我可以更改它们的大小（带有动画）以指示选择。但它覆盖了其他控件，而不是重新排列位置。我们能解决这个问题吗？我认为 ZIndex 在这种情况下不能按预期工作。
3. 另外，我们可以在选择时更改图像边框吗？我暂时做不到。

Answer 1

如果你想要一些“选择行为”，你应该使用一些 WPF 控件实现 ItemsControl - 你的“ItemsControl”不提供任何选择。

如果您使用“列表框”(MSDN ListBox)，您可以将您的 ItemsPanel 设置为您想要的任何内容。例如。您可以使用“UniformGrid”，其中每个项目共享相同的大小。您可以设置所需的行/列。

    <ItemsPanelTemplate x:Key="ItemsPanelTemplate">
        <UniformGrid Rows="2"/>
    </ItemsPanelTemplate>

要实现“MouseOver”的大小调整或在选择情况下设置边框，您可以为 ListBox 定义一个“ItemContainerStyle”。

        <Style x:Key="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
        <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
        <Setter Property="Padding" Value="2,0,0,0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Border x:Name="border" BorderBrush="Black" BorderThickness="0">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="image">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1.25"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="image">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1.25"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FFB61F1F"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedUnfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Image x:Name="image" Height="100" Width="100">
                            <Image.LayoutTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Image.LayoutTransform>
                        </Image>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="Selector.IsSelectionActive" Value="false"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}}"/>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

总而言之，您现在可以通过这种方式结合 ItemsPanel 和 ItemContainerStyle 使用 ListBox：

<ListBox ItemsPanel="{DynamicResource ItemsPanelTemplate}" 
         ItemsSource="{Binding Collection}"
         ItemContainerStyle="{DynamicResource ListBoxItemStyle}" />

这可能不是您所有问题的完整解决方案，但它应该提供一个很好的起点。