How do I set item template controls to match the selection color?

[Karl B]

I am using a Telerik theme (VisualStudio2013) and want to change the color of certain controls within my ListBox depending on the selection state.  So in my contrived example below I want the BorderBrush and Separator Background to become blue (the VisualStudio2013 color) when the associated ListBoxItem is selected. 

My attempt shown below with a RelativeSource binding does not work.

<Window x:Class="TelerikWpfApp2.MainWindow"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                DataContext='{Binding RelativeSource={RelativeSource Self}}'
                Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DataTemplate x:Key="MyItemTemplate">
            <StackPanel>
                <Label Content="{Binding}"/>
                <Border Height="30" Background="White" BorderBrush="{Binding Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadListBoxItem}}}" Padding="2" BorderThickness="5">
                    <Separator Background="{Binding Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadListBoxItem}}}" Height="4" Margin="6"></Separator>
                </Border>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
        <Grid>
        <telerik:RadListBox ItemTemplate="{StaticResource MyItemTemplate}" ItemsSource="{Binding TheList}">
        </telerik:RadListBox>
    </Grid>
</Window>

public partial class MainWindow : Window
{
    public ObservableCollection<string> TheList { get; set; } = new ObservableCollection<string> () {"A","B","C"};
    public MainWindow ()
    {
        InitializeComponent();
     }
}

 

[Karl B]

I forgot to mention that ideally I would also like to choose a default color when the item is not selected.  

[Karl B]

I found a solution that worked for me using a DataTrigger and hard coding the style brush

<SolidColorBrush x:Key="AccentMainBrush" Color="#FF3399FF"></SolidColorBrush>
<DataTemplate x:Key="MyItemTemplate">
    <StackPanel>
        <TextBlock Text="{Binding}"/>
        <Border Height="30" Background="White" Padding="2" BorderThickness="5">
            <Border.Style>
                <Style TargetType="Border">
                    <Setter Property="BorderBrush" Value="Black" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" Value="True">
                            <Setter Property="BorderBrush" Value="{StaticResource AccentMainBrush}"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
            <Separator Height="4" Margin="6" >
                <Separator.Style>
                    <Style TargetType="Separator">
                        <Setter Property="Background" Value="Black" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" Value="True">
                                <Setter Property="Background" Value="{StaticResource AccentMainBrush}"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Separator.Style>
            </Separator>
        </Border>
    </StackPanel>
</DataTemplate>

 

[Dinko | Tech Support Engineer]

Hello Karl,

I am happy to hear that you manage to found a solution for your case and thank you for sharing it with the community. If you have any other questions, you can create a new post with your questions inside.

Regards,
Dinko
Progress Telerik