在列表框内实现可选用户控件

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 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

我没有足够的声誉来发表评论，所以我将其放在答案中。

过去我有一个类似的问题，我错误地捕获了ListBox事件，并认为它应该应用于ListBox中的控件。好吧，事实并非如此。在您的情况下，窗口小部件本身并没有真正被选中，并且您将边框绑定到窗口小部件的属性，因此什么也没有发生。或至少这就是我的样子。

Answer 2

命名用户控件，并更改datatrigger中的绑定以使用元素名称绑定到IsSelected属性。此更改是必需的，因为用户控件继承的绑定不包含IsSelected属性，即listboxItem data

    <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>