[Solved] Change skin in FlyOut

[Manuel]

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:

<grid:RadDataGrid.Resources>
    <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">
            <Setter.Value>
                <ControlTemplate TargetType="gridPrimitives:DataGridFlyoutGroupHeader">
                    <Grid HorizontalAlignment="Stretch">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <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"/>
                            </StackPanel>
                        </Border>
                        <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}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</grid:RadDataGrid.Resources>

 

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!

[Ivaylo Gergov]

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.

[Manuel]

Hi,

 

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

 

Thank you.

[Ivaylo Gergov]

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.

Regards,
Ivaylo Gergov
Telerik by Progress

[Manuel]

That worked, thank you.