This is a migrated thread and some comments may be shown as answers.

Change skin in FlyOut

4 Answers 118 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Manuel asked on 19 Jan 2017, 09:52 AM

I have been able to change the colors of almost all the controls in DataGrid and DataGridFilteringFlyout, but there are two of them that I am unable to change:

CloseButton (InlineButton) in DataGridServicePanelGroupingFlyout and CaseButton (ToggleButton) in DataGridFilteringFlyout.

For the CloseButton, I tried this:

    <Style TargetType="gridPrimitives:DataGridFlyoutGroupHeader">
        <Setter Property="Background" Value="{ThemeResource TelerikGridFlyoutGroupHeaderBackgroundBrush}"/>
        <Setter Property="Foreground" Value="{ThemeResource TelerikGridFlyoutGroupHeaderForegroundBrush}"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="MinWidth" Value="126"/>
        <Setter Property="MinHeight" Value="40"/>
        <Setter Property="Template">
                <ControlTemplate TargetType="gridPrimitives:DataGridFlyoutGroupHeader">
                    <Grid HorizontalAlignment="Stretch">
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding         BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}" Margin="{TemplateBinding Padding}" x:Name="PART_DescriptorContent">
                            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="10,0,0,0">
                                <Image Source="{ThemeResource TelerikGridReorderHandle}" Height="16" Width="16" VerticalAlignment="Center"  />
                                <ContentControl Margin="10,0,0,0" VerticalAlignment="Center" Content="{Binding DisplayContent}"/>
                                <TextBlock Text="{Binding SortOrder, Converter={StaticResource SortOrderConverter}}"
                                FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="10" Margin="6,0,4,2" VerticalAlignment="Center"/>
                        <primitivesCommon:InlineButton Style="{StaticResource GridServiceButtonStyle}"
                                           x:Name="PART_CloseButton" Content="" FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                           Width="40" Height="40" Margin="2,0,0,0" Grid.Column="1" FontWeight="SemiBold"/>
                        <TextBlock Grid.Row="1" Grid.ColumnSpan="2" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="9" Text=""
                       Opacity="{TemplateBinding BottomGlyphOpacity}" Margin="11,2,0,2"
                       Foreground="{ThemeResource TelerikGridFlyoutGroupForegroundBrush}"/>
                        <Rectangle Margin="-2" StrokeThickness="2" Stroke="{TemplateBinding Foreground}" Grid.ColumnSpan="2"
                       HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Visibility="{TemplateBinding OuterBorderVisibility}"/>


But return this error:

System.Runtime.InteropServices.COMException: Error HRESULT E_FAIL has been returned from a call to a COM component.
   at Windows.UI.Xaml.UIElement.Measure(Size availableSize)
   at Telerik.UI.Xaml.Controls.Grid.Primitives.DataGridFlyoutPanel.MeasureOverride(Size availableSize)
   at Windows.UI.Xaml.FrameworkElement.MeasureOverride(Size availableSize)
   at Telerik.UI.Xaml.Controls.RadControl.MeasureOverride(Size availableSize)


And for the CaseButton, I have overridden gridPrimitives:DataGridFilteringFlyout template without errors, but still cant changeToggleButton, becouse its inside a ContentControl (FirstFilterControl and SecondFilterControl).  

Any solution for this?


Thank you!

4 Answers, 1 is accepted

Sort by
Ivaylo Gergov
Telerik team
answered on 23 Jan 2017, 03:00 PM
Hello Manuel,

Because the default template of the CloseButton uses Telerik Named Brushes you should resolve them properly. More information can be found here. About the FirstFilterControl and SecondFilterControl ​: there are several IFilterControls predefined for each type of column. You can change their template as well. For example, you can find the DataGridTextFilterControl, DataGridTimeFilterControl, DataGridNumericalFilterControl and DataGridBooleanFilterControl.

I hope this helps.
Top achievements
Rank 1
answered on 24 Jan 2017, 10:48 AM



I can not find PaletteInitializer class in any assembly. In fact, I can't see any finished in theming.


Thank you.

Ivaylo Gergov
Telerik team
answered on 27 Jan 2017, 09:24 AM
Hello Manuel,

I am sorry, this link seems to be outdated. The article is actually here. For your convenience, I have prepared a sample app which includes the xaml modifications you have sent while the app does not crash.
Please, see the attached file.

I hope this helps.

Ivaylo Gergov
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Top achievements
Rank 1
answered on 27 Jan 2017, 01:08 PM
That worked, thank you.
Asked by
Top achievements
Rank 1
Answers by
Ivaylo Gergov
Telerik team
Top achievements
Rank 1
Share this question