Question

Modifying Default Docking.xaml styles and using User Defined Color Brushes

Posted 18 days ago by Avatar Jun Pacomios

I am trying to change the style and colors defined in Docking.xaml default template. Particularly on docking:ToolWindow and docking:DocumentWindow.

I want to define my own color brush resource keys, but the output always uses the color themes in the default themes (i.e. themes:AssetResourceKeys.<brushkeys>).

What I have attempted so far.

  • isolated docking (including ribbons)
  • added the entire default Docking.xaml as a merged dictionary in App.xaml
  • removed "x:key={x:Type ..." declarations to implicitly attempt to load my style 
  • modified the colors to point to own resource dictionary (in fact, even hard coded colors doesn't get applied)
  • Twoway bindings in AdvancedTabItemStyle triggers

Below are some of the snippets from what i tried changing so far (I intentionally want to hard code them to try to define the colors). In my implementation, I want to use my own defined resource keys.


 

	<!-- AdvancedTabControlStyle -->
	<Style x:Key="AdvancedTabControlStyle" TargetType="docking:AdvancedTabControl">
		<Setter Property="Background" Value="RosyBrown" />
		<Setter Property="BorderBrush" Value="Brown" />
		<Setter Property="BorderThickness" Value="1" />
		<Setter Property="IsActive" Value="{Binding RelativeSource={RelativeSource Self}, Path=IsKeyboardFocusWithin}" />
		<Setter Property="TabBackground" Value="Red" />
		<Setter Property="TabBackgroundActiveSelected" Value="Blue" />
		<Setter Property="TabBackgroundInactiveSelected" Value="Orange" />
		<Setter Property="TabBackgroundPointerOver" Value="Pink" />
		<Setter Property="TabBackgroundPreview" Value="Cyan" />
		<Setter Property="TabBackgroundPreviewActiveSelected" Value="Aqua" />
		<Setter Property="TabBackgroundPreviewPointerOver" Value="Purple" />

 

	<!-- dockingPrimitives:ToolWindowContainerTabControl -->
	<!--<Style x:Key="{x:Type dockingPrimitives:ToolWindowContainerTabControl}" TargetType="dockingPrimitives:ToolWindowContainerTabControl" BasedOn="{StaticResource AdvancedTabControlStyle}">-->
    <Style TargetType="dockingPrimitives:ToolWindowContainerTabControl" BasedOn="{StaticResource AdvancedTabControlStyle}">
        <Setter Property="Background" Value="Green" />
		<Setter Property="BorderBrush" Value="GreenYellow" />
        <Setter Property="BorderThickness" Value="{DynamicResource {x:Static themes:AssetResourceKeys.ToolWindowContainerTabControlBorderNormalThicknessKey}}" />
        <Setter Property="TabBackground" Value="Red" />
        <Setter Property="TabBackgroundActiveSelected" Value="Blue" />
        <Setter Property="TabBackgroundInactiveSelected" Value="Orange" />
        <Setter Property="TabBackgroundPointerOver" Value="Pink" />
        <Setter Property="TabBackgroundPreview" Value="Cyan" />
        <Setter Property="TabBackgroundPreviewActiveSelected" Value="Aqua" />
        <Setter Property="TabBackgroundPreviewPointerOver" Value="Purple" />

 

	<!-- dockingPrimitives:TabbedMdiContainerTabControl -->
	<Style x:Key="{x:Type dockingPrimitives:TabbedMdiContainerTabControl}" TargetType="dockingPrimitives:TabbedMdiContainerTabControl" BasedOn="{StaticResource AdvancedTabControlStyle}">
		<Setter Property="Background" Value="AliceBlue" />
		<Setter Property="BorderBrush" Value="BlueViolet" />
		<Setter Property="BorderThickness" Value="{DynamicResource {x:Static themes:AssetResourceKeys.TabbedMdiContainerTabControlBorderNormalThicknessKey}}" />
		<Setter Property="CanTabsHighlightOnPointerOverWhenInactive" Value="True" />
		<Setter Property="HasTabCloseButtons" Value="True" />
		<Setter Property="HighlightBrushActive" Value="Blue" />
		<Setter Property="HighlightBrushInactive" Value="Cyan" />
		<Setter Property="HighlightThickness" Value="5" />
        <Setter Property="TabBackground" Value="Red" />
        <Setter Property="TabBackgroundActiveSelected" Value="Brown" />
        <Setter Property="TabBackgroundInactiveSelected" Value="Pink" />
		<Setter Property="TabBackgroundPointerOver" Value="Yellow" />
		<Setter Property="TabBackgroundPreview" Value="Orange" />
		<Setter Property="TabBackgroundPreviewActiveSelected" Value="Beige" />
		<Setter Property="TabBackgroundPreviewPointerOver" Value="Violet" />

 some of the other implicit defined styles.

	<!-- docking:ToolWindow -->
	<!--<Style x:Key="{x:Type docking:ToolWindow}" TargetType="docking:ToolWindow" BasedOn="{StaticResource DockingWindowStyle}">-->
    <Style TargetType="docking:ToolWindow" BasedOn="{StaticResource DockingWindowStyle}">

        <Setter Property="TabToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=Title, Mode=OneWay}" />
	</Style>
	
	<!-- docking:DocumentWindow -->
	<!--<Style x:Key="{x:Type docking:DocumentWindow}" TargetType="docking:DocumentWindow" BasedOn="{StaticResource DockingWindowStyle}">-->
    <Style TargetType="docking:DocumentWindow" BasedOn="{StaticResource DockingWindowStyle}">
		<Setter Property="TabToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=FileName, Mode=OneWay}" />
	</Style>

I am particulary confident that the styles are getting loaded, Visual Studio Live Property explorer points to the correct Style and correct color values but the colors are just not getting pushed through the UI at runtime.

Just to add some more information, I also tried setting Twoway bindings in AdvancedTabItemStyle triggers where I believe the Binding is driven by the TemplatedParent ("docking:AdvancedTabControl").

    <!-- AdvancedTabItemStyle -->
	<Style x:Key="AdvancedTabItemStyle" TargetType="docking:AdvancedTabItem">

 

		<ControlTemplate.Triggers>
			<Trigger Property="LayoutKind" Value="Pinned">
				<Setter TargetName="ToggleLayoutKindButton" Property="ContentTemplate" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=UnpinButtonContentTemplate}" />
			</Trigger>
			<Trigger Property="LayoutKind" Value="Preview">
				<Setter TargetName="ToggleLayoutKindButton" Property="ContentTemplate" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PromoteButtonContentTemplate}" />
				<Setter TargetName="ToggleLayoutKindButton" Property="ToolTip" Value="{productsDocking:SRExtension UIAdvancedTabItemKeepOpenButtonToolTip}" />
			</Trigger>
			<Trigger Property="HighlightKind" Value="Preview">
				<Setter TargetName="TabChrome" Property="UntintedBackground" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundPreview, Mode=TwoWay}" />
                            <Setter TargetName="TabChrome" Property="UntintedBorderBrush" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderBrushPreview, Mode=TwoWay}" />
                            <Setter TargetName="ContentPresenter" Property="TextElement.Foreground" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ForegroundPreview, Mode=TwoWay}" />
			</Trigger>
			<Trigger Property="HighlightKind" Value="PointerOver">
                            <Setter TargetName="TabChrome" Property="UntintedBackground" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundPointerOver, Mode=TwoWay}" />
                            <Setter TargetName="TabChrome" Property="UntintedBorderBrush" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderBrushPointerOver, Mode=TwoWay}" />
                            <Setter TargetName="ContentPresenter" Property="TextElement.Foreground" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ForegroundPointerOver, Mode=TwoWay}" />
			</Trigger>

 

 What am I missing here?

Thanks in advance.

[Modified 18 days ago]

Information The latest build of this product (2018.1 build 0672) was released 27 days ago, which was before this thread was created.

Comments (3)

Posted 18 days ago by Actipro Software Support - Cleveland, OH, USA

Hello,

Before we dig more into styles, if you are just wanting to update colors, might I suggest something else that would be far easier?  Simply override our brush resources like this in your Application.Resources:

<SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.ToolWindowContainerTabItemBackgroundSelectedBrushKey}" themes:TintGroup.Name="ToolWindowContainerTabItem" Color="Red" />
...
<SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.TabbedMdiContainerTabItemBackgroundActiveSelectedBrushKey}" themes:TintGroup.Name="TabbedMdiContainerTabItem" Color="Green" />

That would save you the headache of having to work with Styles at all.


Actipro Software Support
Posted 17 days ago by Jun Pacomios

That is an option, but we would really like to use our own resource keys for the colors and, at some point, I will need to customize the default control templates anyway.

I was able to make it work. In the following Styles, I removed the explicitly defined 

Style="{TemplateBinding TabControlStyle}"

 

in the the container tab control (PART_TabControl).

 styles

    <!-- docking:ToolWindowContainer -->
    <Style x:Key="{x:Type docking:ToolWindowContainer}" TargetType="docking:ToolWindowContainer">

 

    <!-- docking:TabbedMdiContainer -->
    <Style x:Key="{x:Type docking:TabbedMdiContainer}" TargetType="docking:TabbedMdiContainer">

 Now, my "dockingPrimitives:ToolWindowContainerTabControl" and "dockingPrimitives:TabbedMdiContainerTabControl" are already taking effect. Nothing seems to break but I was wondering if you guys have better apporach than this.

[Modified 17 days ago]

Posted 17 days ago by Actipro Software Support - Cleveland, OH, USA

Hi Jun,

In that case then yes, then my suggestion would probably be to just do something like this in your Application.Resources:

<Style TargetType="docking:TabbedMdiHost">
	<Setter Property="TabControlStyle">
		<Setter.Value>
			<Style TargetType="docking:TabbedMdiContainerTabControl">
				<Setter Property="TabCornerRadius" Value="5,5,0,0" />
			</Style>
		</Setter.Value>
	</Setter>
</Style>

<Style TargetType="docking:ToolWindowContainer">
	<Setter Property="TabControlStyle">
		<Setter.Value>
			<Style TargetType="docking:ToolWindowContainerTabControl">
				<Setter Property="TabCornerRadius" Value="5,5,0,0" />
			</Style>
		</Setter.Value>
	</Setter>
</Style>

Just full out the Setters as appropriate and you should be good.  The example above puts rounded tab corners on each tab in tabbed MDI and for tool windows.


Actipro Software Support

Add a Comment

Please log in to a validated account to post comments.