CODEWITHSUNDEEP
c#wpflistboxuser-controls
TrustyCoder
TrustyCoder

Reputation: 4789

Implementing Selectable user controls inside a ListBox

I have widgets that display data of an entity. I have made user controls to display data for each entity. 

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

and the code behind

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();
        }
    }

The user control is rendered in 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>

I was expecting the IsSelected of the ListBoxItem would be bound to the user control and the border thickness would change when the Listbox item is selected but is not working as expected.

Upvotes: 0

Views: 96

Answers (2)

neelesh bodgal
neelesh bodgal

Reputation: 662

Name the usercontrol and change the binding in datatrigger to use element name to bind to IsSelected property. This change is required because, the binding the usercontrol is inheriting doesn't contain IsSelected property i.e., 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>

Upvotes: 0

Elbowz
Elbowz

Reputation: 76

I don't have enough reputation to comment so I'll put it in the answer.

I had a similar problem in the past where I was mistakenly capturing ListBox events and thinking that it should apply to my controls inside ListBox. Well, it doesn't. In your case, the Widget itself doesn't really get selected, and you're binding the border to the Widget's property, so nothing happens. Or at least that's what it looks like to me.

Upvotes: 1

Related Questions