ClearSelectionButtonContent looses its content

3 posts, 1 answers
  1. Michel Cossette
    Michel Cossette avatar
    4 posts
    Member since:
    Feb 2010

    Posted 14 Jul Link to this post

    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>

  2. Answer
    Kalin
    Admin
    Kalin avatar
    1279 posts

    Posted 17 Jul Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. Michel Cossette
    Michel Cossette avatar
    4 posts
    Member since:
    Feb 2010

    Posted 17 Jul Link to this post

    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.

Back to Top