Change Color OutlookBar

[ITA]

Hi,

i use a RadOutlookBar like this:

<telerik:RadOutlookBar x:Name="outlookBar" Width="230" MaxWidth="500" Grid.Column="0" IsMinimized="False" IsMinimizable="True" IsVerticalResizerVisible="True" HorizontalAlignment="Stretch" telerik:StyleManager.Theme="Windows8"  MinimizedButtonContent="Adressen-Cockpit">

I use a theme "Windows8" and i want to change to parts of the RadOutlookbar (The blue header and the grey part of the footer). Please take a look at the attached file!

Thanks a lot
Best Regards
Rene

[Milena]

Hello Rene,

One of the possible approaches to achieve this is to change the Brushes in Windows8Palette, which are used for the Header and the selected item: 

public MainWindow()

{

    Windows8Palette.Palette.AccentColor = (Color)ColorConverter.ConvertFromString("#006400");

    Windows8Palette.Palette.BasicColor = (Color)ColorConverter.ConvertFromString("#8FBC8F");



    InitializeComponent();

}

The AccentColor  is used for the Header and the BasicColor  for the selected item. Please have in mind that if you use this approach and change the colors of the brushes, this will affect all components that are using these brushes - in the Ourlookbar or in other controls from our suite. For instance in the RadOutlookBar the BasicColor is used also for the BorderBrush of the control (see the attached picture).

So, if this solution doesn't work for you, you can retemplate the RadOutlookBar and change the Background's brush for the components that you want.

I hope this information will help you and don't hesitate to write back if you have more questions.

Regards,
Milena
Telerik

 

 

[Pamelard]

Hi All,

I would like to change the header color too. I didn't find what template and background value to change.
Can you help me?

Many thanks for replies.

[Pamelard]

Ok. I found for the header with the "Accent Color".

<Border Margin="-1 -1 -1 0" Background="{telerik1:Windows8Resource ResourceKey=AccentBrush}" Visibility="{TemplateBinding HeaderVisibility}" DockPanel.Dock="Top">

Into

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="telerikNavigation:RadOutlookBar">

Nevertheless, I didn't find for the left header when minimized.

[Milena]

Hi Pamelard,

When the OutlookBar is minimized the Header is in a DropDownButton, its name in the ControlTemplate  is MinimizedContentElement: 

<ControlTemplate TargetType="telerikNavigation:RadOutlookBar">
 ...
<Grid>
    <ContentPresenter x:Name="ContentElement"
        Margin="{TemplateBinding Padding}"
        Content="{TemplateBinding SelectedContent}"
        ContentTemplate="{TemplateBinding SelectedContentTemplate}"
        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
        ContentTemplateSelector="{TemplateBinding SelectedContentTemplateSelector}"/>
    <telerik1:RadDropDownButton x:Name="MinimizedContentElement"
        DropDownIndicatorVisibility="Collapsed"
        Style="{StaticResource MinimizedContentButtonStyle}"
        Content="{TemplateBinding MinimizedButtonContent}"
        ContentTemplate="{TemplateBinding MinimizedButtonContentTemplate}"
        Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsMinimized, Converter={StaticResource BooleanToVisibilityConverter}}"
        DropDownPlacement="Right"
        Padding="4 0 0 0"
        Margin="-1 -1 -1 0">
        ...
</ControlTemplate>

You can edit the ControlTemplate and set Background to the DropDownButton.

I hope this information is helpful and don't hesitate to write back in case any further assistance is needed.

Regards,
Milena
Telerik

 

 

[Pamelard]

It works like a charm. Thanks!