CODEWITHSUNDEEP
wpflistbox
Robby Smet
Robby Smet

Reputation: 4661

Change background color of selected usercontrol in listbox

I have a listbox with some items. When an item is selected, I want to change the background color of the UserControlButton.

How can I do this? 

<Window.Resources>
    <Style x:Key="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    </Style>
</Window.Resources>

<Border x:Name="UserScrollContainer">
       <ListBox x:Name="UserContainer" ItemsSource="{Binding allUserViewModel.Users}" 
                             Background="Transparent"   
                             HorizontalContentAlignment="Stretch"
                             ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
                             ScrollViewer.VerticalScrollBarVisibility="Visible"
                             BorderThickness="0" Margin="0" Padding="0"    
                             ItemContainerStyle="{DynamicResource ListBoxItemStyle}">

            <ListBox.ItemTemplate>
                 <DataTemplate>
                      <local:UserControlButton x:Name="UserControlButton" />   
                                // Change background color depending if it is selected
                  </DataTemplate>
            </ListBox.ItemTemplate>
      </ListBox>
</Border>

EDIT

I know I can add something like this:

        <Style x:Key="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>

        <Setter Property="Background" Value="Lightblue"/>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="true">
                <Setter Property="Background" Value="Red"/>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Background" Value="Yellow"/>
            </Trigger>
        </Style.Triggers>
    </Style>

but then I get this result:

enter image description here

I need to change the background of the usercontrol, not of the listboxitem.

Upvotes: 3

Views: 3378

Answers (2)

user2565258
user2565258

Reputation: 61

You have to set the datacontext of the user control equal to the selcted item. and will have to use a converter to convert the selected value to back ground.

lets say you have user control like this :

    <UserControl x:Class="ArdonorDemonstration.UserControlButton" >
    <Button Content="{Binding}"
               x:Name="btnUC" Background="{Binding}"></Button>
</UserControl>

You have to set the 

<ListBox.ItemTemplate> 
                <DataTemplate>
                    <local:UserControlButton x:Name="UserControlButton"
                                             DataContext="{Binding}" /> 
                </DataTemplate>

and if you want to caputre the selected item then, 1. expose a dependcy propety in User control. 2. Set it inside ListBox ItemTemplate to SelectedItem. 3. in User control , set the button background color to that dependency property.

Upvotes: 0

stukselbax
stukselbax

Reputation: 5935

You have several approaches to solve your problem. One of them I will describe here.

You can define <Style /> on your <UserContorl />, in order to reflect the ListBoxItem.IsSelected property:

<DataTemplate>
    <local:UserControlButton x:Name="UserControlButton">
        <local:UserControlButton.Style>
            <Style TargetType="{x:Type local:UserControlButton}">
                <Setter Property="Background" Value="Lightblue"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBoxItem}}" Value="true">
                        <Setter Property="Background" Value="Red"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </local:UserControlButton.Style>
    </local:UserControlButton>
</DataTemplate>

Upvotes: 6

Related Questions