Change skin in FlyOut

5 posts, 1 answers
  1. Manuel
    Manuel avatar
    9 posts
    Member since:
    Aug 2015

    Posted 19 Jan 2017 Link to this post

    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!

  2. Ivaylo Gergov
    Ivaylo Gergov avatar
    691 posts

    Posted 23 Jan 2017 Link to this post

    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.
  3. Manuel
    Manuel avatar
    9 posts
    Member since:
    Aug 2015

    Posted 24 Jan 2017 in reply to Ivaylo Gergov Link to this post



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


    Thank you.

  4. Answer
    Ivaylo Gergov
    Ivaylo Gergov avatar
    691 posts

    Posted 27 Jan 2017 Link to this post

    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
  5. Manuel
    Manuel avatar
    9 posts
    Member since:
    Aug 2015

    Posted 27 Jan 2017 in reply to Ivaylo Gergov Link to this post

    That worked, thank you.
Back to Top