WPF：在运行时使用图像调整堆栈面板的大小答案

【问题标题】：WPF: Resizing stackpanels with images at runtimeWPF：在运行时使用图像调整堆栈面板的大小
【发布时间】：2018-02-21 16:10:56
【问题描述】：

我正在尝试为飞行模拟器创建应用程序用户可以预设飞机窗口的位置和大小一组弹出式收音机显示，如第一个屏幕截图所示。

但是，我遇到了一些问题。在第二屏幕截图，当我水平缩放主网格时使用网格拆分器，图像的大小也会垂直增加水平而不是保持在初始高度。任何想法如何解决这个问题？

【问题讨论】：

这是因为 ViewBox 会改变它包含的控件以尽可能地填充可用区域
即使移除了 ViewBox，它仍然会发生。图像坚持均匀缩放，而不是只有一个轴。
还有其他人有什么想法吗？

标签： wpf stackpanel image-scaling gridsplitter

【解决方案1】：

好的，解决方案是使用网格并设置图像分配到的 Grid.Row。然后通过缩放网格，我可以得到想要的效果。

XAML：

        <Grid x:Name="spGrid" Height="154" Width="101" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" MouseDown="PosStart" MouseMove="PosDelta" MouseUp="PosEnd">
            <Grid.RowDefinitions>
                <RowDefinition x:Name="spRow1" Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="spCol1" Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <GridSplitter Grid.Column="1" Grid.RowSpan="5" Width="1"  HorizontalAlignment="Right" VerticalAlignment="Stretch" DragDelta="PanelXDelta" DragStarted="PanelXStart"/>
            <GridSplitter Grid.Row="1" Grid.ColumnSpan="4" Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" DragDelta="PanelYDelta" DragStarted="PanelYStart"/>
                <Grid Grid.Column="0" Grid.Row="0" x:Name="spStack" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch">
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Image Grid.Row="0" x:Name="imgKMA30" Source="UI/KMA30.jpg" StretchDirection="Both" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                    <Image Grid.Row="1" x:Name="imgKR165A" Source="UI/KX165A.jpg" StretchDirection="Both" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                    <Image Grid.Row="2" x:Name="imgKX165" Source="UI/KX165.jpg" StretchDirection="Both" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                    <Image Grid.Row="3" x:Name="imgKN62A" Source="UI/KN62A.jpg" StretchDirection="Both" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                    <Image Grid.Row="4" x:Name="imgKR87" Source="UI/KR87.jpg" StretchDirection="Both" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                    <Image Grid.Row="5" x:Name="imgKT74" Source="UI/KT74.jpg" StretchDirection="Both" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                </Grid>
        </Grid>

C#：

    private void PanelXDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
    {
        spGrid.Width += e.HorizontalChange;
    }

    private void PanelYDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
    {
        spGrid.Height += e.VerticalChange;
    }

【讨论】：