SizeChanged 未触发 Canvas 上的元素答案

【问题标题】：SizeChanged not firing for elements on CanvasSizeChanged 未触发 Canvas 上的元素
【发布时间】：2019-10-29 23:04:13
【问题描述】：

我有一个简单的 UWP 应用，定义如下：

using System;
using System.Diagnostics;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace SizeChangedBug
{
  public sealed partial class MainPage : Page
  {
    public MainPage() {
      this.InitializeComponent();
      this.Rectangle.SizeChanged += Rectangle_SizeChanged;
    }

    private void Rectangle_SizeChanged(object sender, SizeChangedEventArgs e) {
      Debug.WriteLine("Rectangle_SizeChanged");
    }
  }
}

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

  <Canvas>
    <Slider x:Name="Slider" Orientation="Vertical" Width="80" Height="300" Value="400" Minimum="0" Maximum="600" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <Rectangle x:Name="Rectangle" Margin="200,200" Width="{Binding Value, ElementName=Slider}" Height="{Binding Value, ElementName=Slider}" Fill="Red" HorizontalAlignment="Left" VerticalAlignment="Top"/>
  </Canvas>
</Page>

问题是 SizeChanged 永远不会触发，并且 Rectangle_SizeChanged 永远不会在 Rectangle 的大小发生变化时被调用。我错过了什么还是 UWP 中的错误？下面的 XAML 将 Canvas 替换为 Grid 作品。

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

  <Grid>
    <Slider x:Name="Slider" Orientation="Vertical" Width="80" Height="300" Value="400" Minimum="0" Maximum="600" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <Rectangle x:Name="Rectangle" Margin="200,200" Width="{Binding Value, ElementName=Slider}" Height="{Binding Value, ElementName=Slider}" Fill="Red" HorizontalAlignment="Left" VerticalAlignment="Top"/>
  </Grid>
</Page>

【问题讨论】：

您好，很抱歉回复晚了，我们仍在研究您的问题。但也许你可以告诉我们你为什么在这里使用SizeChanged 事件？了解这一点有助于我们提供更好的解决方案。建议您使用Transform，这将比使用Transform更流畅，而不是修改Width/Height。
嗨@RichardZhang-MSFT，Transform 会触发 SizeChanged 吗？解决方案在这里发布非常复杂，因此我将其提炼成一个简单的示例，应该易于理解/调试。

标签： c# uwp uwp-xaml

【解决方案1】：

Canvas 使用绝对定位作为其包含的子元素的布局技术。所以子的 SizeChanged 事件不会触发。它不考虑调整大小或缩放。它取决于 x,y 坐标。我引用了 Microsoft 文档中的确切内容。

https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.canvas#remarks

因为绝对定位没有考虑到大小应用程序窗口、缩放或其他用户选择的大小，使用适应不同方向和屏幕的容器元素设置，例如 Grid 或 StackPanel，通常比使用画布。

您可以在Layout Panels了解更多信息

【讨论】：

这如何回答这个问题？问题是为什么元素的 SizeChanged 在放置在 Canvas 中时不会触发。
放置在画布内的元素不会受到任何尺寸因素的影响。画布可以容纳类似绘图纸的东西。它们中的位置就像在 x,y 坐标中一样。不会影响大小改变
元素的大小不是由 Canvas 改变的，而是由 Slider 的值改变的。检查 xaml 代码。
是的，我看到画布中包含的任何内容都不会触发大小更改。这很简单，这就是答案，因为它使用绝对定位
跟绝对定位有什么关系？矩形的大小由滑块显式地改变，矩形的 SizeChanged 不会触发。