Progress® Telerik® UI for WPF Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 07 Oct 2023 12:01 by ADMIN
Ben
Created on: 15 Aug 2023 22:02
Category: ColorPicker
Type: Bug Report
1
Color selector nested in tab control in a drop-down flickers with wrong size on first opening

Subject

A RadColorSelector placed in a RadTabControl as content of an RadDropDown button flickers on first opening and shows a wrong arrangement of the color palette for a moment. Custom colors are data bound.

Attached Files

The attached files contain a demo application, which is a minimal sample to reproduce the problem. Due to the file upload size limitation, the referenced Telerik DLLs for the sample project are not contained.

There are short clips that show the correct behavior when there is no RadTabControl and the faulty behavior with it.

Description

Exemplary Scenario

There is an application containing two drop-down buttons, with the following structure:

  • RadDropDownButton 1
    • RadColorSelector
  • RadDropDownButton 2
    • RadTabControl
      • RadTabItem
        • RadColorSelector

The colors for the RadColorSelector are generated in code and data bound. The first drop-down is for comparison and does not show the faulty behavior.

Steps to Reproduce

  • Open the application.
  • Click drop-down button 2.

The issue is only reproducible on the first opening of the drop-down.

Result

The color selector flickers for a noticeable short time between two arrangements of the color palette. First, it seems that all colors are placed below one another and continue in the second column of the palette when there is an overflow in vertical space. Then, the layout changes and the palette is displayed as intended. Sometimes instead of vertical misalignment, the colors are aligned correctly, but seem to pop-up one after another quickly.

Expectation

The color selector displays the color palette correctly arranged each time the drop-down is opened. There is no flicker and no misarrangement in between.

Issue Characteristics

  • The issue is reliably reproducible most of the time, but not always. It occurs both in debug and release mode. If it does not show, try to increase or decrease the ColorPerColumnCount property (15 to 30 always worked for us).
  • The behavior can be reproduced with e.g a value of 21, then after multiple tries it may disappear and changing the number makes it appear again, even the same number on multiple tries in the demo application. In our product it is permanently reproducible.
  • Without the RadTabControl in the drop-down content, the issue does not appear.

Attached Files:
7 comments
ADMIN
Stenly
Posted on: 07 Oct 2023 12:01

Hello Ben,

I have logged a new bug report in our internal backlog and have linked it to this one.

As a token of gratitude for bringing this to our attention, I have updated your Telerik points.

Regards,
Stenly
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN
Stenly
Posted on: 04 Oct 2023 13:01

Hello Ben,

Thank you for your reply.

I will review this and get back to you by the end of this workweek.

Please excuse me for the caused inconvenience.

Regards,
Stenly
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Ben
Posted on: 29 Sep 2023 13:42

Hello Stenly,

thank you for your reply. This solutions seems to work. There is no noticable flicker in the test application. However, this is not a solution for our case, because the tab control contains multiple tabs with different content sizes. If we applied this solution, all tabs would be of the same size - the size of the largest tab. This leads to spaces and an undesireable layout.

Regards,
Ben

ADMIN
Stenly
Posted on: 31 Aug 2023 16:31

Hello Ben,

Allow me to begin by apologizing for closing this ticket thread without providing a reply. It is a mistake on my side and I am sorry for the inconvenience that it has caused on your end.

The reason for the flicker is that the content of the RadTabControl will be measured with infinity. To prevent the flicker from occurring, a size for the dropdown menu should be specified. The RadTabControl will use this fixed size to fit its content, without measuring it with infinity.

To set the size, you can utilize the DropDownWidth and DropDownHeight properties.

<telerik:RadDropDownButton 
                         Content="Show popup with tab control (issue)"
                         DropDownClosed="OnDropDownClosed"
                         DropDownWidth="300"
                         DropDownHeight="300">
    <telerik:RadDropDownButton.DropDownContent>
        <telerik:RadTabControl>
            <telerik:RadTabItem Header="Standard">
                <telerik:RadColorSelector HeaderPaletteVisibility="Collapsed"
                                    StandardPaletteVisibility="Collapsed"
                                    MainPaletteColumnsCount="{Binding DataContext.ColorColumnCount, RelativeSource={RelativeSource Self}}"
                                    MainPaletteItemsSource="{Binding DataContext.Colors, RelativeSource={RelativeSource Self}}"
                                    MainPaletteOrientation="Vertical"
                                    IsTabStop="False"/>

            </telerik:RadTabItem>
        </telerik:RadTabControl>
    </telerik:RadDropDownButton.DropDownContent>
</telerik:RadDropDownButton>

Could you give this suggestion a try and let me know how it goes?

Regards,
Stenly
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Ben
Posted on: 31 Aug 2023 14:18

Helly Stenly,

why is this issue "Closed by Telerik support staff" without any reply?

Regards,
Ben

Ben
Posted on: 25 Aug 2023 09:57

Hello Stenly,

the issue is still present and reproducible as before. I attached the updated sample. Maybe it seemed to work on your side, because the bindings in your code are wrong, which leads to the standard palette to be displayed.

Your code (bindings to Self that do not work in the data template):

MainPaletteColumnsCount="{Binding DataContext.ColorColumnCount, RelativeSource={RelativeSource Self}}"
MainPaletteItemsSource="{Binding DataContext.Colors, RelativeSource={RelativeSource Self}}"

Adapted:

MainPaletteColumnsCount="{Binding DataContext.ColorColumnCount, RelativeSource={RelativeSource AncestorType={x:Type local:MainWindow}}}"
MainPaletteItemsSource="{Binding DataContext.Colors, RelativeSource={RelativeSource AncestorType={x:Type local:MainWindow}}}"

By the way, even if the obvious "expanding" of the palette does not happen occasionally, there is still a noticable "flicker", so it might appear as if the issue was fixed, but changing the values disproves it.

Regards,
Ben

Attached Files:
ADMIN
Stenly
Posted on: 18 Aug 2023 15:08

Hello Ben,

Thank you for reaching out to us.

Generally, when a complex structure of UI elements is required in the drop-down part of the RadDropDownButton control, the DropDownContentTemplate property should be utilized. The elements can be placed in a DataTemplate and then set to the mentioned property.

<telerik:RadDropDownButton.DropDownContentTemplate>
       <DataTemplate>
           <telerik:RadTabControl>
               <telerik:RadTabItem Header="Standard">
                           <telerik:RadColorSelector HeaderPaletteVisibility="Collapsed"
                                   StandardPaletteVisibility="Collapsed"
                                   MainPaletteColumnsCount="{Binding DataContext.ColorColumnCount, RelativeSource={RelativeSource Self}}"
                                   MainPaletteItemsSource="{Binding DataContext.Colors, RelativeSource={RelativeSource Self}}"
                                   MainPaletteOrientation="Vertical"
                                   IsTabStop="False"/>
               </telerik:RadTabItem>
           </telerik:RadTabControl>
       </DataTemplate>
</telerik:RadDropDownButton.DropDownContentTemplate>

With this in mind, by applying the above suggestion, the unwanted behavior is no longer present on my end.

Could you give this suggestion a try and let me know how it goes?

Regards,
Stenly
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Create an account Log In
View
Type
Status
Category