Not able maximized outlookbar items always load as minimized

[Ripal Vyas]

Hi,

I have outlook bar controls in left panel and adding 5 items at run time in outlook bar using prism architecture. I want to show all items in maximized by default (on load). Also I have modified outlook bar style as below. I have tried ActiveItemMaxCount property but its not working for me. Please find the attached files for more details.

<!--
*******************************
OUTLOOKBAR
******************************* 
   -->
        <!-- Control default Style -->
        <SolidColorBrush x:Key="ControlOuterBorder_Disabled" Color="#FF989898" />
        <SolidColorBrush x:Key="ControlInnerBorder_Disabled" Color="Transparent" />
        <SolidColorBrush x:Key="ControlBackground_Disabled" Color="#FFE0E0E0" />
        <SolidColorBrush x:Key="ControlElement_Disabled" Color="#FF8D8D8D" />
        <SolidColorBrush x:Key="ControlOuterBorder_MouseOver" Color="#FFFFC92B" />
        <SolidColorBrush x:Key="ControlInnerBorder_MouseOver" Color="#FFFFFFFF" />
        <LinearGradientBrush x:Key="ControlBackground_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFFBDA" Offset="0" />
            <GradientStop Color="#FFFEEBAE" Offset="0.50" />
            <GradientStop Color="#FFFFD25A" Offset="0.50" />
            <GradientStop Color="#FFFFFBA3" Offset="1" />
        </LinearGradientBrush>
        <SolidColorBrush x:Key="ControlElement_Normal" Color="#FF000000" />
        <SolidColorBrush x:Key="ControlElement_MouseOver" Color="#FF000000" />
        <LinearGradientBrush x:Key="ControlOuterBorder_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF282828" />
            <GradientStop Color="#FF5F5F5F" Offset="1" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ControlInnerBorder_Pressed" 
                             EndPoint="0.5,1"
                             StartPoint="0.5,0">
            <GradientStop Color="#FFB69A78" />
            <GradientStop Color="#FFFFE17A"
                          Offset="0.126" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ControlBackground_Pressed"
                             EndPoint="0.5,1"
                             StartPoint="0.5,0">
            <GradientStop Color="#FFFFDCAB"
                          Offset="0" />
            <GradientStop Color="#FFFFD18F"
                          Offset="0.5" />
            <GradientStop Color="#FFFE9227"
                          Offset="0.5" />
            <GradientStop Color="#FFFFBA74"
                          Offset="0" />
        </LinearGradientBrush>
        <SolidColorBrush x:Key="ControlElement_Pressed"
                         Color="#FF000000" />

        <SolidColorBrush x:Key="ControlForeground_Normal" Color="#FF000000" />
        <SolidColorBrush x:Key="ControlItem_InnerBorder_Normal" Color="#FFFFFFFF" />
        <SolidColorBrush x:Key="ControlItem_OuterBorder_MouseOver" Color="#FFFFC92B" />
        <SolidColorBrush x:Key="ControlItem_InnerBorder_MouseOver" Color="#FFFFFFFF" />
        <SolidColorBrush x:Key="ControlInnerBorder_Checked" Color="#FFFFFFFF" />
        <LinearGradientBrush x:Key="ControlItem_Background_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFFBA3" Offset="1" />
            <GradientStop Color="#FFFFFBDA" Offset="0" />
            <GradientStop Color="#FFFFD25A" Offset="0.43" />
            <GradientStop Color="#FFFEEBAE" Offset="0.42" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ControlItem_OuterBorder_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF282828" />
            <GradientStop Color="#FF5F5F5F" Offset="1" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ControlItem_InnerBorder_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFB69A78" />
            <GradientStop Color="#FFFFE17A" Offset="0.126" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ControlItem_Background_Selected" EndPoint="0.5,1"
StartPoint="0.5,0">
            <GradientStop Color="#FFFFD74E" Offset="0.996" />
            <GradientStop Color="#FFFFDCAB" Offset="0.17" />
            <GradientStop Color="#FFFFB062" Offset="0.57" />
            <GradientStop Color="#FFFFD18F" Offset="0.56" />
            <GradientStop Color="#FFFFBA74" />
        </LinearGradientBrush>
        <SolidColorBrush x:Key="OutlookBar_HeaderInnerBorder" Color="#FFFFFF" />
        <SolidColorBrush x:Key="OutlookBar_HeaderOuterBorder" Color="#9098a3" />
        <LinearGradientBrush x:Key="OutlookBar_HeaderBackground" StartPoint="0 0" EndPoint="0 1" >
            <GradientStop Offset="0" Color="Yellow" />
            <GradientStop Offset="1" Color="Green" />
        </LinearGradientBrush>
        <telerikc:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
        <SolidColorBrush x:Key="OutlookBar_Footer_OuterItemBorderBrush" Color="#9098a3" />
        <SolidColorBrush x:Key="OutlookBar_Footer_InnerItemBorderBrush" Color="#fefefe" />
        <outlookBarPrimitives:ResizerAlignmentToHorizontalAlignmentConverter x:Key="AlignmentConverter" />
        <SolidColorBrush x:Key="ControlOuterBorder" Color="#FF848484" />
        <SolidColorBrush x:Key="ControlBackground" Color="#FFFFFFFF" />
        <SolidColorBrush x:Key="ControlOuterBorder_Checked" Color="#FFFFC92B" />
        <LinearGradientBrush x:Key="ControlBackground_Checked" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFDCAB" Offset="0" />
            <GradientStop Color="#FFFFD18F" Offset="0.5" />
            <GradientStop Color="#FFFE9227" Offset="0.5" />
            <GradientStop Color="#FFFFD74E" Offset="1" />
        </LinearGradientBrush>

        <CornerRadius x:Key="Header_CornerRadius">4 4 0 0</CornerRadius>
        <Thickness x:Key="OutlookBar_HeaderInnerBorder_Thickness">0</Thickness>
        <CornerRadius x:Key="Splitter_CornerRadius">0 0 4 4</CornerRadius>
        <CornerRadius x:Key="Outlookbar_CornerRadius">4</CornerRadius>

        <!-- MinimizeButtonStyle Style -->
        <Style TargetType="telerikc:RadToggleButton" x:Key="MinimizeButtonStyle">
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Foreground" Value="{Binding Path=CurrentTheme.HomerThemeFontBrush, Source={StaticResource ThemeWrapper}}"  />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Padding" Value="3" />
            <Setter Property="CornerRadius" Value="0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerikc:RadToggleButton">
                        <Grid>

                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="BorderBrush" Duration="0:0:0">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlOuterBorder_MouseOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background" Duration="0:0:0">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlBackground_MouseOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder"
Storyboard.TargetProperty="BorderBrush" Duration="0:0:0">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlInnerBorder_MouseOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow" Storyboard.TargetProperty="Fill" Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_MouseOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow1" Storyboard.TargetProperty="Fill" Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_MouseOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="BorderBrush" Duration="0:0:0">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlOuterBorder_Pressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background" Duration="0:0:0">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlBackground_Pressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder"
Storyboard.TargetProperty="BorderBrush" Duration="0:0:0">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlInnerBorder_Pressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow" Storyboard.TargetProperty="Fill" Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Pressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow1" Storyboard.TargetProperty="Fill" Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Pressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow" Storyboard.TargetProperty="Fill" Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Disabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow1" Storyboard.TargetProperty="Fill" Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Disabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CheckStates">
                                    <VisualState x:Name="Checked">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="directionRotation"
Storyboard.TargetProperty="Angle" To="-180" Duration="0" />
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow" Storyboard.TargetProperty="Fill" Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Pressed}" />
                                            </ObjectAnimationUsingKeyFrames>

                                            <DoubleAnimation Storyboard.TargetName="arrow1"
Storyboard.TargetProperty="X1" To="3" Duration="0" />
                                            <DoubleAnimation Storyboard.TargetName="arrow1"
Storyboard.TargetProperty="X2" To="3" Duration="0" />
                                            <DoubleAnimation Storyboard.TargetName="arrow1"
Storyboard.TargetProperty="Y1" To="4" Duration="0" />

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow1" Storyboard.TargetProperty="Fill" Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Pressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unchecked" />
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused" />
                                    <VisualState x:Name="Unfocused" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <Border x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}" 
                                CornerRadius="1" >
                                <Border x:Name="InnerBorder" BorderBrush="Transparent"
                                    CornerRadius="0"
                                    BorderThickness="{TemplateBinding BorderThickness}" />
                            </Border>

                            <!-- checked -->
                            <Border x:Name="CheckedVisual" Opacity="0"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{StaticResource ControlOuterBorder_Checked}"
Background="{StaticResource ControlBackground_Checked}" 
                                CornerRadius="1" >
                                <Border BorderBrush="{StaticResource ControlInnerBorder_Checked}"
                                    CornerRadius="0"
                                    BorderThickness="{TemplateBinding BorderThickness}" />
                            </Border>

                            <Polygon x:Name="arrow" 
                                     Points="8,0 0,5, 8,10" 
                                     Stroke="{Binding Path=CurrentTheme.HomerSeparatorBackground, Source={StaticResource ThemeWrapper}}" 
                                     Fill="{Binding Path=CurrentTheme.HomerSeparatorBackground, Source={StaticResource ThemeWrapper}}" 
                                     RenderTransformOrigin="0.5,0.5" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
                                <Polygon.RenderTransform>
                                    <RotateTransform x:Name="directionRotation" />
                                </Polygon.RenderTransform>
                            </Polygon>
                            <Line x:Name="arrow1" Stroke="{Binding Path=CurrentTheme.HomerSeparatorBackground, Source={StaticResource ThemeWrapper}}" StrokeThickness="1" X1="16" X2="16" Y1="3" Y2="15" >
                            </Line>
                        </Grid>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!--Template for the item minimized-->
        <DataTemplate x:Key="OutlookBarItemMinimizedTemplate">
            <Image Source="{Binding Icon}"
                   Height="24"
                   Width="24" ToolTipService.ToolTip="{Binding Title}" />
        </DataTemplate>

        <!-- RadOutlookBar Style -->
        <Style x:Key="RadOutlookBarStyle"  TargetType="telerikc:RadOutlookBar" >
            <Setter Property="TitleTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding Icon}" 
                                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                   ToolTipService.ToolTip="{Binding Title}" 
                                   Stretch="None" />
                            <TextBlock Text="{Binding Title}" Padding="5 0 0 0" 
                                       VerticalAlignment="Center" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"                                        
                                       Style="{StaticResource HomerHeaderTextBlockStyle}" />
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <ContentPresenter Content="{Binding ControlContent}" ScrollViewer.VerticalScrollBarVisibility="Auto" MaxHeight="800"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerikc:RadOutlookBar">
                        <Grid x:Name="LayoutRoot">

                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="DropDownDisplayStates">
                                    <VisualState x:Name="DropDownButtonVisible" />
                                    <VisualState x:Name="DropDownButtonCollapsed" />
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="MinimizedModeStates">
                                    <VisualState x:Name="Restored">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0"
                                                Storyboard.TargetName="ContentElement"
                                                Storyboard.TargetProperty="(UIElement.Opacity)" From="0" To="1" />
                                            <DoubleAnimation Duration="0"
                                                Storyboard.TargetName="TitleElement"
                                                Storyboard.TargetProperty="(UIElement.Opacity)" From="0" To="1" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Minimized">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0"
                                                Storyboard.TargetName="TitleElement"
                                                Storyboard.TargetProperty="(UIElement.Opacity)" From="1" To="0" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" 
                                    x:Name="RootElement">

                                <telerikc:RadDockPanel>
                                    <!-- Title -->
                                    <Border CornerRadius="{StaticResource Header_CornerRadius}"
                                            Background="{Binding Path=CurrentTheme.OutlookBackground, Source={StaticResource ThemeWrapper}}"
telerikc:RadDockPanel.Dock="Top"                                            
                                            Visibility="{TemplateBinding HeaderVisibility}"
                                            Height="48">
                                        <Border BorderThickness="{StaticResource OutlookBar_HeaderInnerBorder_Thickness}"
                                                BorderBrush="{StaticResource OutlookBar_HeaderInnerBorder}">
                                            <Grid>
                                                <ContentControl x:Name="TitleElement"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Margin="5 3 5 3"
IsTabStop="False"
                                                        ContentTemplate="{TemplateBinding TitleTemplate}" />
                                                <telerikc:RadToggleButton x:Name="MinimizeButton" Margin="0 0 3 0"
                                                            HorizontalAlignment="Right" Width="19" Height="19"
                                                            VerticalAlignment="Center"  
                                                            Style="{TemplateBinding MinimizeButtonStyle}"
                                                            IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsMinimized, Mode=TwoWay}"
                                                            Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsMinimizable, Converter={StaticResource BooleanToVisibilityConverter}}" />
                                            </Grid>
                                        </Border>
                                    </Border>

                                    <!-- Footer -->
                                    <Border Visibility="{TemplateBinding MinimizedAreaVisibility}" 
                                            telerikc:RadDockPanel.Dock="Bottom" 
                                            MinHeight="{TemplateBinding MinimizedAreaMinHeight}"
                                            Margin="0 7 0 0">
                                        <Border Margin="2">
                                            <telerikc:RadDockPanel  HorizontalAlignment="Right">
                                                <ToggleButton x:Name="DropDownButtonElement" 
                                                              MinWidth="25" 
                                                              telerikc:RadDockPanel.Dock="Right"
                                                              IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                                                    <ToolTipService.ToolTip>
                                                        <TextBlock Text="Configure buttons"
telerikc:LocalizationManager.ResourceKey="OutlookBarConfigureButtons" />
                                                    </ToolTipService.ToolTip>
                                                    <telerik:RadContextMenu.ContextMenu>
                                                        <telerikTabControl:DropDownMenu
x:Name="DropDownMenuElement"
StaysOpen="False"
Placement="Bottom"
Style="{x:Null}"
ItemTemplateSelector="{TemplateBinding ItemDropDownContentTemplateSelector}"
DisplayMemberPath="{TemplateBinding DropDownDisplayMemberPath}">
                                                            <telerikTabControl:DropDownMenu.ItemTemplate>
                                                                <DataTemplate>
                                                                    <TextBlock Text="{Binding Title}"></TextBlock>
                                                                </DataTemplate>
                                                            </telerikTabControl:DropDownMenu.ItemTemplate>
                                                        </telerikTabControl:DropDownMenu>
                                                    </telerik:RadContextMenu.ContextMenu>
                                                    <ToggleButton.Template>
                                                        <ControlTemplate>
                                                            <Grid>
                                                                <VisualStateManager.VisualStateGroups>
                                                                    <VisualStateGroup x:Name="CommonStates">
                                                                        <VisualState x:Name="Normal" />
                                                                        <VisualState x:Name="MouseOver">
                                                                            <Storyboard>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                       Storyboard.TargetProperty="BorderBrush" Duration="0:0:0">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlOuterBorder_MouseOver}" />
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                       Storyboard.TargetProperty="Background" Duration="0:0:0">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlBackground_MouseOver}" />
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder"
                                       Storyboard.TargetProperty="BorderBrush" Duration="0:0:0">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlInnerBorder_MouseOver}" />
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow" Storyboard.TargetProperty="Fill" Duration="0">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_MouseOver}" />
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow1" Storyboard.TargetProperty="Fill" Duration="0">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_MouseOver}" />
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                            </Storyboard>
                                                                        </VisualState>
                                                                        <VisualState x:Name="Pressed">
                                                                            <Storyboard>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                       Storyboard.TargetProperty="BorderBrush" Duration="0:0:0">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlOuterBorder_Pressed}" />
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                       Storyboard.TargetProperty="Background" Duration="0:0:0">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlBackground_Pressed}" />
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder"
                                       Storyboard.TargetProperty="BorderBrush" Duration="0:0:0">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlInnerBorder_Pressed}" />
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow" Storyboard.TargetProperty="Fill" Duration="0">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Pressed}" />
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow1" Storyboard.TargetProperty="Fill" Duration="0">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Pressed}" />
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                            </Storyboard>
                                                                        </VisualState>
                                                                        <VisualState x:Name="Disabled">
                                                                            <Storyboard>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow" Storyboard.TargetProperty="Fill" Duration="0">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Disabled}" />
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow" Storyboard.TargetProperty="Stroke" Duration="0">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Disabled}" />
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow1" Storyboard.TargetProperty="Stroke" Duration="0">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Disabled}" />
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                            </Storyboard>
                                                                        </VisualState>
                                                                    </VisualStateGroup>
                                                                    <VisualStateGroup x:Name="CheckStates">
                                                                        <VisualState x:Name="Checked">
                                                                            <Storyboard>
                                                                                <DoubleAnimation Storyboard.TargetName="directionRotation"
                                   Storyboard.TargetProperty="Angle" To="-270" Duration="0" />
                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow" Storyboard.TargetProperty="Fill" Duration="0">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Pressed}" />
                                                                                </ObjectAnimationUsingKeyFrames>

                                                                                <DoubleAnimation Storyboard.TargetName="arrow1" Storyboard.TargetProperty="Y1" To="21" Duration="0" />
                                                                                <DoubleAnimation Storyboard.TargetName="arrow1" Storyboard.TargetProperty="Y2" To="21" Duration="0" />
                                                                                <DoubleAnimation Storyboard.TargetName="arrow1" Storyboard.TargetProperty="X1" To="7" Duration="0" />

                                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow1" Storyboard.TargetProperty="Fill" Duration="0">
                                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Pressed}" />
                                                                                </ObjectAnimationUsingKeyFrames>
                                                                            </Storyboard>
                                                                        </VisualState>
                                                                        <VisualState x:Name="Unchecked" />
                                                                    </VisualStateGroup>
                                                                    <VisualStateGroup x:Name="FocusStates">
                                                                        <VisualState x:Name="Focused" />
                                                                        <VisualState x:Name="Unfocused" />
                                                                    </VisualStateGroup>
                                                                </VisualStateManager.VisualStateGroups>

                                                                <Border x:Name="Border">
                                                                    <Border x:Name="InnerBorder"/>
                                                                </Border>

                                                                <!-- checked -->
                                                                <Border x:Name="CheckedVisual" Opacity="0"
                                       BorderThickness="{TemplateBinding BorderThickness}"
                                       BorderBrush="{StaticResource ControlOuterBorder_Checked}"
                                       Background="{StaticResource ControlBackground_Checked}" 
                                                                        CornerRadius="1" >
                                                                    <Border BorderBrush="{StaticResource ControlInnerBorder_Checked}"
                                                                        CornerRadius="0"
                                                                        BorderThickness="{TemplateBinding BorderThickness}" />
                                                                </Border>

                                                                <Polygon x:Name="arrow" 
                                                                         Points="8,0 0,5, 8,10" 
                                                                         Stroke="{Binding Path=CurrentTheme.HomerSeparatorBackground, Source={StaticResource ThemeWrapper}}"
                                                                         Fill="{Binding Path=CurrentTheme.HomerSeparatorBackground, Source={StaticResource ThemeWrapper}}" 
                                                                         RenderTransformOrigin="0.5,0.5" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
                                                                    <Polygon.RenderTransform>
                                                                        <RotateTransform x:Name="directionRotation" Angle="-90" />
                                                                    </Polygon.RenderTransform>
                                                                </Polygon>
                                                                <Line x:Name="arrow1" Stroke="{Binding Path=CurrentTheme.HomerSeparatorBackground, Source={StaticResource ThemeWrapper}}" StrokeThickness="1" X1="6" Y1="5" X2="18" Y2="5" >
                                                                </Line>
                                                            </Grid>

                                                        </ControlTemplate>
                                                    </ToggleButton.Template>
                                                </ToggleButton>
                                                <outlookBarPrimitives:MinimizedOutlookBarArea IsTabStop="False" x:Name="MinimizedAreaControl" telerikc:RadDockPanel.Dock="Right" />
                                            </telerikc:RadDockPanel>
                                        </Border>
                                    </Border>

                                    <!-- Items -->
                                    <ItemsPresenter telerikc:RadDockPanel.Dock="Bottom" x:Name="ItemsPresenterElement" />

                                    <!-- Splitter -->
                                    <Border telerikc:RadDockPanel.Dock="Bottom"
                                            Background="{Binding Path=CurrentTheme.HomerSplitterBackground, Source={StaticResource ThemeWrapper}}"
               CornerRadius="{StaticResource Splitter_CornerRadius}"
                                            Height="10">
                                        <primitives:Thumb x:Name="HorizontalSplitter" 
                                                          Style="{TemplateBinding HorizontalSplitterStyle}"
                                                          Background="Transparent">
                                            <ToolTipService.ToolTip>
                                                <TextBlock Text="Start dragging in order to change items' position" 
                                                           telerikc:LocalizationManager.ResourceKey="OutlookBarHorizontalSplitter" />
                                            </ToolTipService.ToolTip>
                                        </primitives:Thumb>
                                    </Border>

                                    <!-- Content -->
                                    <Border Background="{Binding Path=CurrentTheme.OutlookContentBackground, Source={StaticResource ThemeWrapper}}">
                                        <Grid DataContext="{Binding}">
                                            <ContentPresenter x:Name="ContentElement" 
                                                          ContentTemplate="{TemplateBinding SelectedContentTemplate}"                                                           
                                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                          VerticalAlignment="Top"
                                                          Margin="{TemplateBinding Padding}">
                                            </ContentPresenter>

                                            <telerikc:RadDropDownButton DropDownIndicatorVisibility="Collapsed" 
                                                                        x:Name="MinimizedContentElement" 
                                                                        Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsMinimized, Converter={StaticResource BooleanToVisibilityConverter}}"
                                                                        DropDownPlacement="Right" 
                                                                        Padding="4 0 0 0" 
                                                                        Margin="0 1 0 0">
                                                <telerikPrimitives:LayoutTransformControl>
                                                    <telerikPrimitives:LayoutTransformControl.LayoutTransform>
                                                        <RotateTransform Angle="-90" />
                                                    </telerikPrimitives:LayoutTransformControl.LayoutTransform>
                                                    <Border VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                                        <TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedItem.Title}" />
                                                    </Border>
                                                </telerikPrimitives:LayoutTransformControl>
                                                <telerikc:RadDropDownButton.DropDownContent>
                                                    <Grid Background="{Binding Path=CurrentTheme.HomerThemeBackground, Source={StaticResource ThemeWrapper}}">
                                                        <ContentPresenter x:Name="MinimizedContentPresenter" ContentTemplate="{TemplateBinding SelectedContentTemplate}"  />
                                                        <Thumb x:Name="PopupResizer" VerticalAlignment="Stretch" Cursor="SizeWE" Opacity="0"  
                                                           HorizontalAlignment="Right" Width="2" />
                                                    </Grid>
                                                </telerikc:RadDropDownButton.DropDownContent>
                                            </telerikc:RadDropDownButton>
                                        </Grid>
                                    </Border>
                                </telerikc:RadDockPanel>
                            </Border>

                            <!-- Resizer -->
                            <Thumb x:Name="VerticalResizer" Opacity="0" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsVerticalResizerVisible, Converter={StaticResource BooleanToVisibilityConverter}}" 
                                       Cursor="SizeWE" VerticalAlignment="Stretch" Width="2"
                                       HorizontalAlignment="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=VerticalResizerAlignment, Converter={StaticResource AlignmentConverter}}">
                                <ToolTipService.ToolTip>
                                    <TextBlock Text="Start dragging in order to resize the outlookbar" telerikc:LocalizationManager.ResourceKey="OutlookBarVerticalResizer" />
                                </ToolTipService.ToolTip>
                            </Thumb>
                        </Grid>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="MinimizeButtonStyle" Value="{StaticResource MinimizeButtonStyle}" />
            <Setter Property="DropDownDisplayMode" Value="Visible" />
            <!--<Setter Property="DropDownStyle" Value="{StaticResource DropDownStyle}" />-->
            <Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder}" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <outlookBarPrimitives:OutlookBarPanel />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="MinimizedAreaMinHeight" Value="31" />
            <!--<Setter Property="HorizontalSplitterStyle" Value="{StaticResource OutlookBarHorizontalSplitter}" />-->
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="TabNavigation" Value="Once" />
            <Setter Property="MaxWidth" Value="280" />
            <Setter Property="Width" Value="280" />
            <Setter Property="Margin" Value="5,5,5,0" />
            <Setter Property="ItemMinimizedTemplate" Value="{StaticResource OutlookBarItemMinimizedTemplate}" />
            <Setter Property="HorizontalAlignment" Value="Stretch" />
        </Style>

        <Style TargetType="telerikc:RadOutlookBar" BasedOn="{StaticResource RadOutlookBarStyle}" />

        <!-- RadOutlookBarItem Style -->
        <Style x:Key="RadOutlookBarItemStyle"  TargetType="telerik:RadOutlookBarItem">
            <Setter Property="IsSelected" Value="{Binding IsSelected}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:RadOutlookBarItem">
                        <Grid x:Name="wrapper">

                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStateGroup">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="SelectVisual"
Duration="0" Storyboard.TargetProperty="Opacity"
To="1" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="MouseOverVisual"
Storyboard.TargetProperty="Opacity" Duration="0"
To="1" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="DisabledVisual"
Storyboard.TargetProperty="Opacity" Duration="0"
To="1" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <!-- normal-->
                            <Border BorderBrush="{TemplateBinding BorderBrush}" Margin="-1 0 -1 -1"
BorderThickness="0">
                                <Border
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
                                        CornerRadius="{StaticResource Outlookbar_CornerRadius}"
                                    Background="{TemplateBinding Background}" />
                            </Border>
                            <!-- Hover -->
                            <Border x:Name="MouseOverVisual" Opacity="0"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0" Margin="-1 0 -1 -1">
                                <Border
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="1"
                                        CornerRadius="{StaticResource Outlookbar_CornerRadius}"
Background="{TemplateBinding Background}" />
                            </Border>
                            <!-- Select -->
                            <Border x:Name="SelectVisual" Opacity="0" Margin="-1 0 -1 -1"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0">
                                <Border
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="1"
                                        CornerRadius="{StaticResource Outlookbar_CornerRadius}"
Background="{Binding Path=CurrentTheme.HomerOutlookbarBackground, Source={StaticResource ThemeWrapper}}" />
                            </Border>
                            <!-- Disabled -->
                            <Border x:Name="DisabledVisual" Opacity="0" Margin="-1 0 -1 -1"
BorderBrush="{StaticResource ControlOuterBorder_Disabled}"
BorderThickness="0">
                                <Border BorderBrush="{StaticResource ControlOuterBorder_Disabled}"
BorderThickness="1"
                                    CornerRadius="{StaticResource Outlookbar_CornerRadius}"
Background="{StaticResource ControlBackground_Disabled}" />
                            </Border>
                            <Grid Margin="{TemplateBinding Padding}">
                                <telerikc:RadDockPanel>
                                    <Image Source="{Binding Icon}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                           ToolTipService.ToolTip="{Binding Title}"
telerikc:RadDockPanel.Dock="Left" Stretch="None" />
                                    <ContentControl x:Name="HeaderElement" Margin="5 0 0 0"                                                     
                                                    Content="{Binding Title}"
                                                    ContentTemplate="{TemplateBinding HeaderTemplate}"
                                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                    Foreground="{TemplateBinding Foreground}"
                                                    FontFamily="Verdana" FontSize="14"
                                                    IsTabStop="False" />
                                </telerikc:RadDockPanel>
                            </Grid>
                        </Grid>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background" Value="{Binding Path=CurrentTheme.HomerHeaderBackground, Source={StaticResource ThemeWrapper}}" />
            <Setter Property="BorderBrush" Value="{Binding Path=CurrentTheme.HomerHeaderBackground, Source={StaticResource ThemeWrapper}}" />
            <Setter Property="Foreground" Value="{Binding Path=CurrentTheme.HomerHeaderForeground, Source={StaticResource ThemeWrapper}}" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Padding" Value="5" />
            <Setter Property="Margin" Value="0 10 0 0" />
            <Setter Property="Height" Value="48"/>
            <Setter Property="FontWeight" Value="Normal" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <!-- Design changes -->
            <Setter Property="FontSize" Value="16"/>
        </Style>

        <Style TargetType="telerik:RadOutlookBarItem" BasedOn="{StaticResource RadOutlookBarItemStyle}" />
        <!--
*******************************
OUTLOOKBAR
******************************* 
   -->

Thanks.

[Tina Stancheva]

Hello Ripal,

This issue is caused by the custom ControlTemplate you applied on the RadOutlookBar. Please find the ContentElement ContentPresenter and change its VerticalAlignment to Stretch:

<ContentPresenter x:Name="ContentElement"
    Margin="{TemplateBinding Padding}"
    VerticalAlignment="Stretch"
    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
    ContentTemplate="{TemplateBinding SelectedContentTemplate}" />

This will fix the issue and will display all items as active in the ActiveItems Area.

Regards,
Tina Stancheva
the Telerik team

[Ripal Vyas]

Hi Tina,

I made the changes as you suggested and its working fine now.

Thanks.