XAML 在wpf画布上绘制多个项会导致每个后续项都绘制在前一项之下，即使使用相同的位置值

ghhkc1vu 于 2023-08-01 发布在其他

关注(0)|答案(1)|浏览(96)

我试图在用户点击图像的地方画圆圈。我有一张和图像一样大的画布来画它们。我得到了正确的点击位置，我使用下面的代码来绘制椭圆，几乎可以工作，只是每个后续的点击，下一个椭圆被绘制在前一个下面，即使你沿着x轴移动，它仍然绘制在前一个下面。下面绘制的量是椭圆的大小。每次点击我都在向名为ClickedPositions的observablecollection添加一个位置。

<Canvas>
<ItemsControl ItemsSource="{Binding ClickedPositions}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Ellipse Width="5" Height="5" Fill="Red">
                <Ellipse.RenderTransform>
                    <TranslateTransform X="{Binding X}" Y="{Binding Y}" />
                </Ellipse.RenderTransform>
            </Ellipse>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>
</Canvas>

字符串

的数据
在这里你可以看到我在同一个地方点击了6次，第一个圆圈是正确的，然后每个后续的圆圈都被绘制在前一个圆圈的“下方”。然后我把鼠标移到右边，点击了两次，你可以看到它仍然被绘制在前一个的“下面”。
我错过了什么？
谢啦，谢啦

xaml

来源：https://stackoverflow.com/questions/76628153/drawing-multiple-items-on-wpf-canvas-results-in-each-subsequent-item-being-drawn

1条答案

按热度按时间

8qgya5xd1#

Canvas需要声明为ItemsControl的ItemsPanel。默认ItemsPanel是垂直StackPanel。

<ItemsControl ItemsSource="{Binding ClickedPositions}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Ellipse Width="5" Height="5" Fill="Red">
                <Ellipse.RenderTransform>
                    <TranslateTransform X="{Binding X}" Y="{Binding Y}" />
                </Ellipse.RenderTransform>
            </Ellipse>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

字符串
您也可以设置项目容器的Canvas.Left和Canvas.Top属性，而不是设置Ellipse的RenderTransform：

<ItemsControl ItemsSource="{Binding ClickedPositions}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </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>
            <Ellipse Width="5" Height="5" Fill="Red"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

型
最后要注意X和Y是椭圆边界框左上角的坐标。要绘制居中的形状，请使用带有EllipseGeometry的Path：

<ItemsControl ItemsSource="{Binding ClickedPositions}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </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>
            <Path Fill="Red">
                <Path.Data>
                    <EllipseGeometry RadiusX="2.5", RadiusY="2.5"/>
                </Path.Data>  
            </Path>  
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

型

赞(0）回复(0）举报 2023-08-01

我来回答

XAML 在wpf画布上绘制多个项会导致每个后续项都绘制在前一项之下，即使使用相同的位置值

1条答案

相关问题

热门标签

最新问答