Реализация выбираемых пользовательских элементов управления внутри ListBox

Question

У меня есть виджеты, отображающие данные объекта. Я сделал пользовательские элементы управления для отображения данных для каждой сущности.

 <UserControl x:Class="Widget"
    <Border BorderBrush="#FF000000" CornerRadius="10" Width="220" Height="180">
        <Border.Style>
            <Style TargetType="{x:Type Border}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsSelected}" Value="True">
                        <Setter Property="BorderThickness" Value="5"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IsSelected}" Value="False">
                        <Setter Property="BorderThickness" Value="1"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
        <StackPanel Orientation="Vertical">
          <Label>Name</Label>
        </StackPanel>
    </Border>
</UserControl>

и код, стоящий за

public partial class Widget: UserControl
    {
        /// <summary>
        /// Is Selected Dependency property
        /// </summary>
        public static readonly DependencyProperty IsSelectedProperty = DependencyProperty.Register("IsSelected", typeof(bool), typeof(StationStatus), new PropertyMetadata(false));

        public bool IsSelected
        {
            get
            {
                return (bool)GetValue(IsSelectedProperty);
            }
            set
            {
                SetValue(IsSelectedProperty, value);
            }
        }

        public Widget()
        {
            InitializeComponent();
        }
    }

Пользовательский элемент управления отображается в ListBox

      <ListBox ItemsSource="{Binding WidgetData}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectionMode="Single">
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel IsItemsHost="True" Grid.Row="0" ItemHeight="200" ItemWidth="230" Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>

                        <ListBox.ItemTemplate>
                            <DataTemplate>
  <view:StationStatus IsSelected="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBoxItem}, Path=IsSelected}">
                            </view:StationStatus> 
                                </view:Widget>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>

Я ожидал IsSelected от ListBoxItem будет привязан к пользовательскому элементу управления, и толщина границы изменится, если элемент Listbox выбран, но не работает должным образом.

Answer 1

• 1000 мои элементы управления внутри ListBox. Что ж, это не так. В вашем случае сам виджет на самом деле не выбирается, и вы привязываете границу к свойству виджета, поэтому ничего не происходит. По крайней мере, мне так кажется.

Answer 2

Назовите пользовательский элемент управления и измените привязку в триггере данных, чтобы использовать имя элемента для привязки к свойству IsSelected. Это изменение требуется, потому что привязка, которую наследует пользовательский элемент управления, не содержит свойства IsSelected, т.е. данные listboxItem

    <UserControl x:Class="Widget" Name="widgetUC">
        <Border BorderBrush="#FF000000" CornerRadius="10" Width="220" Height="180">
            <Border.Style>
                <Style TargetType="{x:Type Border}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=widgetUC,Path=IsSelected}" Value="True">
                            <Setter Property="BorderThickness" Value="5"/>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding ElementName=widgetUC,Path=IsSelected}" Value="False">
                            <Setter Property="BorderThickness" Value="1"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
            <!-- Check what is the data binding-->
            <ContentPresenter Content="{Binding}"/>
        </Border>
    </UserControl>