WPF INotifyDataErrorInfo 突出显示 ListBoxItem [英] WPF INotifyDataErrorInfo highlight ListBoxItem

问题描述

我有一个 ListBox 这样的:

<ListBox Margin="5" ItemsSource="{Binding NetworkAdapters, Mode=OneWay}" SelectedItem="{Binding SelectedNetworkAdapter}" SelectionChanged="{s:Action SelectedNetworkAdapterChanged}"><ListBox.ItemsPanel><ItemsPanelTemplate><UniformGrid Columns="2" VerticalAlignment="Top"/></ItemsPanelTemplate></ListBox.ItemsPanel><ListBox.ItemTemplate><数据模板><StackPanel Orientation="水平"><椭圆宽度=15"高度=15"边距=5"><椭圆.样式><Style TargetType="椭圆"><Setter Property="Fill" Value="Gray"></Setter><Style.Triggers><DataTrigger Binding="{Binding Status}" Value="{x:Static wpf:NetworkAdapterStatus.Up}"><Setter Property="Fill" Value="Green"></Setter></数据触发器><DataTrigger Binding="{Binding Status}" Value="{x:Static wpf:NetworkAdapterStatus.Down}"><Setter Property="Fill" Value="Red"></Setter></数据触发器></Style.Triggers></风格></Ellipse.Style></椭圆><StackPanel Margin="5,0,0,0"><TextBlock Text="{绑定名称}" FontWeight="Bold"/><TextBlock Text="{绑定描述}"></TextBlock><TextBlock Text="{Binding Speed, StringFormat='Speed: {0}'}" FontSize="10"/><TextBlock Text="{绑定状态}" FontSize="10"/></StackPanel></StackPanel></数据模板></ListBox.ItemTemplate></列表框>

NetworkAdapters 是实现 INotifyDataErrorInfo 的视图模型的集合.

使用当前的 XAML，如果任何视图模型中出现错误，整个 ListBox 将突出显示为红色，但我只想要单个 ListBoxItems包含要突出显示的错误.

我看过类似的问题，例如:

这与我的预期略有不同.我想在整个 ListBoxItem 周围突出显示，而不仅仅是图像中的一部分.

解决方案

你需要实现一个ItemContainerStyle如下:

 <Style TargetType="ListBoxItem"><Setter Property="BorderThickness" Value="1"/><Setter Property="BorderBrush" Value="透明"/><Style.Triggers><DataTrigger Binding="{Binding Validation.HasErrors}" Value="True"><Setter Property="BorderBrush" Value="Red"/></数据触发器></Style.Triggers></风格></ListBox.ItemContainerStyle>

这将使您能够更改 ListBoxItem 本身的边框，从而随心所欲.

I've got a ListBox as such:

<ListBox Margin="5" ItemsSource="{Binding NetworkAdapters, Mode=OneWay}" SelectedItem="{Binding SelectedNetworkAdapter}" SelectionChanged="{s:Action SelectedNetworkAdapterChanged}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="2" VerticalAlignment="Top"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Ellipse Width="15" Height="15" Margin="5">
                    <Ellipse.Style>
                        <Style TargetType="Ellipse">
                            <Setter Property="Fill" Value="Gray"></Setter>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Status}" Value="{x:Static wpf:NetworkAdapterStatus.Up}">
                                    <Setter Property="Fill" Value="Green"></Setter>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding Status}" Value="{x:Static wpf:NetworkAdapterStatus.Down}">
                                    <Setter Property="Fill" Value="Red"></Setter>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Ellipse.Style>
                </Ellipse>
                <StackPanel Margin="5,0,0,0">
                    <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
                    <TextBlock Text="{Binding Description}"></TextBlock>
                    <TextBlock Text="{Binding Speed, StringFormat='Speed: {0}'}" FontSize="10"/>
                    <TextBlock Text="{Binding Status}" FontSize="10"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

NetworkAdapters is a collection of View Models that implement INotifyDataErrorInfo.

With the current XAML, if there is an error in any of the View Models the whole ListBox will be highlighted red, but I would like just the single ListBoxItems that contains errors to be highlighted.

I had a look at similar questions such as:

WPF ListBox ErrorTemplate and Validating a ListBoxItem rather than a ListBox

But I still can't make this work. Any help would be appreciated.

---

UPDATE:

As per Krzysztof's advice, I tried wrapping the StackPanel around a border and using a DataTrigger as such:

<ListBox.ItemTemplate>
    <DataTemplate>
        <Border BorderThickness="1">
            <Border.Resources>
                <Style TargetType="Border">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding HasErrors}" Value="True">
                            <Setter Property="BorderBrush" Value="Red"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Resources>
            <StackPanel> ... </StackPanel>
        </Border>
    </DataTemplate>
</ListBox.ItemTemplate>

However, what this produces is the following:

Which is slightly different from what I expected. I would like to have the highlight around the whole ListBoxItem not just part of it as per the image.

解决方案

You need to implement an ItemContainerStyle as below:

    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding Validation.HasErrors}" Value="True">
                    <Setter Property="BorderBrush" Value="Red"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ListBox.ItemContainerStyle>

This will enable you to change the border of the ListBoxItem itself, so the whole things as you want.

这篇关于WPF INotifyDataErrorInfo 突出显示 ListBoxItem的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！