WPF - 如何将图像添加到统一网格按钮？答案

【问题标题】：WPF - How to add an image to a uniformgrid button?WPF - 如何将图像添加到统一网格按钮？
【发布时间】：2020-03-16 18:48:06
【问题描述】：

我有两个图像定义如下：

Image Wall = new Image();
Wall.Source = new BitmapImage(new Uri("pack://application:,,,/Resources/Wall.png"));
Image Corridor = new Image();
Corridor.Source = new BitmapImage(new Uri("pack://application:,,,/Resources/Corridor.png"));

我有一个统一的网格，每个单元格中都有一个按钮。我的目标是根据 DataTrigger 条件使其中一张图片出现在每个按钮上。我的代码正在运行，但图片从未出现，我收到两个警告：“资源“走廊”无法解析”和“资源“墙”无法解析”。这是我的 xaml 代码：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <ItemsControl Grid.Row="1" ItemsSource="{Binding Fields}">

        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="{Binding TableSize}" Columns="{Binding TableSize}" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button Command="{Binding SelectCommand}" CommandParameter="{Binding Number}" BorderThickness="0">

                    <Button.RenderTransform>
                        <ScaleTransform ScaleX="1" ScaleY="1" />
                    </Button.RenderTransform>
                    <Button.Style>
                        <Style TargetType="Button">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Background}" Value="Corridor">
                                    <Setter Property="Foreground" Value="{DynamicResource Corridor}" />
                                </DataTrigger>
                                <DataTrigger Binding="{Binding Background}" Value="Wall">
                                    <Setter Property="Foreground" Value="{DynamicResource Wall}" />
                                </DataTrigger>
                                <DataTrigger Binding="{Binding Background}" Value="Player">
                                    <Setter Property="Background" Value="Yellow" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                </Button>
            </DataTemplate>
        </ItemsControl.ItemTemplate>

        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="Grid.Row" Value="{Binding X}" />
                <Setter Property="Grid.Column" Value="{Binding Y}" />
            </Style>
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>
</Grid>

最后，这是我将 buttongrid 绑定到的 ObservableCollection。它的背景属性从一个名为 _model 的值中获取它的值，因为我使用的是与这个问题无关的 MVVM 架构。重要的是 Background 属性只能是 Corridor、Wall 或 Player。

ObservableCollection<DungeonField> Fields = new ObservableCollection<DungeonField>();
for (Int32 i = 0; i < 9; ++i)
{
    for (Int32 j = 0; j < 9; ++j)
        Fields.Add(new DungeonField
        {
            Background = _model.GetField(i, j).ToString(),
            X = i,
            Y = j,
            Number = i * 9 + j,
        });
}

我确实将这两个图像作为资源添加到我的项目中，并且它们的构建操作设置为资源。我是在 wpf 中处理图片的新手，所以我的问题是我错过了什么？

提前致谢

编辑：我想我不应该在 DataTrigger 部分的 xaml 中使用 DynamicResource，因为我已经声明了一个 Image 变量，所以我可以将它绑定到按钮。使用 Binding 而不是 DynamicResource 会使所有这些警告消失，但图片仍然不会显示在网格中。

【问题讨论】：

标签： c# wpf image xaml uniformgrid

【解决方案1】：

我明白了。我不需要在我的问题开始时声明这两个图像，前两个 DataTriggers 内部应该是这样的：

<DataTrigger Binding="{Binding Background}" Value="Corridor">
    <Setter Property="Source" Value="Resources/Corridor.png" />
</DataTrigger>
<DataTrigger Binding="{Binding Background}" Value="Wall">
    <Setter Property="Source" Value="Resources/Wall.png" />
</DataTrigger>

【讨论】：