Modify a ContentControl for a userControl inside a PanelBarItem

[François]

Greeting,

I am currently working on an interface which resembles Visual Studio. We use a lot of Panes and in one of them we added a PanelBar with PanelBarItems in it.   In each PanelBarItem, we use a different UserControl where we add label and NumericUpDown. Everything works great as expected but during runtime, the ContentControl adds a big margin.  Our GUI will be heavy in term of controls and we need to reduce this margin to make more space for them.  I tried following the instructions online to modify the styling of the PanelBarItem but to no avail.  While some modifications affect the end result, I cannot change the margin of the ControlContent.

Here is the code in the pane :

<telerik:RadPanelBar Margin="0" VerticalAlignment="Top">
            <telerik:RadPanelBarItem Header="Integration Mesure" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Style="{DynamicResource myWay}">
                <Grid HorizontalAlignment="Left" VerticalAlignment="Top">
                    <hop:hopIntegration Margin="0"/>
                </Grid>
 </telerik:RadPanelBarItem>

 

And here is the code for the styling.

 

001.<Style x:Key="myWay" TargetType="{x:Type telerik:RadPanelBarItem}">
002.                <Setter Property="MaterialControls:MaterialAssist.MouseOverBrush" Value="{telerik:MaterialResource ResourceKey={x:Static telerik:MaterialResourceKey.AlternativeBrush}}"/>
003.                <Setter Property="MaterialControls:MaterialAssist.PressedBrush" Value="{telerik:MaterialResource ResourceKey={x:Static telerik:MaterialResourceKey.ComplementaryBrush}}"/>
004.                <Setter Property="MaterialControls:MaterialAssist.CheckedBrush" Value="{telerik:MaterialResource ResourceKey={x:Static telerik:MaterialResourceKey.DividerBrush}}"/>
005.                <Setter Property="MaterialControls:MaterialAssist.ShadowDepth" Value="Depth1"/>
006.                <Setter Property="TextOptions.TextRenderingMode" Value="ClearType"/>
007.                <Setter Property="ExpanderStyle">
008.                    <Setter.Value>
009.                        <Style TargetType="{x:Type TextBlock}">
010.                            <Setter Property="telerik:GlyphAdorner.ShowGlyphInDesignTime" Value="True"/>
011.                            <Setter Property="Grid.Column" Value="5"/>
012.                            <Setter Property="Margin" Value="16,0"/>
013.                            <Setter Property="HorizontalAlignment" Value="Right"/>
014.                            <Setter Property="VerticalAlignment" Value="Center"/>
015.                            <Setter Property="Foreground" Value="{telerik:MaterialResource ResourceKey={x:Static telerik:MaterialResourceKey.MarkerBrush}}"/>
016.                            <Setter Property="Opacity" Value="{telerik:MaterialResource ResourceKey={x:Static telerik:MaterialResourceKey.PrimaryOpacity}}"/>
017.                            <Setter Property="Text" Value=""/>
018.                            <Setter Property="FontFamily" Value="/Telerik.Windows.Controls;component/Themes/Fonts/TelerikWebUI.ttf#TelerikWebUI"/>
019.                            <Setter Property="FontSize" Value="16"/>
020.                            <Setter Property="Opacity" Value="{telerik:MaterialResource ResourceKey={x:Static telerik:MaterialResourceKey.PrimaryOpacity}}"/>
021.                            <Setter Property="FontStyle" Value="Normal"/>
022.                            <Setter Property="FontWeight" Value="Normal"/>
023.                        </Style>
024.                    </Setter.Value>
025.                </Setter>
026.                <Setter Property="Template">
027.                    <Setter.Value>
028.                        <ControlTemplate TargetType="{x:Type telerik:RadPanelBarItem}">
029.                            <Grid x:Name="RootElement">
030.                                <Grid.RowDefinitions>
031.                                    <RowDefinition Height="Auto"/>
032.                                    <RowDefinition Height="*"/>
033.                                </Grid.RowDefinitions>
034.                                <Grid x:Name="HeaderRow" Background="Transparent" Margin="0" MinHeight="{TemplateBinding MinHeight}">
035.                                    <Border x:Name="BorderVisual" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{Binding Background, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type telerik:RadPanelBar}}}" Grid.RowSpan="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
036.                                    <MaterialControls:MaterialControl IsSmartClipped="True">
037.                                        <ContentControl x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Foreground="{Binding Foreground, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
038.                                    </MaterialControls:MaterialControl>
039.                                </Grid>
040.                                <Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
041.                                    <ItemsPresenter/>
042.                                </Grid>
043.                            </Grid>
044.                            <ControlTemplate.Triggers>
045.                                <Trigger Property="IsExpanded" Value="True">
046.                                    <Setter Property="Visibility" TargetName="ItemsContainer" Value="Visible"/>
047.                                </Trigger>
048.                                <Trigger Property="IsEnabled" Value="False">
049.                                    <Setter Property="Opacity" TargetName="Header" Value="{telerik:MaterialResource ResourceKey={x:Static telerik:MaterialResourceKey.DisabledOpacity}}"/>
050.                                </Trigger>
051.                                <Trigger Property="IsSelected" Value="True">
052.                                    <Setter Property="Foreground" TargetName="Header" Value="{telerik:MaterialResource ResourceKey={x:Static telerik:MaterialResourceKey.PrimaryNormalBrush}}"/>
053.                                </Trigger>
054.                            </ControlTemplate.Triggers>
055.                        </ControlTemplate>
056.                    </Setter.Value>
057.                </Setter>
058.                <Setter Property="Background" Value="{telerik:MaterialResource ResourceKey={x:Static telerik:MaterialResourceKey.MainBrush}}"/>
059.                <Setter Property="BorderBrush" Value="Transparent"/>
060.                <Setter Property="BorderThickness" Value="0"/>
061.                <Setter Property="Padding" Value="16,16,16,15"/>
062.                <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
063.                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
064.                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
065.                <Setter Property="ChildItemsTemplate">
066.                    <Setter.Value>
067.                        <ControlTemplate TargetType="{x:Type telerik:RadPanelBarItem}">
068.                            <Grid x:Name="RootElement">
069.                                <Grid.RowDefinitions>
070.                                    <RowDefinition Height="Auto"/>
071.                                    <RowDefinition Height="*"/>
072.                                </Grid.RowDefinitions>
073.                                <Grid x:Name="HeaderRow" Background="Transparent" Margin="0" MinHeight="{TemplateBinding MinHeight}">
074.                                    <Border x:Name="BorderVisual" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{Binding Background, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type telerik:RadPanelBar}}}" Grid.RowSpan="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
075.                                    <MaterialControls:MaterialControl IsSmartClipped="True">
076.                                        <ContentControl x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Foreground="{Binding Foreground, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
077.                                    </MaterialControls:MaterialControl>
078.                                </Grid>
079.                                <Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
080.                                    <ItemsPresenter/>
081.                                </Grid>
082.                            </Grid>
083.                            <ControlTemplate.Triggers>
084.                                <Trigger Property="IsExpanded" Value="True">
085.                                    <Setter Property="Visibility" TargetName="ItemsContainer" Value="Visible"/>
086.                                </Trigger>
087.                                <Trigger Property="IsEnabled" Value="False">
088.                                    <Setter Property="Opacity" TargetName="Header" Value="{telerik:MaterialResource ResourceKey={x:Static telerik:MaterialResourceKey.DisabledOpacity}}"/>
089.                                </Trigger>
090.                                <Trigger Property="IsSelected" Value="True">
091.                                    <Setter Property="Foreground" TargetName="Header" Value="{telerik:MaterialResource ResourceKey={x:Static telerik:MaterialResourceKey.PrimaryNormalBrush}}"/>
092.                                </Trigger>
093.                            </ControlTemplate.Triggers>
094.                        </ControlTemplate>
095.                    </Setter.Value>
096.                </Setter>
097.                <Setter Property="KeyboardNavigation.TabNavigation" Value="Local"/>
098.                <Setter Property="SnapsToDevicePixels" Value="True"/>
099.                <Setter Property="ItemsPanel">
100.                    <Setter.Value>
101.                        <ItemsPanelTemplate>
102.                            <telerik:PanelBarPanel IsItemsHost="True"/>
103.                        </ItemsPanelTemplate>
104.                    </Setter.Value>
105.                </Setter>
106.                <Style.Triggers>
107.                    <Trigger Property="Level" Value="1">
108.                        <Setter Property="Template">
109.                            <Setter.Value>
110.                                <ControlTemplate TargetType="{x:Type telerik:RadPanelBarItem}">
111.                                    <Grid x:Name="RootElement">
112.                                        <Grid.RowDefinitions>
113.                                            <RowDefinition Height="Auto"/>
114.                                            <RowDefinition Height="*"/>
115.                                        </Grid.RowDefinitions>
116.                                        <MaterialControls:Shadow Background="{TemplateBinding Background}" Grid.RowSpan="2" ShadowDepth="{TemplateBinding MaterialControls:MaterialAssist.ShadowDepth}"/>
117.                                        <Border x:Name="BorderVisual" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.RowSpan="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
118.                                        <MaterialControls:MaterialControl x:Name="Ripple" IsSmartClipped="True">
119.                                            <Grid x:Name="HeaderRow" Background="#01FFFFFF" UseLayoutRounding="True">
120.                                                <Grid.ColumnDefinitions>
121.                                                    <ColumnDefinition Width="Auto"/>
122.                                                    <ColumnDefinition Width="Auto"/>
123.                                                    <ColumnDefinition Width="Auto"/>
124.                                                    <ColumnDefinition Width="*"/>
125.                                                    <ColumnDefinition Width="Auto"/>
126.                                                </Grid.ColumnDefinitions>
127.                                                <TextBlock x:Name="arrow" Style="{TemplateBinding ExpanderStyle}"/>
128.                                                <ContentControl x:Name="Header" Grid.ColumnSpan="4" ContentTemplate="{TemplateBinding HeaderTemplate}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" Foreground="{Binding Foreground, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
129.                                            </Grid>
130.                                        </MaterialControls:MaterialControl>
131.                                        <Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
132.                                            <telerik:LayoutTransformControl x:Name="transformationRoot" IsTabStop="False">
133.                                                <ItemsPresenter/>
134.                                            </telerik:LayoutTransformControl>
135.                                        </Grid>
136.                                    </Grid>
137.                                    <ControlTemplate.Triggers>
138.                                        <Trigger Property="IsExpanded" Value="True">
139.                                            <Setter Property="Text" TargetName="arrow" Value=""/>
140.                                            <Setter Property="Foreground" TargetName="Header" Value="{telerik:MaterialResource ResourceKey={x:Static telerik:MaterialResourceKey.PrimaryNormalBrush}}"/>
141.                                            <Setter Property="Visibility" TargetName="ItemsContainer" Value="Visible"/>
142.                                            <Setter Property="Margin" Value="0,8"/>
143.                                        </Trigger>
144.                                        <Trigger Property="IsEnabled" Value="False">
145.                                            <Setter Property="Opacity" TargetName="Header" Value="{telerik:MaterialResource ResourceKey={x:Static telerik:MaterialResourceKey.DisabledOpacity}}"/>
146.                                            <Setter Property="Opacity" TargetName="arrow" Value="{telerik:MaterialResource ResourceKey={x:Static telerik:MaterialResourceKey.DisabledOpacity}}"/>
147.                                        </Trigger>
148.                                        <Trigger Property="IsSelected" Value="True">
149.                                            <Setter Property="Foreground" TargetName="Header" Value="{telerik:MaterialResource ResourceKey={x:Static telerik:MaterialResourceKey.PrimaryPressedBrush}}"/>
150.                                        </Trigger>
151.                                        <Trigger Property="IsMouseOver" SourceName="Ripple" Value="True">
152.                                            <Setter Property="MaterialControls:MaterialAssist.ShadowDepth" Value="Depth2"/>
153.                                        </Trigger>
154.                                    </ControlTemplate.Triggers>
155.                                </ControlTemplate>
156.                            </Setter.Value>
157.                        </Setter>
158.                    </Trigger>
159.                </Style.Triggers>
160.
     </Style>

 

I changed the margin at line 37 and line 76 for zero but it seems that they are overwritten by something else.  I added in attachment an image showing the Visual tree during runtime and where the margin is added.  I am fairly new to styling but any help would be greatly appreciated.

Thank you

[Martin]

Hello,

Please try the following solution - remove the x:Key of your custom style so it would become implicit and apply to the children items of the RadPanelBarItem as well and also remove the Style setter for the parent RadPanelBarItem so it would get the style implicitly as well. After that, since you have removed the margin of the Header ContentControl in the child item template it should work as expected. I hope that solves your issue and if you have any additional queries, please do not hesitate to contact us further.

Regards,
Martin
Progress Telerik

[François]

Thank you! It worked exactly as I wanted and your guide was spot on.  Still curious tho on why the default style would over-right part of my custom style.

Regards,

François

[Martin]

Hi,

The RadPanelBar generates an item for the content of an RadPanelBarItem - i.e. it wraps your UserControl in a RadPanelBarItem and applies the default style for it. The ChildItemsTemplate property is used in the Silverlight variation of our controls. By design in WPF it is intended to use triggers on the Level property to change lower level items' templates. The auto-generated nested item does not inherit any style from the parent item currently in WPF so that is why the style was not applied.

We will take this in consideration and see what we could do about this property and its behavior.

Regards,
Martin
Progress Telerik

[François]

Thank you for your answer, it's really interesting to see how things work behind the controls.  Telerik's approach makes sense but it does bring some annoyances.

Regards,

François

[Martin]

Hi,

I am glad that this clarified things for you and sorry for any inconvenience caused. If there is anything else I can be helpful with, it would be a pleasure.

Regards,
Martin
Progress Telerik