DataTemplate 为列表中的第一项提供正确的结果，但为 WPF 中的第二项提供错误的结果

Question

我的控件中有以下项目：

<Canvas Name="canvasTrack" Height="{Binding CanvasHeight}" Width="{Binding CanvasWidth}"> 
   <ItemsControl  
         ItemsSource="{Binding Path=CurrentSegments}" 
         ItemTemplate="{StaticResource BegSegmentTemplate}">
    </ItemsControl>
</Canvas>

以及以下 DataTemplate：

<DataTemplate x:Key="BegSegmentTemplate">
    <Ellipse Height="10" Width="10" Margin="{Binding EntryPoint}" Fill="Black" HorizontalAlignment="Center" />
</DataTemplate>

然后我将其绑定到其中包含两个项目的 ObservableCollection。当我运行该程序时，会出现两个省略号。第一个位于画布上的正确位置，但第二个位于“随机”位置。我检查了绑定的号码，一切正常。我可能会错过什么？

Answer 1

默认情况下，ItemsControl 循环遍历其项目并将每个项目放入 StackPanel 中，因此您的最终标记基本上如下所示：

<Canvas>
    <StackPanel>
        <ContentPresenter>
            <Ellipse Margin="{Binding EntryPoint}" />
        </ContentPresenter>
        <ContentPresenter>
            <Ellipse Margin="{Binding EntryPoint}" />
        </ContentPresenter>
    </StackPanel>
</Canvas>

如果您想循环遍历项目并放置它们位于基于某些绑定值的 Canvas 上，您需要覆盖 ItemsPanelTemplate 以使用 Canvas 而不是 StackPanel代码>，然后应用您在 ItemContainerStyle 中的定位，以便您在 ContentPresenter 上设置定位，而不是 Ellipse

这将使您的最终结果如下所示：

<Canvas>
    <ContentPresenter Margin="{Binding EntryPoint}">
        <Ellipse />
    </ContentPresenter>
    <ContentPresenter Margin="{Binding EntryPoint}">
        <Ellipse />
    </ContentPresenter>
</Canvas>

实现此目的的一些示例代码如下：

<ItemsControl ItemsSource="{Binding CurrentSegments}">

    <!-- ItemsPanelTemplate -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <!-- ItemContainerStyle -->
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Margin" Value="{Binding EntryPoint}" />
        </Style>
    </ItemsControl.ItemContainerStyle>

    <!-- ItemTemplate -->
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Ellipse Height="10" Width="10" Fill="Black" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>

</ItemsControl>

请参阅此链接对于一些使用 ItemsControl 的示例

Answer 2

尝试在 ItemsControl 中指定 ItemsPanel：

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <Canvas />
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>