Question

有一个网格，后面用代码动态填充了Image控件（对此很抱歉）。网格有1列，多页，每页内部有1个边框，其中Image作为Border.Child。我需要的是在Button.Click事件触发时在网格中缩放（缩放）我的图像。我之前对图像使用了“缩放变换”，但是我没有设法将网格元素“图像”与“点击”处理程序绑定在一起。请提出建议，如何逐步缩放网格内的图像。 提前谢谢！

是的，我知道这太可怕了，应该以不同的方式进行，我还在学习如何正确地做到这一点。

方法，生成网格。 ZOOM click方法之后（仅用于缩放，还有另一种用于缩小的方法）

public void RefreshView(List<TiffImage> tiffImageList)
{
    try
    {
        if (tiffImageList.Count == 0)
            return;
        SetControlSizes();
        gridImageList.Children.Clear();
        gridImageList.RowDefinitions.Clear();
        gridImageList.ColumnDefinitions.Clear();

        RowDefinitionCollection rd = gridImageList.RowDefinitions;
        ColumnDefinitionCollection cd = gridImageList.ColumnDefinitions;

        cd.Add(new ColumnDefinition() { Width = GridLength.Auto });
        for (int i = 0; i < tiffImageList.Count; i++)
        {
            rd.Add(new RowDefinition() { Height = GridLength.Auto });
        }

        int rowIndex = 0;
        foreach (var tiffImage in tiffImageList)
        {
            Image imageListViewItem = new Image();
            imageListViewItem.Margin = new Thickness(0, 0, 0, 0);
            RenderOptions.SetBitmapScalingMode(imageListViewItem, BitmapScalingMode.HighQuality);
            imageListViewItem.Name = $"Image{tiffImage.index.ToString()}";
            imageListViewItem.Source = tiffImage.image;
            imageListViewItem.HorizontalAlignment = HorizontalAlignment.Center;
            imageListViewItem.VerticalAlignment = VerticalAlignment.Center;
            imageListViewItem.Stretch = Stretch.Uniform;
            imageListViewItem.VerticalAlignment = VerticalAlignment.Center;
            imageListViewItem.HorizontalAlignment = HorizontalAlignment.Center;

            Border border = new Border();
            border.BorderBrush = Brushes.LightGray;
            border.BorderThickness = new Thickness(1);
            Thickness margin = border.Margin;
            border.Margin = new Thickness(20, 10, 20, 10);
            border.Child = imageListViewItem;
            Grid.SetColumn(border, 0);
            Grid.SetRow(border, rowIndex);


            gridImageList.Children.Add(border);
            rowIndex++;
        }
    }
    catch (Exception ex)
    {
        throw ex;
    }
}


private void btnZoom_Click(object sender, RoutedEventArgs e)
{
    foreach (UIElement item in gridImageList.Children)
    {
        Border border = (Border)item;
        Image image = (Image)border.Child;
        var imgViewerScaleTransform = (ScaleTransform)(image.LayoutTransform);
        if ((imgViewerScaleTransform.ScaleX + 0.2) > 3 || (imgViewerScaleTransform.ScaleY + 0.2) > 3)
            return;
        imgViewerScaleTransform.ScaleX += 0.2;
        imgViewerScaleTransform.ScaleY += 0.2;
        image.LayoutTransform = imgViewerScaleTransform;
    }
}

Answer 1

这是ScrollViewer中可伸缩ItemsControl的非常简单的版本。

它可能会在许多方面得到改进。首先，应该通过将按钮命令属性绑定到视图模型中的ZoomIn和ZoomOut命令来替换处理按钮Click事件（为简便起见，省略了此内容）。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <ScrollViewer HorizontalScrollBarVisibility="Auto"
                  VerticalScrollBarVisibility="Auto">
        <ItemsControl ItemsSource="{Binding Images}">
            <ItemsControl.LayoutTransform>
                <ScaleTransform ScaleX="{Binding Scale}" ScaleY="{Binding Scale}"/>
            </ItemsControl.LayoutTransform>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="1"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border BorderThickness="1" BorderBrush="LightGray">
                        <Image Source="{Binding}"/>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
    <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Right">
        <Button Content=" + " Click="ZoomInButtonClick"/>
        <Button Content=" - " Click="ZoomOutButtonClick"/>
    </StackPanel>
</Grid>

背后的代码：

public partial class MainWindow : Window
{
    private readonly ViewModel viewModel = new ViewModel();

    public MainWindow()
    {
        InitializeComponent();
        DataContext = viewModel;

        foreach (string imageFile in Directory.EnumerateFiles(
            @"C:\Users\Public\Pictures\Sample Pictures", "*.jpg"))
        {
            viewModel.Images.Add(new BitmapImage(new Uri(imageFile)));
        }
    }

    private void ZoomInButtonClick(object sender, RoutedEventArgs e)
    {
        viewModel.Scale *= 1.1;
    }

    private void ZoomOutButtonClick(object sender, RoutedEventArgs e)
    {
        viewModel.Scale /= 1.1;
    }
}

public class ViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<ImageSource> Images { get; }
        = new ObservableCollection<ImageSource>();

    private double scale = 1;

    public double Scale
    {
        get { return scale; }
        set
        {
            scale = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Scale)));
        }
    }
}

Answer 2

我设法找到一个丑陋，可怕的解决方案，对此感到抱歉。如果没有其他选择，请仅使用它。请添加答案，提供更好的解决方案。谢谢您的宝贵时间！

我们需要添加（在后面的代码中）定义为ScaleTransform的Image.LayoutTransform：

imageListViewItem.LayoutTransform = new ScaleTransform();

我用//强调下面方法的变化。另外，大多数更改都发生在下面的Zoom / ZoomOut方法中。

public void RefreshView(List<TiffImage> tiffImageList)
{
    try
    {
        if (tiffImageList.Count == 0)
            return;
        SetControlSizes(); 
        gridImageList.Children.Clear();
        gridImageList.RowDefinitions.Clear();
        gridImageList.ColumnDefinitions.Clear(); 

        RowDefinitionCollection rd = gridImageList.RowDefinitions;
        ColumnDefinitionCollection cd = gridImageList.ColumnDefinitions;

        cd.Add(new ColumnDefinition() { Width = GridLength.Auto });
        for (int i = 0; i < tiffImageList.Count; i++)
        {
            rd.Add(new RowDefinition() { Height = GridLength.Auto });
        }

        int rowIndex = 0;
        foreach (var tiffImage in tiffImageList)
        {
            Image imageListViewItem = new Image();
            imageListViewItem.Margin = new Thickness(0, 0, 0, 0);
            RenderOptions.SetBitmapScalingMode(imageListViewItem, BitmapScalingMode.HighQuality);
            imageListViewItem.Name = $"Image{tiffImage.index.ToString()}"; 
            imageListViewItem.Source = tiffImage.image;
            imageListViewItem.HorizontalAlignment = HorizontalAlignment.Center;
            imageListViewItem.VerticalAlignment = VerticalAlignment.Center;
            imageListViewItem.Stretch = Stretch.Uniform;
            imageListViewItem.VerticalAlignment = VerticalAlignment.Center;
            imageListViewItem.HorizontalAlignment = HorizontalAlignment.Center;
            //  Add  HERE!!!
            imageListViewItem.LayoutTransform = new ScaleTransform();
            //
            Border border = new Border();
            border.BorderBrush = Brushes.LightGray;
            border.BorderThickness = new Thickness(1);
            Thickness margin = border.Margin;
            border.Margin = new Thickness(20, 10, 20, 10);
            border.Child = imageListViewItem;
            Grid.SetColumn(border, 0);
            Grid.SetRow(border, rowIndex);
            gridImageList.Children.Add(border);
            rowIndex++;
        }
    }
    catch (Exception ex)
    {
        throw ex;
    }
}

我们从Grid中获取所有元素并缩放（缩放）它们，然后清除Grid.Children并用新项目填充它。

private void btnZoom_Click(object sender, RoutedEventArgs e)
{
    List<Border> list = new List<Border>();
    foreach (UIElement item in gridImageList.Children)
    {
        Border border = (Border)item;
        Image image = (Image)border.Child;
        var imgViewerScaleTransform = (ScaleTransform)(image.LayoutTransform);
        imgViewerScaleTransform.CenterX = 0.5;
        imgViewerScaleTransform.CenterY = 0.5;
        if ((imgViewerScaleTransform.ScaleX + 0.2) > 3 || (imgViewerScaleTransform.ScaleY + 0.2) > 3)
            return;
        imgViewerScaleTransform.ScaleX += 0.2;
        imgViewerScaleTransform.ScaleY += 0.2;
        image.LayoutTransform = imgViewerScaleTransform;
        border.Child = image;
        list.Add(border);
    }
    gridImageList.Children.Clear();
    foreach (Border border in list)
    {
        gridImageList.Children.Add(border);
    }
}
private void btnZoomOut_Click(object sender, RoutedEventArgs e)
{
    List<Border> list = new List<Border>();
    foreach (UIElement item in gridImageList.Children)
    {
        Border border = (Border)item;
        Image image = (Image)border.Child;
        var imgViewerScaleTransform = (ScaleTransform)(image.LayoutTransform);
        imgViewerScaleTransform.CenterX = 0.5;
        imgViewerScaleTransform.CenterY = 0.5;
        if ((imgViewerScaleTransform.ScaleX - 0.2) < 0.8 || (imgViewerScaleTransform.ScaleY - 0.2) < 0.8)
            return;
        imgViewerScaleTransform.ScaleX += -0.2;
        imgViewerScaleTransform.ScaleY += -0.2;
        image.LayoutTransform = imgViewerScaleTransform;
        border.Child = image;
        list.Add(border);
    }
    gridImageList.Children.Clear();
    foreach (Border border in list)
    {
        gridImageList.Children.Add(border);
    }
}

如何使用按钮（缩放/缩放）Grid.Children（图像）。单击C＃WPF

2 个答案: