如何从视图模型移动椭圆

本文关键字：移动 模型 视图 | 更新日期: 2023-09-27 18:35:53

我正在创建一个WPF应用程序，我必须在其中将集合绑定到 Canvas，然后，每个元素都显示为椭圆。因此，由于我希望能够根据需要移动所有元素，因此我将每个元素的视图模型绑定到Canvas.Left和Canvas.Top。但是，当我为视图模型的绑定属性分配新值时，椭圆不会移动。

我的 xaml 文件：

<ItemsControl ItemsSource="{Binding Elements}">                   
<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Viewbox >
            <Grid>
                <Ellipse Stroke="Black" 
                         Width="{Binding ShapeWidth, Mode=TwoWay}" 
                         Height="{Binding ShapeHeight, Mode=TwoWay}" 
                         Canvas.Left="{Binding ShapeCanvasLeft, Mode=TwoWay}"
                         Canvas.Top="{Binding ShapeCanvasTop, Mode=TwoWay}"
                         Fill="{Binding Background}"
                         />                
                <TextBlock Text="{Binding ElementName}"
                           HorizontalAlignment="Center"  
                           TextAlignment="Center" 
                           VerticalAlignment="Center"
                           />
            </Grid>
        </Viewbox>
    </DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <Canvas />
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

我的视图模型文件：

public double ShapeCanvasLeft
{
    get
    {
        return m_shapeCanvasLeft;
    }
    set
    {
        m_shapeCanvasLeft = value;
        OnPropertyChanged(nameof(ShapeCanvasLeft));
    }
}
public double ShapeCanvasTop
{
    get
    {
        return m_shapeCanvasTop;
    }
    set
    {
        m_shapeCanvasTop = value;
        OnPropertyChanged(nameof(ShapeCanvasTop));
    }
}
. . .

然后在其他地方：

ShapeCanvasTop = 100; // This does not work

那么，我做错了什么？形状不会移动，但是，属性ShapeHeight和ShapeWidth完美工作，即形状正确调整大小。

提前谢谢。

如何从视图模型移动椭圆

ItemsControl 项被包装在父容器中，这就是您需要设置的位置：

<ItemsControl.ItemContainerStyle>
    <Style>
        <Setter Property="Canvas.Left" Value="{Binding ShapeCanvasLeft}" />
        <Setter Property="Canvas.Top" Value="{Binding ShapeCanvasTop}" />
    </Style>
</ItemsControl.ItemContainerStyle>
相关文章：