ClearSelectionButtonContent looses its content

[Michel Cossette]

Hi, 

I have these comboboxes that use a keyed style that defines the ClearSelectionButtonContent, the first combobox that is clicked looses its ClearSelectionButtonContent after clicking on another one. To try it out, create a new WPF app and paste the code below in the MainWindow.xaml file and experiment with it, you will see what I mean. It can even be seen in design mode. I'm using VS 2017 (15.2 2643.15) and telerik 2017.1.222.45. 

Thanks for looking into this issue.

<Window
    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"
    xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:Chromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
    x:Class="WpfApp2.MainWindow"
    Title="MainWindow" Height="150" Width="325">
    <Window.Resources>
        <Style x:Key="radcomboboxstyle" TargetType="{x:Type telerik:RadComboBox}">
            <Setter Property="ClearSelectionButtonVisibility" Value="Visible"/>
            <Setter Property="ClearSelectionButtonContent">
                <Setter.Value>
                    <Grid>
                        <Ellipse Height="20" Width="20" Fill="Red"/>
                        <TextBlock Text="X" TextElement.FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" />
                    </Grid>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" Grid.Row="0">
            <Label Content="ComboBox1" VerticalAlignment="Center"/>
            <telerik:RadComboBox Width="150" Height="30" Style="{StaticResource radcomboboxstyle}" >
                <telerik:RadComboBoxItem Content="Item 1"/>
                <telerik:RadComboBoxItem Content="Item 2"/>
                <telerik:RadComboBoxItem Content="Item 3"/>
            </telerik:RadComboBox>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Grid.Row="1">
            <Label Content="ComboBox2" VerticalAlignment="Center"/>
            <telerik:RadComboBox Width="150" Height="30" Style="{StaticResource radcomboboxstyle}" >
                <telerik:RadComboBoxItem Content="Item 1"/>
                <telerik:RadComboBoxItem Content="Item 2"/>
                <telerik:RadComboBoxItem Content="Item 3"/>
            </telerik:RadComboBox>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Grid.Row="2">
            <Label Content="ComboBox3" VerticalAlignment="Center"/>
            <telerik:RadComboBox Width="150" Height="30" >
                <!-- Setting the style explicitly instead of via a reference to the keyed style defined in the resources -->
                <telerik:RadComboBox.Style>
                    <Style TargetType="{x:Type telerik:RadComboBox}">
                        <Setter Property="ClearSelectionButtonVisibility" Value="Visible"/>
                        <Setter Property="ClearSelectionButtonContent">
                            <Setter.Value>
                                <Grid>
                                    <Ellipse Height="20" Width="20" Fill="Red"/>
                                    <TextBlock Text="X" TextElement.FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" />
                                </Grid>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </telerik:RadComboBox.Style>
                <telerik:RadComboBoxItem Content="Item 1"/>
                <telerik:RadComboBoxItem Content="Item 2"/>
                <telerik:RadComboBoxItem Content="Item 3"/>
            </telerik:RadComboBox>
        </StackPanel>
    </Grid>
</Window>

[Kalin]

Hi Michel,

This is framework behavior - by default the WPF framework is creating single instance of each resource and sharing it where used. This leads to the scenario of two buttons having one exact visual tree as content which is not possible, so it stays inside of last shown button. This can be resolved by setting the x:Shared attribute of the Style to false:

<Style x:Key="radcomboboxstyle" TargetType="{x:Type telerik:RadComboBox}" x:Shared="false">

Hope this helps.

Regards,
Kalin
Progress Telerik

[Michel Cossette]

Hi Kalin,

Thanks for the info, tried it and indeed it fixes the issue. Thanks also for the new knowledge about wpf, which I've been using for 10 years without having encountered this issue before.
Marking as answered.