Not able maximized outlookbar items always load as minimized

3 posts, 1 answers
  1. Ripal Vyas
    Ripal Vyas avatar
    5 posts
    Member since:
    Mar 2008

    Posted 09 May 2013 Link to this post

    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.

  2. Answer
    Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 14 May 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Ripal Vyas
    Ripal Vyas avatar
    5 posts
    Member since:
    Mar 2008

    Posted 22 May 2013 Link to this post

    Hi Tina,

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

    Thanks.



Back to Top