C# 将图标添加到viewBox

我有一个视框作为棋盘

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

---

如何将图标添加到矩形？

首先。。。您的棋盘是

项控件

，而不是

视图框

。

Viewbox

只是包含了一些我们不知道的特殊可视化问题的电路板（也许你可以使用高度为8的

而不会显得非常小？）

由于您使用的是
ItemsControl
，正确的方法是向其中添加项目并设置多个数据模板，每种类型的工件一个。“图标”将进入每个
数据模板的内部

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

公共类棋子
{
公共颜色枚举颜色{get；set；}
公共整数X{get；set；}
公共整数Y{get；set；}
公共虚拟布尔值IsAValidMovement（整数x，整数y）
{
//基本公共逻辑
}
}
公共类后棋子：棋子
{
公共覆盖布尔IsAValidMovement（整数x，整数y）
{
if（基准IsAValidMovement（x，y））
{
//特定逻辑
}
}
}

然后在XAML中，您应该执行以下操作：



在您的
资源中
包括一个正确的
目标类型的
数据模板
：



我将把这些片段的定位留给您：p
ItemControl通常用于包含项目集合。ItemControl中的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>



items控件的设置在代码隐藏中完成

  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;
    }

public主窗口（）
{
初始化组件（）；
列表l=新列表（）；
l、 添加（新阶段（）{Color=“White”}）；
l、 添加（新阶段（）{Color=“Black”}）；
l、 添加（新阶段（）{Color=“White”}）；
l、 添加（新阶段（）{Color=“Black”}）；
l、 添加（新阶段（）{Color=“White”}）；
l、 添加（新阶段（）{Color=“Black”}）；
l、 添加（新阶段（）{Color=“White”}）；
l、 添加（新阶段（）{Color=“Black”}）；
l、 添加（新阶段（）{Color=“White”}）；
l、 添加（新阶段（）{Color=“Black”}）；
ChessBoard.ItemsSource=l；
}

我需要让你知道，这并不是一个很好的方法。但这是你想要的正确方向。但要在画布中获取图像，只需添加imagecontrol并绑定到源

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

还有。。。你真的试过图标吗？