WPF ListBox：根据布尔值更改每个项目的边框

Question

在我的应用程序中，我加载图像并验证我没有太多的斑点。

此外，我将所有加载的图像都放在列表框中，并且所有图像都有边框。 现在，我想根据布尔值更改边框颜色宠物项（根据 blob 的数量及其大小为真或假）。 如果我的图像通过边界应该是绿色的，否则是红色的。

我的相关代码：

public List<String> ImagePath = new List<String>();

public MainWindow()
{
    InitializeComponent();
    lb_Images.ItemsSource = ImagePath;
}

private void bu_addImage_Click(object sender, RoutedEventArgs e)
{
    addImageToListBox();
}

private void addImageToListBox()
{
    String imagePath = getImage();
    // verfiy img haven't too much blobs
    Boolean passed = imagePassed(imagePath);

    // add the image to the list box
    //   I want to change border according passed value
    //   True - green; False- red.
    ImagePath.Add(imagePath);
    lb_Images.Items.Refresh();
}

XAML：

<Window x:Class="forQuestionWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="216" Width="519">

    <Window.Resources>
        <DataTemplate x:Key="ImageGalleryDataTemplate">
            <Grid>
                <Border BorderBrush="Green" BorderThickness="2"  Width="120" Height="120" Padding="5" Margin="5" CornerRadius="6">
                    <Image Source="{Binding}" Stretch="Fill"  HorizontalAlignment="Center">
                        <Image.ToolTip>
                            <Grid>
                                <Image Source="{Binding}" Stretch="Fill" HorizontalAlignment="Center" Height="200" Width="200" />
                            </Grid>
                        </Image.ToolTip>
                    </Image>
                </Border>
            </Grid>
        </DataTemplate>

        <ItemsPanelTemplate x:Key="ImageGalleryItemsPanelTemplate">
            <UniformGrid Rows="1" Columns="25" HorizontalAlignment="Center" VerticalAlignment="Stretch"/>
        </ItemsPanelTemplate>
    </Window.Resources>



    <Grid>
        <Canvas Height="177" HorizontalAlignment="Left" Name="canvas1" VerticalAlignment="Top" Width="497">

            <ListBox Canvas.Left="6" Canvas.Top="5" Height="166" Name="lb_Images" Width="441"  
                 ItemTemplate="{StaticResource ImageGalleryDataTemplate}"
                 ItemsSource="{Binding Path=ImagePath}"
                 ItemsPanel="{StaticResource ImageGalleryItemsPanelTemplate}">
            </ListBox>

            <Button Canvas.Left="453" Canvas.Top="26" Content="Add" Height="64" Name="bu_addImage" Width="38" Click="bu_addImage_Click" />
        </Canvas>
    </Grid>
</Window>

例如，在下图中最新的两个项目需要带有红色边框：

感谢您的帮助！ AsfK

Answer 1

您可以定义一个类，而不是绑定到 imagePath（字符串）：

public class ImageStuff {
  public string ImagePath {get; set;}
  public bool Passed {get; set;}
}

并将 this 的实例添加到列表框。

然后，您可以像这样为您的边框使用转换器：

<Border BorderThickness="2"  Width="120" Height="120" Padding="5" Margin="5" CornerRadius="6" BorderBrush="{Binding Path=Passed, Mode=OneWay, Converter={StaticResource borderConverter}}">

borderConverter 是这样的：

public class borderConverter : IValueConverter
{
  public object Convert(object value, Type targetType, 
    object parameter, CultureInfo culture)
{
    if (value is bool)
    {
      if (!(bool)value == true)
        return new SolidColorBrush(Colors.Red);
    }

    return new SolidColorBrush(Colors.Green);
}

public object ConvertBack(object value, Type targetType, 
    object parameter, CultureInfo culture)
{
    throw NotImplementedException();
}
}

您必须像这样在资源中包含borderConverter：

<Window.Resources>
  <src:borderConverter x:Key="borderConverter" />
</Window.Resources>

其中 src 是命名空间。

如果您想动态更改 ImageStuff 类的属性，您必须实现 INotifyPropertyChanged 以便更新绑定。

Answer 2

不用Converter 也可以，只需将带有 Tag 属性的DataTrigger 添加到 DataTemplate 即可。这可能会影响性能，因为转换器的工作时间会长得多。

添加这个类：

public class MyImage
{
    public string ImagePath
    {
        get; 
        set; 
    }

    public bool Flag
    { 
        get;
        set;
    }
}

在代码隐藏中使用如下：

public List<MyImage> ImagePath = new List<MyImage>();

完整示例：

XAML

<DataTemplate x:Key="ImageGalleryDataTemplate">
    <Grid>
        <Border Name="MyBorder" BorderBrush="#FFFF9800" BorderThickness="1" Width="120" Height="120" Padding="5" Margin="5" CornerRadius="6">
            <Image Name="MyImage" Tag="{Binding Path=Flag}" Source="{Binding Path=ImagePath}" Stretch="Fill" HorizontalAlignment="Center">
                <Image.ToolTip>
                    <Grid>
                        <Image Source="{Binding Path=ImagePath}" Stretch="Fill" HorizontalAlignment="Center" Height="200" Width="200" />
                    </Grid>
                </Image.ToolTip>
            </Image>
        </Border>
    </Grid>

    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding Path=Tag, ElementName=MyImage}" Value="True">
            <Setter TargetName="MyBorder" Property="BorderBrush" Value="Red" />
        </DataTrigger>

        <DataTrigger Binding="{Binding Path=Tag, ElementName=MyImage}" Value="False">
            <Setter TargetName="MyBorder" Property="BorderBrush" Value="Green" />
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

Code-behind

public partial class MainWindow : Window
{
    int imageNumber = 0;
    public List<MyImage> ImagePath = new List<MyImage>();

    public MainWindow()
    {
        InitializeComponent();
        lb_Images.ItemsSource = ImagePath;
    }

    private void bu_addImage_Click(object sender, RoutedEventArgs e)
    {
        addImageToListBox();
    }

    private void addImageToListBox()
    {
        imageNumber++;
        if (imageNumber == 4) imageNumber = 0;
        string directoryPath = AppDomain.CurrentDomain.BaseDirectory;

        // load input image
        string ImageFilename = directoryPath + "img";
        ImageFilename += imageNumber.ToString();
        ImageFilename += ".jpg";

        ImagePath.Add(new MyImage 
                      { 
                          ImagePath = ImageFilename, 
                          Flag = false 
                      }); 

        lb_Images.Items.Refresh();
    }
}

public class MyImage
{
    public string ImagePath
    {
        get; 
        set; 
    }

    public bool Flag
    { 
        get;
        set;
    }
}

为了成功改变MyImage类的属性，需要实现INotifyPropertyChanged接口。

Answer 3

您需要为此编写 BoolToColorConverter。找到以下转换器代码。

public sealed class BoolToColorConverter : IValueConverter
{
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        bool bValue = (bool)value;
        if (bValue)
            return Color.Green;
        else
            return Color.Red;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        Color color = (Color)value;

        if (color == Color.Green)
            return true;
        else
            return false;

    }
}