Themed Container

[Marcello]

Hello,

I'm trying to replicate two old (and glorious) Janus controls.
They are the ExplorerBar and the ButtonBar (I am attaching two images taken from an Office Blue theme).
They are not technically difficult but it is tedious to properly maintain each theme.

The former can be treated as a panel of Expanders, background and margins of this panel should depend on the theme. Something similar can be achieved from RadDocking (but the panels should be collapsible)

The second is trivial yet I can't find any container that automatically applies the selected theme, if not a vertical radToolbar but it doesn't seem like an optimal solution to me...

Ideas? Tips?
Thank you.

[Martin Ivanov]

Hello Marcello,

The UI in the first picture seems like it can be created with a RadListBox hosted in a HeaderContentControl. For example:

<HeaderedContentControl>
	<HeaderedContentControl.Header>
		<Border Height="25" Background="LightCyan" BorderBrush="LightBlue" BorderThickness="1 1 1 0">
			<TextBlock Text="Relations" TextAlignment="Center" VerticalAlignment="Center"/>
		</Border>
	</HeaderedContentControl.Header>
	<HeaderedContentControl.Content>
		<telerik:RadListBox>
			<telerik:RadListBoxItem Content="Alarms History"/>
			<telerik:RadListBoxItem Content="Alarms Monitor"/>
			<telerik:RadListBoxItem Content="..."/>
		</telerik:RadListBox>
	</HeaderedContentControl.Content>
</HeaderedContentControl>

To second visualization can be created with a RadListBox (or any ItemsControl of your choice) hosted in RadExpander. The expander can be hosted in the ItemTemplate of a an ItemsControl. For example:

<ItemsControl ItemsSource="{Binding Items}">
	<ItemsControl.ItemTemplate>
		<DataTemplate>
			<telerik:RadExpander Header="{Binding Heasder}" IsExpanded="{Binding IsExpanded, Mode=TwoWay}">
				<telerik:RadListBox ItemsSource="{Binding MenuItems}" DisplayMemberPath="MenuName"/>
			</telerik:RadExpander>
		</DataTemplate>
	</ItemsControl.ItemTemplate>           
</ItemsControl>

You can also take a look at the RadPanelBar control.

I hope these ideas work.

Regards,
Martin Ivanov
Progress Telerik

[Marcello]

Hi Martin,

thanks for your answer. My question isn't about how to render these controls in xaml, but how to render it in a way automatically compatible with each telerik theme, your code

Background="LightCyan" BorderBrush="LightBlue"

Is not wath i'm looking for.

The first control, in example, can be rendered as a RadDocking pane with an empty RadDocument and some Pane docked top.
In this way I can obtain my ExplorerBar that looks good (with proper background, proper margins...) in any Telerik Theme. But, as I see, RadPane can't support auto height, and this is a problem.

I'm now triyng to implement a ButtonBar from a RadNavigationView or a vertical RadToolbar...

I don't want to menage each style, that's would be the Telerik works :-)

 

[Martin Ivanov]

Indeed, the RadPane doesn't have an expand and collapse or a proper auto-sizing behavior. In your case, I think that the Telerik control, that would be most suitable for this case is RadPanelBar. This will bring the expander-like panels and the style of the items will be changed according to the applied Telerik theme. I have attached a small sample project showing this idea. I hope it helps.

[Marcello]

Dear Martin,

thanks for your project. Not bad from a functional point of view but not very in line with the layout of the Explorer Bar and the Button Bar in question.
It's really curious that the Telerik suite doesn't contain these so historically widespread controls...
Do you think that if I made a request for new features it could be taken into consideration (in this decade)?

[Martin Ivanov]

The required controls have alternatives with similar looks and feel, which is probably there wasn't much demand of these exact components. Anyway, if you believe that the suggested Telerik controls are not covering the scenarios where the ExplorerBar and ButtonBar are used, feel free to log feature requests in the feedback portal. If the features get enough demand, they will get planned and implemented.