将图标添加到 viewBox

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，正确的方法是向其中添加项目并设置多个数据模板，每种模板一个。 "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:

<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 通常用于包含 items.The ItemsPanelTemplate ItemControl 中的 ItemPanelTemplate 通常描述您希望如何显示项目集合。这些通常是 Microsoft 提供的通用类型。其中包括 WrapPanel 和 StackPanel。该项目本身将位于 ItemTemplate 下方。在那里，您可以将项目模板自定义为项目源中的视图模型。

这应该是您开始时的看法。

<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 中获取图像，您只需要添加图像控件并绑定到源。

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

将图标添加到 viewBox

add icons to viewBox

c#

wpf

chess