WPF - 如何将图像添加到 uniformgrid 按钮?
WPF - How to add an image to a uniformgrid button?
我有两个图像定义如下:
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 条件使其中一张图片出现在每个按钮上。我的代码是 运行 但图片从未出现,我收到两个警告:"The resource "Corridor" could not be resolved" 和 "The resource "Wall" could not be resolved"。这是我的 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 架构,这与这个问题无关。重要的是背景 属性 只能是走廊、墙或玩家。
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 可使所有这些警告消失,但图片仍未显示在网格中。
我明白了。我不需要在我的问题开始时声明那两个图像,前两个 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>
我有两个图像定义如下:
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 条件使其中一张图片出现在每个按钮上。我的代码是 运行 但图片从未出现,我收到两个警告:"The resource "Corridor" could not be resolved" 和 "The resource "Wall" could not be resolved"。这是我的 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 架构,这与这个问题无关。重要的是背景 属性 只能是走廊、墙或玩家。
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 可使所有这些警告消失,但图片仍未显示在网格中。
我明白了。我不需要在我的问题开始时声明那两个图像,前两个 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>