Changing Metro Theme's ItemMinimized Template

[Olya]

Hi,

If I use Metro theme for the OutlookBar, the minimized items at the bottom are shown like small rounds which don't have enough space to show the text which is inside them. In the Office_Black theme everything is ok (I included 2 pictures so you can compare and understand what I mean).

How can I change and apply this metro theme's template so that the minimized items are shown correctly?

Office_black.png
Metro.png

[Olya]

And also, I figured out that ItemMinimized Template is a DataTemplate and I need to change the form of the container itself, the ControlTemplate. I found how to change the style in Blend BUT..How to apply this template to the control??

[Petar Mladenov]

Hello Olya,

 You can copy the edited ControlTemplate from Blend and set via Style property of the RadOutlookBar like so:

<Style TargetType="telerik:RadOutlookBar" x:Key="customOutlookBarStyle">
     <Setter Property="Template">
         <Setter.Value>
               <ControlTemplate targettuype=telerik:RadOutlookBar>
                         ...your edited template here...


<....Resources>
 <telerik:RadOutlookBar Style="{StaticResource customOutlookBarStyle}">

Kind regards,
Petar Mladenov
the Telerik team

[Olya]

Yes but I need to modify the ControlTemplate for the minimized items and in the style of RadOutlookBar I found that only MinimizedOutlookBarArea template is mentioned which doesn't allow me to change the look of the items that are displayed in it. How can I modify and apply the changes to the template for the minimized items?

[Olya]

I have the following Style for Minimized Items that I got from modifying a little bit (changed the round shape and set the width to auto so the text is visible) the style that I found in the file Telerik.Windows.Controls.Navigation.xaml in the Metro theme's folder of Telerik.
--------------------------------------------------------------------------------------------------------
<*****************************************
  MINIMIZED OUTLOOKBAR ITEM
  *****************************************
    -->
   <Style TargetType="outlookBarPrimitives:MinimizedOutlookBarItem" x:Key="MinimizedOutlookBarItemStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate x:Key="MinimizedTemplate" TargetType="outlookBarPrimitives:MinimizedOutlookBarItem">
                    <Grid x:Name="ControlBorder" Margin="3 0 0 0" Height="22" >

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Border" Storyboard.TargetProperty="Background" >
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource BasicBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Border" Storyboard.TargetProperty="Background" >
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource BasicBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetName="SelectedVisual" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unselected" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

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

        
                        <Border x:Name="SelectedVisual" Visibility="Collapsed"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                BorderBrush="{StaticResource AccentBrush}"
                                Background="{StaticResource AccentBrush}" />

                        <telerik:RadDockPanel Margin="{TemplateBinding Padding}">
                            <Image Source="{TemplateBinding SmallIcon}"
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                        telerik:RadDockPanel.Dock="Left" Stretch="None" />
                            <ContentPresenter Content="{TemplateBinding Content}"
                                        Grid.Column="1"
                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
                        </telerik:RadDockPanel>
                    </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Padding" Value="2 0 2 0" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="{StaticResource BasicBrush}" />
        <Setter Property="Background" Value="{StaticResource MainBrush}" />
        <Setter Property="Foreground" Value="{StaticResource StrongBrush}"/>
        <Setter Property="VerticalContentAlignment" Value="Center" />
    </Style>

    <Style TargetType="outlookBarPrimitives:MinimizedOutlookBarItem"
            BasedOn="{StaticResource MinimizedOutlookBarItemStyle}" />
--------------------------------------------------------------------------------------------------------

How can apply this control template to the Minimized OutlookBarItems of my OutlookBar? The style for the OutlookBar doesn't seem to have this control template described in it.

[Petar Mladenov]

Hi Olya,

 There is no particular Style property in the RadOutlookBar that you can use in this scenario for this custom Style. You can use entirely implicit approach - use NoXAML dlls, and use the OutlookBar MetroStyles implicitly in the Themes folder of your project (including your edited MinimezOutlookBarItemStyle). This is demonstrated in the first attached project.
Second attached project is a mixture of implicit styles and StyleManager. You can use normal dlls and set Application Metro Theme in code behind which sets the styles enough earlier and the implicit style in XAML ( your edited one) succeeds to apply after that. Note that if you don't use Application Theme and use xaml setting of theme like so:

telerik:StyleManager.Theme="Metro"

this wont work - first your custom style applies then the Metro default styles override your custom one.

All the best,
Petar Mladenov
the Telerik team

[Olya]

Thank you SO much, Petar!! That was exactly what I needed! This question was really getting on my nerves because I couldn't figure it out myself) I'm very grateful for the sample projects you've presented me with.