Question

我想知道如何为我的应用程序建立一个图层系统。我正在向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，但图像仍然呈现在彼此之上。 / p>

我还考虑过拥有多个集合，每个集合都是自己的层。我不知道如何使用我当前的代码实现这一点。

编辑：我添加了一个ItemContainerStyle：

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

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

Answer 1

您需要在Canvas.Top中设置Canvas.Left，Panel.ZIndex和ItemContainerStyle，以便将该属性应用于包装每张图片的<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>本身设置属性。

用于画布上图像的图层系统

1 个答案: