将 SizeChanged 事件绑定到 ViewModel

Question

我的xml代码：

            <Grid>
                <Interactivity:Interaction.Behaviors>
                    <Interactions:EventTriggerBehavior EventName="SizeChanged">
                        <Interactions:InvokeCommandAction Command="{Binding OnSizeChanged}"/>
                    </Interactions:EventTriggerBehavior
            </Grid>

在视图模型中：

public IRelayCommand OnSizeChanged => new RelayCommand(SizeChangedEvent);
private void SizeChangedEvent()
{
     // How to receive width and height at here
}

所以我的问题是如何在视图模型中接收高度和高度？

谢谢

Answer 1

您可以使用CommandParameter属性和值转换器。

XAML：

<Grid x:Name="grid">
    <Interactivity:Interaction.Behaviors>
        <Interactions:EventTriggerBehavior EventName="SizeChanged">
            <Interactions:InvokeCommandAction Command="{Binding OnSizeChanged}">
                <Interactions:InvokeCommandAction.CommandParameter>
                    <Binding ElementName="grid">
                        <Binding.Converter>
                            <local:SizeConverter />
                        </Binding.Converter>
                    </Binding>
                </Interactions:InvokeCommandAction.CommandParameter>
            </Interactions:InvokeCommandAction>
        </Interactions:EventTriggerBehavior>
    </Interactivity:Interaction.Behaviors>
</Grid>

转换器：

public class SizeConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language) =>
        value is FrameworkElement fe ? (fe.ActualWidth, fe.ActualHeight) : (double.NaN, double.NaN);

    public object ConvertBack(object value, Type targetType, object parameter, string language) =>
        throw new NotSupportedException();
}

查看型号：

public IRelayCommand OnSizeChanged => new RelayCommand<(double, double)>(SizeChangedEvent);

private void SizeChangedEvent((double width, double height) size)
{
    //...
}

Answer 2

Canvas 不能有sizechanged事件，因为 Canvas 使用绝对定位作为其包含的子元素的布局技术。 如文件所述

因为绝对定位不考虑应用程序窗口的大小、缩放或其他用户选择的大小，所以使用适应不同方向和屏幕设置的容器元素，例如 Grid 或 StackPanel，通常是比使用更好的选择帆布。 有关详细信息，请参阅使用 XAML 定义布局。

编辑：（基于评论）

对于 Grid，您可以直接将sizechanged事件绑定到 ViewModel 中的事件处理程序，如下例所示

Xaml

<Grid SizeChanged="{x:Bind viewModel.Grid_SizeChanged,Mode=OneWay}">
</Grid> 

Xaml.cs

  ViewModel viewModel { get; set; } = new ViewModel();
  public MainPage()
  {
      this.InitializeComponent();
  }

视图模型.cs

  public class ViewModel
  {
     public void Grid_SizeChanged(object sender, SizeChangedEventArgs e)
     {
          var height = (sender as Grid).ActualHeight;
     }
  }