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

4 posts, 0 answers
  1. Karl B
    Karl B avatar
    60 posts
    Member since:
    Dec 2013

    Posted 03 Aug 2018 Link to this post

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

     

  2. Karl B
    Karl B avatar
    60 posts
    Member since:
    Dec 2013

    Posted 03 Aug 2018 in reply to Karl B Link to this post

    I forgot to mention that ideally I would also like to choose a default color when the item is not selected.  
  3. Karl B
    Karl B avatar
    60 posts
    Member since:
    Dec 2013

    Posted 03 Aug 2018 Link to this post

    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>

     

  4. Dinko
    Admin
    Dinko avatar
    874 posts

    Posted 08 Aug 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top