画布上图像的图层系统答案

【问题标题】：Layer system for images on a canvas画布上图像的图层系统
【发布时间】：2014-11-03 12:56:41
【问题描述】：

我试图弄清楚如何为我的应用程序创建一个层系统。我正在向itemscontrol 添加图像，它们都将一个在另一个之上渲染。

                <ItemsControl Name="canvasDataBinding"
                                    HorizontalAlignment="Center" 
                                    Height="512"
                                    Width="512" 
                                    VerticalAlignment="Center" 
                                    ClipToBounds="True">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas Background="Transparent"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Image Source="{Binding Name}"
                                    Width="{Binding Width}"
                                    Height="{Binding Height}">
                            </Image>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                </ItemsControl>

出于测试目的，我尝试在图像控件中添加Panel.Zindex="{Binding Zind}"，并在每次向集合中添加新图像时减少Zind，但图像仍会相互叠加。

我也想过有多个集合，每个集合都是它自己的层。不过，我不知道如何用我当前的代码实现这一点。

编辑：我添加了一个 ItemContainerStyle：

                    <ItemsControl.ItemContainerStyle>
                        <Style>
                            <Setter Property="Panel.ZIndex" Value="{Binding Zindex}" />
                        </Style>
                    </ItemsControl.ItemContainerStyle>

我再次将 ZIndex 的值绑定到我在将图像添加到集合之前递减的 int。它仍然在另一个之上渲染。

【问题讨论】：

您需要在ItemContainerStyle 中设置Canvas.Top、Canvas.Left 和Panel.ZIndex，以便将属性应用于包装每个图像的<ContentPresenter>。有关更详细的说明和示例，请参阅我博客上this 帖子的底部。
@Rachel 我根据您的建议编辑了我的帖子，我仍然遇到问题。还有为什么我需要设置 Canvas.Top 和 Canvas.Left 呢？
Canvas.Left 和 Canvas.Top 告诉 WPF 在哪里绘制每个项目。如果您使用 Canvas 作为 ItemsPanel，则除非您另有说明，否则所有项目都将在 0,0 处绘制，这就是为什么它们都被绘制在彼此之上
@Rachel 我省略了大部分代码，只是为了我的帖子。下次我会更加小心。无论如何，我只需像你提到的那样在 ItemContainerStyle 中设置 Panel.ZIndex 就可以了。我只是忘了更新我的构造函数。谢谢。
啊，很高兴知道，我会把它作为答案发布。本来想早点去的，没时间

标签： c# wpf image graphics wpf-controls

【解决方案1】：

您需要在ItemContainerStyle 中设置Canvas.Top、Canvas.Left 和Panel.ZIndex，以便将属性应用于包装每个图像的<ContentPresenter>。

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

当你的ItemsControl 被渲染时，它实际上是这样渲染的

<Canvas>
    <ContentPresenter>
        <Image />
    </ContentPresenter>
    <ContentPresenter>
        <Image />
    </ContentPresenter>
    <ContentPresenter>
        <Image />
    </ContentPresenter>
</Canvas>

这就是为什么在<Image> 本身上设置属性不起作用的原因。

【讨论】：