Question

我有一个Viewbox作为ChessBoard

<Viewbox>
    <ItemsControl Name="ChessBoard">
        <ItemsControl.ItemsPanel >
            <ItemsPanelTemplate >
                <Canvas Width="8" Height="8" Background="{StaticResource Checkerboard}" MouseDown="Canvas_MouseDown" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Viewbox>

如何在矩形中添加图标？

Answer 1

首先......你的棋盘是ItemsControl，而不是Viewbox。 Viewbox只是包含了我们不知道的一些特殊可视化的板（也许所以你可以使用8 Height而不显得非常小？）。

由于您使用的是ItemsControl，因此正确的方法是向其添加项目并设置多个DataTemplates，每种类型的一个。 “icon”将位于每个DataTemplate内。

例如，如果您的棋子定义如下：

public class ChessPiece
{
    public ColorEnum Color { get; set; }
    public int X { get; set; }
    public int Y { get; set; }

    public virtual bool IsAValidMovement(int x, int y)
    {
        // base common logic
    }
}

public class QueenPiece : ChessPiece
{
    public override bool IsAValidMovement(int x, int y)
    {
        if (base.IsAValidMovement(x, y))
        {
            // specific logic
        }
    }
}

然后在你的XAML中你应该做这样的事情：

<Viewbox>
    <ItemsControl Name="ChessBoard">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas Width="8" Height="8" Background="{StaticResource Checkerboard}" MouseDown="Canvas_MouseDown" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <!-- You could also bind ItemsSource to a collection of chess pieces -->
        <ItemsControl.Items>
            <local:QueenPiece Color="Black" X="3" Y="0" />
        </ItemsControl.Items>
    </ItemsControl>
</Viewbox>

在您的Resources中加入DataTemplate TargetType的{{1}}：

<Window.Resources>
    <DataTemplate TargetType="{x:Type local:QueenPiece}">
        <Grid Height="1" Width="1" />
            <Image x:Name="Icon" Source="queen-white.png" Stretch="Uniform" />
        </Grid>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding Color}" Value="Black">
                <Setter TargetName="Icon" Property="Source" Value="queen-black.png" />
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>
</Window.Resources>

我会把碎片放在你身上：P

Answer 2

ItemControl通常用于包含项目集合.ProjectControl中的ItemsPanelTemplate通常描述您希望如何显示项目集合。这些通常是Microsoft提供的通用类型。这些包括WrapPanel和StackPanel。该项目本身将位于ItemTemplate下方。您可以根据itemsource中的viewmodel自定义项模板。

这应该是你如何看待它开始的。

<ItemsControl Name="ChessBoard" Width="50">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border BorderThickness="1" BorderBrush="Black">
                        <Canvas Height="10"
                                Width="10"
                                Background="{Binding Color}">

                        </Canvas>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

项目控制的设置在后面的代码中完成。

  public MainWindow()
    {
        InitializeComponent();

        List<stage> l = new List<stage>();
        l.Add(new stage() { Color = "White" });
        l.Add(new stage() { Color = "Black" });
        l.Add(new stage() { Color = "White" });
        l.Add(new stage() { Color = "Black" });
        l.Add(new stage() { Color = "White" });
        l.Add(new stage() { Color = "Black" });
        l.Add(new stage() { Color = "White" });
        l.Add(new stage() { Color = "Black" });
        l.Add(new stage() { Color = "White" });
        l.Add(new stage() { Color = "Black" });
        ChessBoard.ItemsSource = l;
    }

我需要让你知道，这并不是一种强有力的方式来做这些事情。但这是你想要进入的正确方向。但是要在画布中获得一个图像，你只需要添加一个图像控件并绑定到源代码。

<Canvas Height="10"
        Width="10"
        Background="{Binding Color}">
        <Image Source="{Binding ImageSource}"/>
</Canvas>

向viewBox添加图标

2 个答案: