Change Color OutlookBar

6 posts, 0 answers
  1. ITA
    ITA avatar
    383 posts
    Member since:
    Aug 2009

    Posted 20 Oct 2014 Link to this post

    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
  2. Milena
    Admin
    Milena avatar
    203 posts

    Posted 23 Oct 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Pamelard
    Pamelard avatar
    3 posts
    Member since:
    Jul 2013

    Posted 01 Apr 2015 in reply to Milena Link to this post

    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.
  5. Pamelard
    Pamelard avatar
    3 posts
    Member since:
    Jul 2013

    Posted 01 Apr 2015 in reply to Pamelard Link to this post

    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.

  6. Milena
    Admin
    Milena avatar
    203 posts

    Posted 02 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  7. Pamelard
    Pamelard avatar
    3 posts
    Member since:
    Jul 2013

    Posted 02 Apr 2015 in reply to Milena Link to this post

    It works like a charm. Thanks!
Back to Top
UI for WPF is Visual Studio 2017 Ready