Themed Container

1 Answer 67 Views
General Discussions OutlookBar
Marcello
Top achievements
Rank 1
Iron
Marcello asked on 12 Jan 2023, 05:34 AM | edited on 12 Jan 2023, 05:35 AM
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.

1 Answer, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 13 Jan 2023, 11:21 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Marcello
Top achievements
Rank 1
Iron
commented on 13 Jan 2023, 11:42 AM

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
Telerik team
commented on 18 Jan 2023, 10:20 AM

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
Top achievements
Rank 1
Iron
commented on 20 Jan 2023, 06:00 AM

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
Telerik team
commented on 24 Jan 2023, 11:11 AM

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.
Tags
General Discussions OutlookBar
Asked by
Marcello
Top achievements
Rank 1
Iron
Answers by
Martin Ivanov
Telerik team
Share this question
or