Docking theming problem

[Oliver]

Hi,

I have a Telerik application with docking functionnalities. In some of my panel I have some controls which I have to add some Telerik custom theming in a resources file for TextBox, CheckBox, etc...

When my panel is docked, my TextBox doesn't take the space he have to take but the theming is ok (DOCK-1.JPG). If I undock my panel, the TextBox take the place he have to take but the theming wasn't applied on my TextBox (DOCK-2.JPG).

Resource file

<

 

ResourceDictionary

 

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">

 

 

 

<Style TargetType="TextBox" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:Office_BlueTheme, ElementType=TextBox}}" />

 

 

 

<Style TargetType="CheckBox" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:Office_BlueTheme, ElementType=CheckBox}}" />

 

 

 

<Style TargetType="RadioButton" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:Office_BlueTheme, ElementType=RadioButton}}" />

 

</

 

ResourceDictionary>

 

XAML

<

 

telerik:RadWindow x:Class="com.christiegrp.Neuron.ClientApplication.DictationForm"

 

 

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"

 

 

xmlns:helper="clr-namespace:com.christiegrp.Neuron.ClientApplication;assembly=ClientHelper"

 

 

xmlns:telerikRibbonBar="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.RibbonBar"

 

 

Header="DictationForm" Name="Me" WindowState="Maximized" SizeToContent="False" PreviewClosed="Me_PreviewClosed"

 

 

telerik:PersistenceManager.StorageId="DictationForm">

 

 

 

<telerik:RadWindow.IconTemplate>

 

 

 

<DataTemplate>

 

 

 

<Image Source="Resources/DictationModuleWPF_48x48.png" Height="24" Width="24" Stretch="Fill" Margin="0 2 3 0" />

 

 

 

</DataTemplate>

 

 

 

</telerik:RadWindow.IconTemplate>

 

 

 

<telerik:RadWindow.Resources>

 

 

 

<ResourceDictionary>

 

 

 

<ResourceDictionary.MergedDictionaries>

 

 

 

<ResourceDictionary Source="DictationForm-Fr-Res.xaml"/>

 

 

 

<ResourceDictionary Source="pack://application:,,,/Resources;component/Neuron-CustomStyles.xaml"/>

 

 

 

<ResourceDictionary Source="/Telerik.Windows.Controls.Navigation;component/Themes/GenericOfficeBlack.xaml"/>

 

 

 

</ResourceDictionary.MergedDictionaries>

 

 

 

</ResourceDictionary>

 

 

 

</telerik:RadWindow.Resources>

 

 

 

 

<Grid Name="gridRoot">

 

 

 

 

<Grid.RowDefinitions>

 

 

 

<RowDefinition Height="Auto" />

 

 

 

<RowDefinition Height="*" />

 

 

 

</Grid.RowDefinitions>

 

 

 

 

<!-- The following element is used to trigger an event allowing to replace the language resources before they are used. -->

 

 

 

<TextBlock Initialized="ReplaceLanguageResources"/>

 

 

 

<telerikRibbonBar:RadRibbonBar Name="radRibbonBar" Margin="10 10 10 0" telerik:KeyTipService.IsKeyTipsEnabled="True" MinimizeButtonVisibility="Visible" ApplicationName="Neuron" IsMinimized="True" ApplicationButtonImageSource="Resources/Neuron_32x32.png">

 

 

 

<telerikRibbonBar:RadRibbonBar.Effect>

 

 

 

<DropShadowEffect />

 

 

 

</telerikRibbonBar:RadRibbonBar.Effect>

 

 

 

<telerikRibbonBar:RadRibbonBar.ApplicationMenu>

 

 

 

<telerikRibbonBar:ApplicationMenu telerik:KeyTipService.AccessText="F">

 

 

 

<telerikRibbonBar:ApplicationMenu.Content>

 

 

 

<StackPanel Width="300">

 

 

 

<telerikRibbonBar:RadGroupHeader Content="Menu" />

 

 

 

<telerikRibbonBar:RadRibbonButton Content="1. Option..." HorizontalAlignment="Stretch" />

 

 

 

<telerikRibbonBar:RadRibbonButton Content="2. Option..." HorizontalAlignment="Stretch" />

 

 

 

<telerikRibbonBar:RadRibbonButton Content="3. Option..." HorizontalAlignment="Stretch" />

 

 

 

<telerikRibbonBar:RadRibbonButton Content="4. Option..." HorizontalAlignment="Stretch" />

 

 

 

<telerikRibbonBar:RadRibbonButton Content="5. Option..." HorizontalAlignment="Stretch" />

 

 

 

<telerikRibbonBar:RadRibbonButton Content="6. Option..." HorizontalAlignment="Stretch" />

 

 

 

<telerikRibbonBar:RadRibbonButton Content="7. Option..." HorizontalAlignment="Stretch" />

 

 

 

</StackPanel>

 

 

 

</telerikRibbonBar:ApplicationMenu.Content>

 

 

 

<telerikRibbonBar:ApplicationMenu.FooterContent>

 

 

 

<StackPanel Height="25" Orientation="Horizontal">

 

 

 

<telerik:RadButton Width="106" Height="22" Margin="3 0" Click="radButtonQuit_Click">

 

 

 

<telerik:RadButton.Content>

 

 

 

<StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="3 0 5 0">

 

 

 

<Image Width="16" Height="16" Source="Resources/Exit_32x32.png" />

 

 

 

<TextBlock Margin="4 0 0 0" VerticalAlignment="Center" Text="{StaticResource Quit}" />

 

 

 

</StackPanel>

 

 

 

</telerik:RadButton.Content>

 

 

 

</telerik:RadButton>

 

 

 

</StackPanel>

 

 

 

</telerikRibbonBar:ApplicationMenu.FooterContent>

 

 

 

<telerikRibbonBar:RadRibbonButton Text="1. Option..." />

 

 

 

<telerikRibbonBar:Separator />

 

 

 

<telerikRibbonBar:RadRibbonButton Text="2. Option..." />

 

 

 

<telerikRibbonBar:RadRibbonButton Text="3. Option..." />

 

 

 

<telerikRibbonBar:Separator />

 

 

 

<telerikRibbonBar:RadRibbonButton Text="4. Option..." />

 

 

 

<telerikRibbonBar:RadRibbonButton Text="5. Option..." />

 

 

 

<telerikRibbonBar:RadRibbonButton Text="6. Option..." />

 

 

 

<telerikRibbonBar:Separator />

 

 

 

<telerikRibbonBar:RadRibbonButton Text="7. Option..." LargeImage="Resources/Exit_32x32.png" />

 

 

 

</telerikRibbonBar:ApplicationMenu>

 

 

 

</telerikRibbonBar:RadRibbonBar.ApplicationMenu>

 

 

 

 

<telerikRibbonBar:RadRibbonBar.QuickAccessToolBar>

 

 

 

<telerikRibbonBar:QuickAccessToolBar>

 

 

 

<!--

 

<telerikRibbonBar:RadRibbonButton SmallImage="Resources/Departments_32x32.png" SnapsToDevicePixels="True"/>

<telerikRibbonBar:RadRibbonButton SmallImage="Resources/Billing_32x32.png" SnapsToDevicePixels="True"/>

<telerikRibbonBar:RadRibbonButton SmallImage="Resources/Receivables_32x32.png" SnapsToDevicePixels="True"/>

<telerikRibbonBar:RadRibbonButton SmallImage="Resources/Reports_32x32.png" SnapsToDevicePixels="True"/>

<telerikRibbonBar:RadRibbonButton SmallImage="Resources/Files_32x32.png" SnapsToDevicePixels="True"/>

<telerikRibbonBar:RadRibbonButton SmallImage="Resources/Configuration_32x32.png" SnapsToDevicePixels="True"/>

-->

 

 

<telerikRibbonBar:RadRibbonButton SmallImage="Resources/Exit_32x32.png" SnapsToDevicePixels="True" Click="radButtonQuit_Click"/>

 

 

 

</telerikRibbonBar:QuickAccessToolBar>

 

 

 

</telerikRibbonBar:RadRibbonBar.QuickAccessToolBar>

 

 

 

</telerikRibbonBar:RadRibbonBar>

 

 

 

 

<telerik:RadDocking Grid.Row="1" Margin="10">

 

 

 

<telerik:RadDocking.Effect>

 

 

 

<DropShadowEffect />

 

 

 

</telerik:RadDocking.Effect>

 

 

 

 

<telerik:RadDocking.DocumentHost>

 

 

 

<telerik:RadSplitContainer>

 

 

 

<telerik:RadPaneGroup>

 

 

 

<telerik:RadPane Title="{StaticResource ScannedDocs}" CanFloat="{Binding ElementName=Me, Path=IsDockable}" CanUserPin="{Binding ElementName=Me, Path=IsDockable}" CanUserClose="False">

 

 

 

</telerik:RadPane>

 

 

 

<telerik:RadPane Title="{StaticResource Images}" CanFloat="{Binding ElementName=Me, Path=IsDockable}" CanUserPin="{Binding ElementName=Me, Path=IsDockable}" CanUserClose="False">

 

 

 

</telerik:RadPane>

 

 

 

</telerik:RadPaneGroup>

 

 

 

</telerik:RadSplitContainer>

 

 

 

</telerik:RadDocking.DocumentHost>

 

 

 

<telerik:RadSplitContainer InitialPosition="DockedRight" Orientation="Vertical">

 

 

 

<!-- Controls -->

 

 

 

<telerik:RadPaneGroup Height="Auto">

 

 

 

<telerik:RadPane Title="{StaticResource Controls}" CanDockInDocumentHost="False" CanFloat="{Binding ElementName=Me, Path=IsDockable}" CanUserPin="{Binding ElementName=Me, Path=IsDockable}" CanUserClose="False">

 

 

 

<Grid>

 

 

 

<Grid.ColumnDefinitions>

 

 

 

<ColumnDefinition Width="Auto" />

 

 

 

<ColumnDefinition Width="Auto" />

 

 

 

<ColumnDefinition Width="Auto" />

 

 

 

<ColumnDefinition Width="Auto" />

 

 

 

</Grid.ColumnDefinitions>

 

 

 

<Grid.RowDefinitions>

 

 

 

<RowDefinition Height="Auto" />

 

 

 

<RowDefinition Height="Auto" />

 

 

 

<RowDefinition Height="Auto" />

 

 

 

</Grid.RowDefinitions>

 

 

 

 

<helper:NavigationControl Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Name="dnDocuments" Text="{StaticResource Documents}" NavigationChangedEvent="dnDocuments_NavigationChanged" Margin="5" Buttons="PreviousNext"/>

 

 

 

<helper:NavigationControl Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Name="dnExams" Text="{StaticResource Exams}" NavigationChangedEvent="dnExams_NavigationChanged" Margin="5" Buttons="PreviousNext"/>

 

 

 

<CheckBox Grid.Column="0" Grid.Row="2" Name="ckUrgent" Margin="5" Content="{StaticResource Urgent}" />

 

 

 

<CheckBox Grid.Column="1" Grid.Row="2" Name="ckSign" Margin="5" Content="{StaticResource Sign}" />

 

 

 

<CheckBox Grid.Column="2" Grid.Row="2" Name="ckOnHold" Margin="5" Content="{StaticResource FilmsPending}" />

 

 

 

<WindowsFormsHost Grid.Column="3" Grid.Row="0" Grid.RowSpan="3" Margin="5" Name="RecorderContainer" Height="Auto" Width="Auto" />

 

 

 

</Grid>

 

 

 

</telerik:RadPane>

 

 

 

</telerik:RadPaneGroup>

 

 

 

<!-- Reports -->

 

 

 

<telerik:RadPaneGroup>

 

 

 

<telerik:RadPane Title="{StaticResource OldReports}" CanDockInDocumentHost="False" CanFloat="{Binding ElementName=Me, Path=IsDockable}" CanUserPin="{Binding ElementName=Me, Path=IsDockable}" CanUserClose="False">

 

 

 

<Grid Margin="5">

 

 

 

<Grid.RowDefinitions>

 

 

 

<RowDefinition Height="*" />

 

 

 

<RowDefinition Height="*" />

 

 

 

</Grid.RowDefinitions>

 

 

 

<telerik:RadGridView Name="gridHistorical" Margin="0 0 0 2" Grid.Row="0" IsSynchronizedWithCurrentItem="True" Height="Auto" Width="Auto" IsReadOnly="True" SelectionMode="Single" RowIndicatorVisibility="Collapsed" AutoGenerateColumns="False" ShowGroupPanel="False" SelectionUnit="FullRow">

 

 

 

<telerik:RadGridView.Columns>

 

 

 

<telerik:GridViewDataColumn Header="{StaticResource Date}" HeaderTextAlignment="Center" TextAlignment="Center" IsFilterable="False" />

 

 

 

<telerik:GridViewDataColumn Header="{StaticResource Exams}" HeaderTextAlignment="Left" TextAlignment="Left" IsFilterable="False" />

 

 

 

<telerik:GridViewDataColumn Header="{StaticResource Accession}" HeaderTextAlignment="Center" TextAlignment="Center" IsFilterable="False" />

 

 

 

<telerik:GridViewDataColumn Header="{StaticResource Status}" HeaderTextAlignment="Center" TextAlignment="Center" IsFilterable="False" />

 

 

 

</telerik:RadGridView.Columns>

 

 

 

</telerik:RadGridView>

 

 

 

<TextBox Name="rtbPreviousReport" Margin="0 2 0 0" Grid.Row="1" Text="" IsEnabled="False" />

 

 

 

</Grid>

 

 

 

</telerik:RadPane>

 

 

 

<telerik:RadPane Title="{StaticResource Reports}" CanDockInDocumentHost="False" CanFloat="{Binding ElementName=Me, Path=IsDockable}" CanUserPin="{Binding ElementName=Me, Path=IsDockable}" CanUserClose="False">

 

 

 

<TextBox Name="rtbCurrentReport" Margin="5" Text="" IsReadOnly="False" />

 

 

 

</telerik:RadPane>

 

 

 

</telerik:RadPaneGroup>

 

 

 

 

<!-- Panel containing visit infos -->

 

 

 

<telerik:RadPaneGroup>

 

 

 

<telerik:RadPane Title="{StaticResource VisitInfos}" CanDockInDocumentHost="False" CanFloat="{Binding ElementName=Me, Path=IsDockable}" CanUserPin="{Binding ElementName=Me, Path=IsDockable}" CanUserClose="False">

 

 

 

<Grid Margin="5">

 

 

 

<Grid.ColumnDefinitions>

 

 

 

<ColumnDefinition Width="Auto" />

 

 

 

<ColumnDefinition Width="Auto" />

 

 

 

<ColumnDefinition Width="*" />

 

 

 

<ColumnDefinition Width="Auto" />

 

 

 

<ColumnDefinition Width="Auto" />

 

 

 

<ColumnDefinition Width="Auto" />

 

 

 

<ColumnDefinition Width="Auto" />

 

 

 

</Grid.ColumnDefinitions>

 

 

 

<Grid.RowDefinitions>

 

 

 

<RowDefinition Height="Auto" />

 

 

 

<RowDefinition Height="Auto" />

 

 

 

<RowDefinition Height="Auto" />

 

 

 

<RowDefinition Height="Auto" />

 

 

 

<RowDefinition Height="Auto" />

 

 

 

<RowDefinition Height="*" />

 

 

 

<RowDefinition Height="*" />

 

 

 

</Grid.RowDefinitions>

 

 

 

 

<!-- Row #0 -->

 

 

 

<Label BorderThickness="1" BorderBrush="Black" Grid.Column="0" Grid.Row="0" Name="lPatientMRN" Margin="0 2 2 2" Foreground="Green" FontSize="14" FontWeight="Bold" Content="N/A" />

 

 

 

<Label BorderThickness="1" BorderBrush="Black" Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2" Name="lPatientName" Margin="2" Foreground="Green" FontSize="14" FontWeight="Bold" Content="N/A" />

 

 

 

<Label BorderThickness="1" BorderBrush="Black" Grid.Column="3" Grid.Row="0" Name="lGender" Margin="2" Foreground="Green" FontSize="14" FontWeight="Bold" Content="M" />

 

 

 

<Label BorderThickness="1" BorderBrush="Black" Grid.Column="4" Grid.Row="0" Name="lPHN" Margin="2" Foreground="Green" FontSize="14" FontWeight="Bold" Content="N/A" />

 

 

 

<Label BorderThickness="1" BorderBrush="Black" Grid.Column="5" Grid.Row="0" Grid.ColumnSpan="3" Name="lPatientAge" Foreground="Green" Margin="2 2 0 2" FontSize="14" FontWeight="Bold" Content="N/A" />

 

 

 

 

<!-- Row #1 -->

 

 

 

<Label Grid.Column="0" Grid.Row="1" Content="{StaticResource Date}" HorizontalAlignment="Right" Margin="0 2 2 2" />

 

 

 

<TextBox Name="txtVisitDate" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" Margin="2" IsEnabled="False" />

 

 

 

<Label Grid.Column="3" Grid.Row="1" Content="{StaticResource Visit}" HorizontalAlignment="Right" Margin="2" />

 

 

 

<TextBox Name="txtVisitNumber" Grid.Column="4" Grid.Row="1" Grid.ColumnSpan="3" Margin="2 2 0 2" IsEnabled="False" />

 

 

 

 

<!-- Row #2 -->

 

 

 

<Label Grid.Column="0" Grid.Row="2" Content="{StaticResource Exams}" HorizontalAlignment="Right" Margin="0 2 2 2" />

 

 

 

<TextBox Name="txtExams" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="6" Margin="2 2 0 2" IsEnabled="False" />

 

 

 

 

<!-- Row #3 -->

 

 

 

<Label Grid.Column="0" Grid.Row="3" Content="{StaticResource RefPhysician}" HorizontalAlignment="Right" Margin="0 2 2 2" />

 

 

 

<TextBox Name="txtRefPhysician" Grid.Column="1" Grid.Row="3" Grid.ColumnSpan="5" Margin="2 2 0 2" IsEnabled="False" />

 

 

 

<telerik:RadButton Grid.Column="6" Grid.Row="3" Margin="2 2 0 2" Name="btnPhone" Click="btnPhone_Click">

 

 

 

<Image Height="18" Width="18" SnapsToDevicePixels="True" Source="Resources/Phone_32x32.png" />

 

 

 

</telerik:RadButton>

 

 

 

 

<!-- Row #4 -->

 

 

 

<Label Grid.Column="0" Grid.Row="4" Content="{StaticResource Technician}" HorizontalAlignment="Right" Margin="0 2 2 2" />

 

 

 

<TextBox Name="txtTech" Grid.Column="1" Grid.Row="4" Grid.ColumnSpan="6" Margin="2 2 0 2" IsEnabled="False" />

 

 

 

 

<!-- Row #5 -->

 

 

 

<Label Grid.Column="0" Grid.Row="5" Content="{StaticResource Comments}" HorizontalAlignment="Right" Margin="0 2 2 2" />

 

 

 

<TextBox Name="txtComments" Grid.Column="1" Grid.Row="5" Grid.ColumnSpan="6" Margin="2 2 0 2" IsEnabled="False" />

 

 

 

 

<!-- Row #6 -->

 

 

 

<Label Grid.Column="0" Grid.Row="6" Content="{StaticResource Note}" HorizontalAlignment="Right" Margin="0 2 2 2" />

 

 

 

<TextBox Name="txtNote" Grid.Column="1" Grid.Row="6" Grid.ColumnSpan="6" Margin="2 2 0 2" IsEnabled="False" />

 

 

 

</Grid>

 

 

 

</telerik:RadPane>

 

 

 

</telerik:RadPaneGroup>

 

 

 

</telerik:RadSplitContainer>

 

 

 

</telerik:RadDocking>

 

 

 

 

</Grid>

 

</

 

telerik:RadWindow>

 

Thank's

[Pana]

Hello Oliver,

When you drag the RadPane it is attached in a new Window so the Implicit Styles no longer work. If you want to set the theme the way you do you have to move the merged resource dictionary in the App.xaml.

Kind regards,
Pana
the Telerik team

[Oliver]

Hi,

moving the merged resource in the App.xaml desn't work (I forgot to tell you that my module it's a DLL not an application, so no instance of my App class was created).
 
Actually to force a specific Telerik theme, I add in my constructor the following line :

 

StyleManager.ApplicationTheme = new Office_BlueTheme();
 
Also, can you tell me if something exist to change Telerik default theme?

[Oliver]

Hi Pana,

I forgot to tell you that my pplication it's not an application, it's a DLL so no instance of my App.xaml.cs was created :(

Actually in the constructor of my main class, MainWindow.xaml.cs, I add the following line to force a specific theme:
StyleManager.ApplicationTheme = Office_BlueTheme();

and in my XAML I add the following line in the resources section because I have to force the theming on specific control such CheckBox, etc...:

<

 

ResourceDictionary Source="pack://application:,,,/Resources;component/Neuron-CustomStyles.xaml"/>

Here is the file Neuron-CustomStyles.xaml:

 

<

 

ResourceDictionary

 

 

 

 

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">

 

 

 

<Style TargetType="TextBox" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:Office_BlueTheme, ElementType=TextBox}}" />

 

 

 

 

 

 

<Style TargetType="CheckBox" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:Office_BlueTheme, ElementType=CheckBox}}" />

 

 

 

 

 

 

<Style TargetType="RadioButton" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:Office_BlueTheme, ElementType=RadioButton}}" />

 

 

 

 

 

 

<Style TargetType="StatusBar">

 

 

 

 

 

 

<Setter Property="Background" Value="#F1F5FB"/>

 

 

 

 

 

 

</Style>

 

</

 

ResourceDictionary>

 

 

 

Problem #1:
When my pane containing CheckBoxes is dock, the style are present on my checkboxes. But when my pane become floating, the style for checkboxes dissapeared.

Problem #2:
One of my pane contain a TextBox, without theme, the TextBox have the height/width of it's parent. If I apply the theme present in Neuron-CustomStyles.xaml, the height/width of the TextBox become. See pictures...

[Pana]

Hi Oliver,

Problem is when you undock the panes and they go floating in a ToolWindow they are actually placed in a different HWND host. Like in other Window (I mean BIG DIFFERENT WINDOW :D ). So the checkboxes placed in the RadPane no longer can find the styles since they are in a different visual tree. If you want the styles to persist you will have to set styles locally on the controls (for example as static resources so they are not lost once assigned and the RadPane is floated).

Kind regards,
Pana
the Telerik team

[Oliver]

H1 Pana,

when I undock a pane, the pane do floating, a ToolWindow is created dynamically, so how I can set the resources locally to the control ?

Thank's

[Pana]

Hi,

You can not. You could apply style to it only by setting an implicit style for ToolWindow in the App.xaml.

Best wishes,
Pana
the Telerik team