添加图标到viewBox

本文关键字：viewBox 图标 添加 | 更新日期: 2023-09-27 18:11:05

我有一个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

首先…你的棋盘是ItemsControl，不是Viewbox。Viewbox只是包含一些我们不知道的特殊可视化问题的板(也许你可以使用8的Height而不会显得非常小?)。

由于您使用的是ItemsControl，正确的方法是向其添加项并设置几个datatemplate，每种类型的一个。"图标"将放在每个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中包含正确的TargetType的DataTemplate:

<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

ItemControl通常用于包含项的集合。ItemControl中的ItemsPanelTemplate通常描述您希望如何显示项目集合。这些通常是Microsoft提供的泛型类型。其中包括WrapPanel和StackPanel。项目本身将在ItemTemplate下面。在这里，您可以将项目模板定制为itemsource中的视图模型。

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

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

我需要让你知道，这并不是一个真正健壮的方法来做这些事情。但这是你想去的正确方向。但是要在画布中获取图像，您只需要添加imagcontrol并绑定到source。

<Canvas Height="10"
        Width="10"
        Background="{Binding Color}">
        <Image Source="{Binding ImageSource}"/>
</Canvas>
相关文章：