在Viewbox中缩放基于网格的图像选择器-C#WPF

Question

当父级是Viewbox时，我在使用Grid时遇到问题。

我在WPF中有一个由两列Grid组成的图像选择器。

1. 右列是缩略图的ListBox，占网格整个宽度的25%
2. 当选择缩略图时，它会显示在占据剩余空间的左列中

邮件图像应保持其纵横比进行拉伸，直到其中一个尺寸达到列宽或网格高度。

我希望能够均匀地缩放整个图像选择器，所以我将其包围在Viewbox中。然而，在添加ViewBox之后，它似乎破坏了Grid和ListBox的行为：

1. 点击第二个图像会选择错误的图像
2. 当选择不同纵横比的图像时，不会考虑栅格列比率。例如，如果我选择像第一个一样的瘦图像，那么列的比例更像50/50

我不想拥有Viewbox或Grid控件，我只想在Viewbox不存在时从网格和ListBox获得功能，并添加网格及其子级的统一缩放。

我提取了以下相关代码：

using System;
using System.Collections;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;
namespace WpfViewBox
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
Images = new List<ImageSource>()
{
new BitmapImage(new Uri("https://images.unsplash.com/photo-1648720666508-102320ea1c11?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMHx8fGVufDB8fHx8")),
new BitmapImage(new Uri("https://images.unsplash.com/photo-1648672231811-4b3b3642f2e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzOXx8fGVufDB8fHx8")),
new BitmapImage(new Uri( "https://images.unsplash.com/photo-1648687735004-acb0bb16c8d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNTB8fHxlbnwwfHx8fA%3D%3")),
};
ImageListBox.SelectedIndex = 0;
}
private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
MainImage.Source = (ImageSource)ImageListBox.SelectedItem;
}
public IEnumerable Images { get; set; }
}
}

<Window x:Class="WpfViewBox.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfViewBox"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Viewbox>
<Grid Margin="8" MaxHeight="240" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width=".25*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0"
x:Name="MainImage"
Height="240"
Stretch="Uniform"
StretchDirection="Both"/>
<ListBox x:Name="ImageListBox" 
Grid.Column="1" 
SelectionChanged="ListBox_SelectionChanged" 
ItemsSource="{Binding Images, RelativeSource={RelativeSource AncestorType=Window}}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
ScrollViewer.VerticalScrollBarVisibility="Hidden"
HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}"
HorizontalAlignment="Center"
Height="120"
Stretch="Uniform"
StretchDirection="Both"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Viewbox>
</Window>

注意：垂直滚动条是隐藏的，但您可以使用箭头键一次移动一个，也可以使用鼠标滚轮滚动多个(取决于您的系统设置(。

Answer 1

作为@Alex.Wei对此问题的第一条评论，使用Viewbox缩放包含标签和文本框状态的网格，为网格添加固定的高度和宽度可以解决问题。

作为对ColumnDefinition的回答也提到了。Viewbox中的网格宽度是否设置为"自动"？

通常设置固定的高度/宽度会阻止网格增长，因此指定它们是违反直觉的，但将Viewbox作为父对象会改变这种行为