为什么在 UWP 中更改图像高度时应用程序崩溃？

Question

这是 XAML：

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="Black">


    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Center">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Image Source="Image/L.png" Name="L"></Image>
        <Image Source="Image/BG.png" Grid.Column="1" Name="BG" SizeChanged="BG_SizeChanged"></Image>
        <Image Source="Image/R.png" Grid.Column="2" Name="R"></Image>
    </Grid>
</Page>

我希望 L 和 R 的高度与 BG 相同。在 WPF 中我可以绑定 ActualHeight 轻松完成，但在 UWP 中失败了。我在 stackoverflow 中阅读了一些主题，知道我不能那样做没有了。

所以我用SizeChanged来做，代码如下：

 private void BG_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            L.Height = e.NewSize.Height;
            R.Height = e.NewSize.Height;
        }

好吧，当我运行APP，随意调整窗口大小时，APP崩溃了。奇怪的是visual studio没有报错，只是突出显示了这些代码： 这些代码默认不是我写的App.g.i.cs

这是怎么回事？我该如何解决这个问题？谢谢。

Answer 1

错误是

检测到布局周期。布局无法完成​​。

这对于指出问题的根本原因不太有用。但是它确实表示某种cycle（即函数被无休止地调用）。

在BG_SizeChanged 方法中添加调试日志后，我注意到有很多！在应用程序崩溃之前命中，这意味着 BG_SizeChanged 被重复调用，直到调用堆栈已满。保罗是对的。

调用栈是

BG 被调整大小 -> BG_SizeChanged 被调用 -> L/R 在 BG_SizeChanged 方法中被调整大小 -> BG 被调整大小（因为它占用了列宽定义为 * 后剩下的任何空间）=>>>>因此进入无限循环，直到应用崩溃。

解决方案

难点在于三个图像的原始尺寸在布局中起着重要作用，它们也可能具有不同的高宽比。到目前为止，我找到了最好的解决方案，而不必为每个人计算“正确”的绝对大小是

<Viewbox HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <StackPanel Orientation="Horizontal" Height="400">
        <Image Source="Image/L.png" 
        Name="L" Stretch="Fill" />
        <Image Source="Image/BG.png" 
        Grid.Column="1" 
        Name="BG" Stretch="Fill" />
        <Image Source="Image/R.png" 
        Grid.Column="2" Name="R" Stretch="Fill" />
    </StackPanel>
</Viewbox>  

关键是

1. 将显式 Height 设置为 StackPanel、400 或 500，该值并不重要，它只是设置了所有图像可以调整大小的上限。
2. 将每个 Image 的 Stretch 属性设置为 Fill，这样它们就可以占据所有可用的高度。
3. 最后，神奇的ViewBox 容器，它有助于在调整窗口大小时调整整个StackPanel 的大小，同时保持StackPanel 的高/宽比。这就是为什么StackPanel 的Height 无关紧要的原因。

Answer 2

我猜在最初加载图像时会调用回调方法。然后您设置图像高度，它再次调用回调方法（处理程序），然后再次调用它，因为您刚刚更改了高度......也许是stackoverflow。