Document host and SplitContainer styles

1 Answer 18 Views
Docking Styling
Deltaohm
Top achievements
Rank 2
Iron
Iron
Deltaohm asked on 16 Feb 2022, 10:59 AM | edited on 16 Feb 2022, 01:29 PM

Hi,
I have a RadDocking with a Document.host and 2 RadSplitcontainer. Every parts of control has its own Header and they are shown correctly, but with different style as you could see in figure:

I haven't seen any settings in xaml about the style and I would like to use everywhere the left style.

This is the DataTemplate used:

<DataTemplate x:Key="{x:Static r:ResourcesKeys.TabContentSpectral}" DataType="WpfPlot">
				<t:ProportionalStackPanel Orientation="Vertical">
					<t:RadToolBar t:ProportionalStackPanel.ElementHeight="32">
						<t:RadButton Command="{Binding ResetCommand}"									 
							ToolTip="{DynamicResource ResourceKey={x:Static r:ResourcesKeys.ResetMapTooltip}}">
							<Image Source="/DeltaOhm.NsModules;component/Images/refresh.png"
																		   Style="{StaticResource ResourceKey=TreeviewImageSize}"/>
						</t:RadButton>
						<t:RadButton x:Name="ToolbarSetAxisScale"
							ToolTip="{DynamicResource ResourceKey={x:Static r:ResourcesKeys.MISetAxisScale}}"
							Loaded="ToolbarSetAxisScale_Loaded">
							<Image Source="/DeltaOhm.NsModules;component/Images/ToolbarSetAxisScale.png"
																		   Style="{StaticResource ResourceKey=TreeviewImageSize}"/>
						</t:RadButton>
						<t:RadButton
							ToolTip="{DynamicResource ResourceKey={x:Static r:ResourcesKeys.ColorPaletteTooltip}}"
							Loaded="RadPathButton_Loaded">
							<Image Source="/DeltaOhm.NsModules;component/Images/ToolbarColorPalette.png"
																		   Style="{StaticResource ResourceKey=TreeviewImageSize}"/>
						</t:RadButton>
						<t:RadButton
							x:Name="SonogrammaMinimi"
							ToolTip="{DynamicResource ResourceKey={x:Static r:ResourcesKeys.SonogrammaDeiMinimiTooltip}}"
							Command="{Binding CalcolaSpettroDeiMinimiCommand}">
							<Image Source="/DeltaOhm.NsModules;component/Images/SonogrammaDeiMinimi.png"
																		   Style="{StaticResource ResourceKey=TreeviewImageSize}"/>
						</t:RadButton>
					</t:RadToolBar>
					<t:RadDocking x:Name="DockingSpectral"
						RetainPaneSizeMode="DockingAndFloating">
						<t:RadDocking.DocumentHost>
							<t:RadPaneGroup x:Name="RadPaneGroup1">
								<t:RadPane x:Name="PaneSpectralColorMap" t:RadDocking.SerializationTag="PaneSpectralColorMap" 
										   Loaded="PaneSpectralColorMap_Loaded">
									<Grid x:Name="Grid1">
										<local:SpectralColorMapControl Loaded="SpectralColorMapControl_Loaded" TabIndex="0"
													   SizeChanged="SpectralColorMapControl_SizeChanged"/>
									</Grid>
								</t:RadPane>
							</t:RadPaneGroup>
						</t:RadDocking.DocumentHost>
						<t:RadSplitContainer
							x:Name="SpectralTimeHistory" InitialPosition="DockedBottom"
											 MinHeight="180">
							<t:RadPaneGroup >
								<t:RadPane x:Name="PaneSpectralTimeHistory" t:RadDocking.SerializationTag="PaneSpectralTimeHistory"
										   Loaded="PaneSpectralTimeHistory_Loaded">
									<Grid>
										<local:SpectralTimeHistoryControl TabIndex="1"
											Loaded="SpectralTimeHistoryControl_Loaded"	
											Frequency="{Binding FrequencySelected, Mode=TwoWay}"/>
									</Grid>
								</t:RadPane>
							</t:RadPaneGroup>
						</t:RadSplitContainer>
						<t:RadSplitContainer x:Name="SpectralHistogram" InitialPosition="DockedRight"
											 MinWidth="225">
							<t:RadPaneGroup x:Name="RadPaneGroup2">
								<t:RadPane x:Name="PaneSpectralHistogram" t:RadDocking.SerializationTag="PaneSpectralHistogram"
										   Loaded="PaneSpectralHistogram_Loaded">
									<Grid x:Name="Grid2">
										<local:SpectralHistogramControl x:Name="SpectralHistogramControl1"
											Loaded="SpectralHistogramControl_Loaded"
											TimeStamp="{Binding MainVM.TabCursori.CursorV0DT, Mode=TwoWay}"
											Intervallo="{Binding MainVM.TabCursori.CursorRange}"/>
									</Grid>
								</t:RadPane>
							</t:RadPaneGroup>
						</t:RadSplitContainer>
					</t:RadDocking>
				</t:ProportionalStackPanel>
			</DataTemplate>

 

And this is the code that binding the header (in code behind because "Plot" is a dynamic value)

		private void PaneSpectralColorMap_Loaded(object sender, RoutedEventArgs e)
		{
			if (sender is RadPane pane)
			{
				pane.SetBinding(HeaderedContentControl.HeaderProperty, new Binding("Plot.SpectralColorMapVM.Title"));
			}
		}
		private void PaneSpectralTimeHistory_Loaded(object sender, RoutedEventArgs e)
		{
			if (sender is RadPane pane)
			{
				pane.SetBinding(HeaderedContentControl.HeaderProperty, new Binding("Plot.SpectralProfileVM.Title"));
			}
		}
		private void PaneSpectralHistogram_Loaded(object sender, RoutedEventArgs e)
		{
			if (sender is RadPane pane)
			{
				pane.SetBinding(HeaderedContentControl.HeaderProperty, new Binding("Plot.SpectralHistogramVM.Title"));
			}

		}



1 Answer, 1 is accepted

Sort by
0
Accepted
Stenly
Telerik team
answered on 21 Feb 2022, 10:14 AM

Hello Deltaohm,

This behavior is present because, by default, for the Windows8 theme, the FontFamily property of the PaneHeader element is set to Segoe UI Light, whereas for the RadPane element, the default value for the FontFamily property is Segoe UI SemiBold.

To change this behavior, the default control template of the PaneHeader element would need to be extracted. For the Windows8 theme (which is present in the provided image), the control template has an x:Key="PaneHeaderControlTemplate". After it is extracted, locate the ContentControl element, which has an x:Name="TitleElement" and modify its FontFamily property (you could set Segoe UI SemiBold). Finally, create a new Style with TargetType="PaneHeader" and set the modified control template to the Template property, via a Setter.

Please note that if the Xaml version of our assemblies is used, each StaticResource present in it would also need to be extracted. Otherwise, a XamlParseException will be thrown.

In addition, upon inspecting the provided code snippet, I notice that the ProportionalStackPanel element is used. I would recommend using different layout control, as the ProporitonalStackPanel is only meant to be used internally in our source code.

With that said, I have prepared a sample project, so, could you give it a try?

Regards,
Stenly
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Docking Styling
Asked by
Deltaohm
Top achievements
Rank 2
Iron
Iron
Answers by
Stenly
Telerik team
Share this question
or