从列表中更新 WPF 图像

Question

我在一个窗口中有 40 张图像需要更改。我认为检查这 40 个图像是否需要在计时器上更改的最简单方法是将它们放入 List<ImgInfo>，其中 ImgInfo 包含 System.Windows.Controls.Image。

我的代码更新了列表，但不会更改窗口上的当前图像。

我对在 WPF 中处理图像非常陌生。 我应该将这些图像绑定到代码中的属性吗？现在 xaml 只是将源设置为单个图像。将这些图像绑定到列表中的项目需要什么？

// xaml:
 <Image x:Name="comp01" Height="75" Source="img/comp-offline.png" Stretch="Fill" Margin="5"/>

// When the application starts:
ImgInfoList= new List<ImgInfo>();
ImgInfoList.Add(new ImgInfo{ CurrentImage = comp01, MachineName = "" });
ImgInfoList.Add(new ImgInfo{ CurrentImage = comp02, MachineName = "" });
// ... etc for 40 images

// ImgInfo class:
public class ImgInfo
{
    public string MachineName { get; set; }
    public Image CurrentImage { get; set; }
}

public void MainTimer_Tick(object sender, EventArgs e)
{
    foreach(var imgInfo in ImageInfoList)
    {
        if(//conditions are true) 
        {
            Image imgTmp = new Image();
            BitmapImage bi3 = new BitmapImage();
            bi3.BeginInit();
            bi3.UriSource = new Uri(LoadBitmapURIFromResource("img/img-1.png"));
            bi3.EndInit();
            imgTmp.Stretch = Stretch.Fill;
            imgTmp.Source = bi3;
            imgInfo.CurrentImage = imgTmp;
        }
        // else if... img/img-2.png, etc.
    }
}

//LoadBitmapURIFromResource just returns Convert.ToString(new Uri(@"pack://application:,,,/" + assembly.GetName().Name + ";component/" + pathInApplication, UriKind.Absolute));

Answer 1

要在 WPF 中处理多个图像，您应该对图像使用 ObservableCollection（仅包含文件名）并将其用作 ListBox 的 ItemsSource。 ItemTemplate 将是您的图像，它绑定到文件名。

    <ListBox ItemsSource="{Binding ImgList}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding}" ... />
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

ImgList 必须是 DataContext 中的一个属性。 如果您需要不同的 ListBox 布局，您可以更改 ListBox 的 ItemsPanel。

要更改图像，只需替换字符串。请注意，默认情况下图像组件会缓存图像。如果你想从同一个文件重新加载图像，你必须禁用缓存。

编辑：

正如所承诺的，我想展示如何使用绑定在<Canvas/> 的特定位置显示图像。首先，我们需要修改你的ImgInfo 类。它现在包含要显示的图像的路径、位置和大小：

public class ImgInfo
{
    public string Path { get; set; }
    public double X { get; set; }
    public double Y { get; set; }
    public double Width { get; set; }
    public double Height { get; set; }
}

<ListBox/> 将通过以下方式扩展：

    <ListBox ItemsSource="{Binding ImgList}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding Path}"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
                <Setter Property="Canvas.Left" Value="{Binding X}"/>
                <Setter Property="Canvas.Top" Value="{Binding Y}"/>
                <Setter Property="Width" Value="{Binding Width}"/>
                <Setter Property="Height" Value="{Binding Height}"/>
            </Style>
        </ListBox.ItemContainerStyle>
    </ListBox>

作为ItemsPanel，我们使用<Canvas/>-元素。为了确保项目显示在特定位置，我们修改 ItemContainerStyle 以将相应的属性绑定到我们的 ImgInfo 实例。

现在您可以在ImgList 中添加新项目或替换它们，更改将反映在<ListBox/> 中。如果要直接修改ImgInfo-Items，则必须在该类中实现INotifyPropertyChanged。