无法在ItemControl UWP中使用绑定设置canvas.top/left

时间:2016-03-18 16:15:27

标签: c# xaml wpf-controls

我想在UWP 10中制作像蛇一样的简单游戏,我希望在我的视图模型观察列表中绑定到矩形。我尝试这样做,但它无法正常工作。在我的XAML代码中,我遇到了三个问题: 绑定X. 绑定Y. 绑定RectItems

(由于未知的DataContext,无法解析符号。我将视图模型添加到带有xaml代码的页面构造函数中的上下文中,所以我不知道是什么问题?绑定到高度和宽度工作正常,我得到了矩形,但都处于相同的位置。

这是我的XAML代码:

    <Grid Grid.Row="1" Grid.Column="1">
        <ItemsControl ItemsSource="{Binding RectItems}">
            <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas  Background="Aqua"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

            <ItemsControl.ItemContainerStyle >
            <Style TargetType="ContentPresenter">
                <Setter Property="Canvas.Left" Value="{Binding X}"/>
                    <Setter Property="Canvas.Top" Value="{Binding Y}"/>
                </Style>
        </ItemsControl.ItemContainerStyle>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="Black"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
    </Grid>

查看型号:

public class GameViewModel:INotifyPropertyChanged
{
    public ObservableCollection<RectItem> RectItems { get; set; }

    public GameViewModel()
    {
        RectItems=new ObservableCollection<RectItem>();
        RectItem rect =new RectItem() {X=50,Y=60,Width=30,Height=20}; // all properties are public double type
        RectItems.Add(rect);
    }

    public event PropertyChangedEventHandler PropertyChanged;

    [NotifyPropertyChangedInvocator]
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

1 个答案:

答案 0 :(得分:0)

ItemsControl在ContentPresenter中包装每个项目。
Canvas.Top/Left属性仅适用于Canvas的直接子元素。
因此您可以使用TranslateTransform。
<Rectangle ...>
<Rectangle.RenderTransform>
<TranslateTransform X="{Binding left}" Y="{Binding top}"/>
</Rectangle.RenderTransform>
</Rectangle>