office2013 theme

[Raul]

Hello,

I'm currently applying the office2013 theme to a project and I'm having some strange/unexpected issues. ​I have copied the Telerik.Windows.Themes.Office2013.dll file to a project folder.

 Here is the relevant code of the App.xaml file:

<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/System.Windows.xaml"/>
        <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/Telerik.Windows.Controls.xaml"/>
        <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/Telerik.Windows.Controls.Input.xaml"/>
        <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/Telerik.Windows.Controls.Navigation.xaml"/>
        <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/Telerik.Windows.Controls.GridView.xaml"/>

        <ResourceDictionary>
            <Style TargetType="telerik:RadComboBox" BasedOn="{StaticResource RadComboBoxStyle}">
                <Setter Property="MinHeight" Value="0"/>
            </Style>
            <Style TargetType="TextBox" BasedOn="{StaticResource TextBoxStyle}">
                <Setter Property="MinHeight" Value="0"/>
                <Setter Property="Padding" Value="2"/>
            </Style>
            <Style TargetType="telerik:GridViewHeaderCell" BasedOn="{StaticResource GridViewHeaderCellStyle}">
                <Setter Property="Margin" Value="0"/>
                <Setter Property="Padding" Value="6,0,0,0"/>
                <Setter Property="FontSize" Value="13"/>
            </Style>
            <Style TargetType="telerik:RadButton" BasedOn="{StaticResource RadButtonStyle}">
                <Setter Property="MinHeight" Value="0"/>
            </Style>
            <Style TargetType="telerik:RadNumericUpDown" BasedOn="{StaticResource RadNumericUpDownStyle}">
                <Setter Property="MinHeight" Value="0"/>
            </Style>
            <Style TargetType="Label">
                <Setter Property="MinHeight" Value="0"/>
            </Style>
        </ResourceDictionary>
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

 

1. I wanted to reduce the font sizes because they are too large for my taste. It was no problem to set new sizes for the fonts, but the controls have a MinHeight value that prevents that the control adapts to the new size so that there is no space gain. Therefore I have defined in the ResourceDictionary that all relevant controls should have a MinHeight of 0. Why do the controls have such a large default MinHeight?
2. As soon as I add "component/Themes/Telerik.Windows.Controls.Docking.xaml" I will get an exception. I don't know if I need it, but most examples I have seen are also using that line. They are also using the RibbonView.xaml line, which also causes an exception on my program.
3. The style definition for Label throws an exception if I use: BasedOn="{StaticResource LabelStyle}". Is this normal? Didn't expect it because I don't have any issues with the TextBox style definition.
4. The most strange issue I'm having comes from the filter popup window of the RadGridView (see attached image). As you can see the window sometimes does not close automatically. And one of the popup windows uses the wrong ComboBox. It's always on the same column but it is ok as soon as I remove the RadComboBox style definition from above. 
5. How can I change the Filter-Symbol color from the column header when filtering is active. I would like to have a color that is more visible (yellor or red)?

Greetings

Raul

[Masha]

Hi Raul,

Straight to your questions:

1. I wanted to reduce the font sizes because they are too large for my taste. It was no problem to set new sizes for the fonts, but the controls have a MinHeight value that prevents that the control adapts to the new size so that there is no space gain. I have defined in the ResourceDictionary that all relevant controls should have a MinHeight of 0. Why do the controls have such a large default MinHeight?
   • Telerik Office2013 theme was inspired by Microsoft Office 2013 which controls' default height is set to 26. And you need to modify the height of each control in order the height to be smaller. You may need to add some additional padding to make the controls look good.
2. As soon as I add "component/Themes/Telerik.Windows.Controls.Docking." I will get an exception. I don't know if I need it, but most examples I have seen are also using that line. They are also using the RibbonView.xaml line, which also causes an exception on my program.
   • Unfortunately, I was not able to reproduce this exception at our side. I've attached a sample project with the provided XAML, where the Telerik.Windows.Controls.Docking.xam is merged and the project works as expected.
3. The style definition for Label throws an exception if I use: BasedOn="{StaticResource LabelStyle}". Is this normal? Didn't expect it because I don't have any issues with the TextBox style definition.
   • In order to use BasedOn={StaticResource LabelStyle}, the label style TargetType should be TargetType=":Label".
     
     

     <Style TargetType="telerik:Label" BasedOn="{StaticResource LabelStyle}">
          <Setter Property="MinHeight" Value="0"/>
          <Setter Property="Padding" Value="4 3"/>
     </Style>

4. The most strange issue I'm having comes from the filter popup window of the RadGridView (see attached image). As you can see the window sometimes does not close automatically. And one of the popup windows uses the wrong ComboBox. It's always on the same but it as soon as I remove the RadComboBox style definition from above. 
   • From the screenshots, it seems that somehow RadComboBox inherited the default OfficeBlack. Can you confirm that used binaries are NoXaml? It would be really helpful if you can modify the attached project with this behavior in order to give you the solution to this problem.
5. How can I change the Filter-Symbol color from the column header when filtering is I would like to have a color that is more visible ( or red)?
   • You need to modify the control template of GridViewHeaderCell and add triggers to the button name PART_DistinctFilterControl. Also, you need to update and the control template of FilteringDropDownStyle in order the trigger changes to be applied. I demonstrated how this can be achieved in the attached project.

I hope this information would be helpful.

Regards,
Masha
Telerik

[Raul]

Hello,

sorry for the late response, but I was quite busy.

 [quote]

1. The most strange issue I'm having comes from the filter popup window of the RadGridView (see attached image). As you can see the window sometimes does not close automatically. And one of the popup windows uses the wrong ComboBox. It's always on the same but it as soon as I remove the RadComboBox style definition from above. 
   • From the screenshots, it seems that somehow RadComboBox inherited the default OfficeBlack. Can you confirm that used binaries are NoXaml? It would be really helpful if you can modify the attached project with this behavior in order to give you the solution to this problem.

[/quote]

 

If you replace the content of the file App.xaml with this sample code you will get the described behaviour. In this case the ​RadComboBox at the top of the window is affected. If you remove it then the first opened filter-popup window will contain the affected control. And yes, I'm using the NoXaml binaries (C:\Program Files (x86)\Telerik\UI for WPF Q2 2015\Binaries.NoXaml\WPF40\Telerik.Windows.Themes.Office2013.dll).

<Application x:Class="WPF_SampleProject.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             StartupUri="MainWindow.xaml">

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/System.Windows.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/Telerik.Windows.Controls.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/Telerik.Windows.Controls.Input.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/Telerik.Windows.Controls.Navigation.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Office2013;component/Themes/Telerik.Windows.Controls.GridView.xaml"/>

                <ResourceDictionary>
                    <Style TargetType="telerik:RadComboBox" BasedOn="{StaticResource RadComboBoxStyle}"/>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

[Masha]

Hello Raul,

I've reattached the project with included NoXaml binaries in the project in order to demonstrate that the issue is not reproduced at our side. Looks like the issue might be caused  if there is a referenced XAML binary in project (instead of no XAML one) and ComboBox is receiving the default Theme (OfficeBlack).  So please check if all of the referenced binaries are from the Binaries.NoXaml folder of the
installation folder of the control. 

I'm looking forward to hearing from you.

Regards,
Masha
Telerik