UWP：ItemMargin 未更新为正确的值

Question

我正在开发一个 UWP 应用程序，它使用来自 Windows 社区示例的轮播控件。我试图让 Carousel 的图像出现在 ItemMargin = actualWidth/2。我还通过使用 Page.SizeChanged 使这个动态化。我在这里使用 MVVM 模式。我的问题是，当我在 ViewModel 中分配 ItemMargin = actualWidth/2 时，它并没有反映在实际的 View.My 代码中，如下所示：

Sample.xaml

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  SizeChanged = {onSizeChange}
  x:Name ="Carousel"
  mc:Ignorable="d">

   <Grid>
     <Border Margin="0">
       <controls:Carousel x:Name="CarouselControl"
              InvertPositive="True"
              ItemDepth="300"
              ItemMargin="{x:bind ViewModel.ItemMargin}"
              ItemRotationX="0"
              ItemRotationY="45"
              ItemRotationZ ="0"
              Orientation="Horizontal"
              SelectedIndex="4">
    <controls:Carousel.EasingFunction>
      <CubicEase EasingMode="EaseOut" />
    </controls:Carousel.EasingFunction>
    <controls:Carousel.ItemTemplate>
      <DataTemplate>
        <Image Width="200"
              Height="200"
              VerticalAlignment="Bottom"
              Source="{Binding Thumbnail}"
              Stretch="Uniform" />
      </DataTemplate>
    </controls:Carousel.ItemTemplate>
  </controls:Carousel>
</Border>

Sample.xaml.cs

背后的代码

 public sealed partial class Sample
 {
   //constructor
   public Sample()
   {
     this.InitializeComponent();
     this.UpdateWidth();
   }

  private void SizeChange(object sender, SizeChangedEventArgs e)
    {
        _ = sender; // reference unreferenced parameter
        _ = e; // reference unreferenced parameter
        this.UpdateWidth();
    }

    private void UpdateWidth
    {
        this.ViewModel.UpdateItemsMargin(this.Carousel.ActualWidth);
    }

   }

ViewModel代码如下SampleViewModel.cs

  public class SampleViewModel
 {
    private int itemM;

    public int ItemsMargin
    {
        get => this.itemM;
        set => this.SetProperty(ref this.itemsM, value);
    }
    
    public void UpdateItemsMargin(double actualWidth)
    {
        this.ItemsMargin = (int)actualWidth / 2;
    }


  }

我注意到视图中 Items Margin 的值没有改变。但是，如果我直接在值中更改值，我可以看到更改。此外，如果 actualWidth 具有非空值并且确实如此，我还使用调试器查看更改。关于为什么我看不到旋转木马控件的项目边距变化的任何想法？

Answer 1

如果您希望ItemMargin 属性的值在Page.SizeChanged 事件处理程序被触发时发生变化，然后绑定源中的ItemsMargin 的值发生变化，您需要让 SampleViewModel 实现 InotifyPropertyChanged 接口通知客户端属性值已更改，并在 {x:Bind} 中应用 OneWay 模式 分机。

例如：

public class SampleViewModel:INotifyPropertyChanged
{
    private int itemM;
    public int ItemsMargin
    {
        get { return itemM; }
        set 
        {
            if (itemM != value)
            {
                itemM = value;
                NotifyPropertyChanged();
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    public void UpdateItemsMargin(double actualWidth)
    {
        this.ItemsMargin = (int)actualWidth / 2;
    }
}

在 ItemMargin 属性的绑定中应用 Mode=OneWay。

ItemMargin="{x:Bind ViewModel.ItemsMargin,Mode=OneWay}"

UWP：ItemMargin 未更新为正确的值

UWP: ItemMargin not updating to correct value

uwp

uwp-xaml