Change colors of RadVirtualKeyboardWindow's close button

[ffunke]

Hello,

I need to change the color of the RadVirtualKeyboardWindow's close button. At the moment it is not viewable very good. I use Material style around in my application, but it seems that it does not completly fit my needs. 

I tried to change the button's beahviour like this:

<Style TargetType="telerik:RadVirtualKeyboardWindow">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:RadVirtualKeyboardWindow">
                <Grid>
                    <!-- Fensterinhalt -->
                    <Border Background="{TemplateBinding Background}">
                        <ContentPresenter />
                    </Border>

                    <!-- Schließen-Button -->
                    <Button x:Name="PART_CloseButton"
                            Width="24" Height="24"
                            HorizontalAlignment="Right"
                            VerticalAlignment="Top"
                            Margin="5"
                            Background="DarkRed"
                            Foreground="White"
                            BorderBrush="Transparent"
                            Content="✕"
                            FontWeight="Bold"
                            Cursor="Hand"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

But that actually lead to a very long button and could not change that either:

What can I try next?

Thanks and best regards,

Ferdinand

[Stenly]

Hello Ferdinand,

To achieve this requirement, you could extract the default Style with x:Key="WindowButtonStyle" and modify the Border element from the default ControlTemplate to template bind to the Background property. To additionally style the close button when the mouse is over and when it is pressed, you could set the MaterialAssist.MouseOverBrush and MaterialAssist.PressedBrush attached properties. To apply the customized Style, without extracting the default ControlTemplate of the RadWindow element (the RadVirtualKeyboardWindow element uses it), you could implement an attached property to retrieve the close button and apply it.

The following code snippets showcase this suggestion's implementation:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/Telerik.Windows.Controls.Navigation;component/Themes/GenericMaterial.xaml"/>
        </ResourceDictionary.MergedDictionaries>
        <Style x:Key="CustomWindowButtonStyle" TargetType="telerik:RadButton">
            <Setter Property="Background" Value="Green"/>
            <Setter Property="mat:MaterialAssist.MouseOverBrush" Value="Red"/>
            <Setter Property="mat:MaterialAssist.PressedBrush" Value="Orange"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Foreground" Value="{telerik:MaterialResource ResourceKey=MarkerInvertedBrush}"/>
            <Setter Property="Height" Value="48"/>
            <Setter Property="Width" Value="48"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Bottom"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="UseLayoutRounding" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:RadButton">
                        <Grid>
                            <Border x:Name="BorderVisual" Background="{TemplateBinding Background}"/>
                            <mat:MaterialControl IsSmartClipped="True" VerticalContentAlignment="Center" HorizontalContentAlignment="Center">
                                <ContentPresenter x:Name="Content" Margin="{TemplateBinding Padding}"/>
                            </mat:MaterialControl>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadWindow}, Path=WindowState}" Value="Minimized">
                                <Setter Property="Width" Value="28"/>
                                <Setter Property="Height" Value="28"/>
                            </DataTrigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="Content" Property="Opacity" Value="{telerik:MaterialResource ResourceKey=DisabledOpacity}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>
</Application.Resources>

public class WindowExtensions
{
    public static Style GetCloseButtonStyle(DependencyObject obj)
    {
        return (Style)obj.GetValue(CloseButtonStyleProperty);
    }

    public static void SetCloseButtonStyle(DependencyObject obj, Style value)
    {
        obj.SetValue(CloseButtonStyleProperty, value);
    }

    // Using a DependencyProperty as the backing store for CloseButtonStyle.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty CloseButtonStyleProperty =
        DependencyProperty.RegisterAttached("CloseButtonStyle", typeof(Style), typeof(WindowExtensions), new PropertyMetadata(null, OnCloseButtonStyleChanged));

    private static void OnCloseButtonStyleChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        RadVirtualKeyboardWindow window = (RadVirtualKeyboardWindow)d;
        window.Loaded += Window_Loaded;
    }

    private static void Window_Loaded(object sender, RoutedEventArgs e)
    {
        RadVirtualKeyboardWindow window = (RadVirtualKeyboardWindow)sender;

        RadButton closeBtn = window.ChildrenOfType<RadButton>().FirstOrDefault(x => x.Name == "PART_CloseButton");

        if (closeBtn != null)
        {
            Style style = GetCloseButtonStyle(window);
            if (style != null)
            {
                closeBtn.Style = style;
            }
        }
    }
}

Setting the custom attached property:

var keyboardWindow = new RadVirtualKeyboardWindow(new RadVirtualKeyboard());

Style closeBtnStyle = Application.Current.Resources["CustomWindowButtonStyle"] as Style;
WindowExtensions.SetCloseButtonStyle(keyboardWindow, closeBtnStyle);

keyboardWindow.Show();

The produced result is as follows:

With this being said, I attached a sample project for you to test, which contains the implementation of this suggestion.

Regards,
Stenly
Progress Telerik