Question

在下面的XAML中，请填写“WhatGoesHere”节点并向我解释如何不会弄乱Canvas上的坐标。

<ItemsControl ItemsSource="{Binding ViewModels}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <WhatGoesHere?>
                <Path Stroke="CornflowerBlue" StrokeThickness="2">
                    <Path.Data>
                        <PathGeometry Figures="{Binding Figures}"/>
                    </Path.Data>
                </Path>
                <Path Stroke="Red" StrokeThickness="2">
                    <Path.Data>
                        <PathGeometry Figures="{Binding Figures2}"/>
                    </Path.Data>
                </Path>
            </WhatGoesHere?>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

我的示例在模板中有两个相同类型的对象，但我也会有其他几种控件类型。

Answer 1

DataTemplate中有多个元素。您必须将两个Path对象放入某种Panel，例如Grid。问题是你的所有画布坐标都在哪里计算，以便你可以将Grid绑定到它？在您的视图模型中？然后你可以绑定它，它可能看起来像这样：

<ItemsControl ItemsSource="{Binding ViewModels}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid Canvas.Top="{Binding Y}" Canvas.Left="{Binding X}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Path Stroke="CornflowerBlue" StrokeThickness="2">
                    <Path.Data>
                        <PathGeometry Figures="{Binding Figures}"/>
                    </Path.Data>
                </Path>
                <Path Stroke="Red" StrokeThickness="2" Grid.Row="1">
                    <Path.Data>
                        <PathGeometry Figures="{Binding Figures2}"/>
                    </Path.Data>
                </Path>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

如果您没有这些坐标，我建议您使用ItemsPanelTemplate的其他值，例如VirtualizedStackPanel。这可能如下所示：

<ItemsControl ItemsSource="{Binding ViewModels}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizedStackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Path Stroke="CornflowerBlue" StrokeThickness="2">
                    <Path.Data>
                        <PathGeometry Figures="{Binding Figures}"/>
                    </Path.Data>
                </Path>
                <Path Stroke="Red" StrokeThickness="2" Grid.Row="1">
                    <Path.Data>
                        <PathGeometry Figures="{Binding Figures2}"/>
                    </Path.Data>
                </Path>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

如果你能告诉我你真正想要达到的目标，我相信我能以更好的方式帮助你。

Canvas上的ItemsControl中的多个项目

1 个答案: