Styling TileViewItem with Swap mode highlight

[FENWICK]

Hi,

I want to template RadTileViewItem and I need to keep highlight when I swap items.
But When I do a simple template copy with Blend and apply this style to RadTileViewItem, the hightlight disappear when I swap items...

Where is the Storyboard that manage it ? on which component ?
How can I solve my problem ?


Thanks

[Vanya Pavlova]

Hello Fenwick,

 


Generally you may try to modify the template of RadTileViewItem and manipulate the element MouseOverBorder. Within MouseOverDragging state its Visibility is set To Visible:

<VisualStateGroup x:Name="MouseOverDraggingStates">
                                    <VisualState x:Name="MouseOverDragging">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseNotOverDragging"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

You may modify this element in the way you need. 
Will you please share with us what have you changed in the template of RadTileViewItem so the highlight disappears? 

Kind regards,
Vanya Pavlova
the Telerik team

[FENWICK]

When I create a template copy, i have this code : 

<SolidColorBrush x:Key="TileView_Background" Color="#FFFFFFFF"/>

<SolidColorBrush x:Key="TileView_OuterBorder" Color="#FF848484"/>

<SolidColorBrush x:Key="TileView_InneBorder" Color="#FFFFFFFF"/>

<Thickness x:Key="TileView_InneBorder_Thickness">1</Thickness>

<SolidColorBrush x:Key="TileView_HeaderBorder" Color="#FFFFFFFF"/>

<Thickness x:Key="TileView_HeaderBorder_Thickness">0 0 0 1</Thickness>

<LinearGradientBrush x:Key="TileView_HeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">

  <GradientStop Color="#FFF6F6F6"/>

  <GradientStop Color="#FFD2D2D2" Offset="1"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="TileView_ButtonBackground" EndPoint="0.5,1" StartPoint="0.5,0">

  <GradientStop Color="#FF282828"/>

  <GradientStop Color="#FF7C7C7C" Offset="1"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="TileView_ButtonOuterBorder" Color="#FFFFFFFF"/>

<LinearGradientBrush x:Key="TileView_ButtonBackground_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">

  <GradientStop Color="#FFFEEDB7" Offset="0"/>

  <GradientStop Color="#FFFACA6A" Offset="1"/>

  <GradientStop Color="#FFFFC94A" Offset="0.526"/>

  <GradientStop Color="#FFFEEDB7" Offset="0.509"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="TileView_ButtonBackground_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">

  <GradientStop Color="#FFFECE95" Offset="0"/>

  <GradientStop Color="#FFFEB407" Offset="1"/>

  <GradientStop Color="#FFFEBB6E" Offset="0.517"/>

  <GradientStop Color="#FFE78318" Offset="0.539"/>

</LinearGradientBrush>

<Style x:Key="maximizeToggleStyle" TargetType="tlk:RadToggleButton">

  <Setter Property="VerticalAlignment" Value="Center"/>

  <Setter Property="HorizontalAlignment" Value="Right"/>

  <Setter Property="Width" Value="17"/>

  <Setter Property="Height" Value="17"/>

  <Setter Property="Template">

    <Setter.Value>

      <ControlTemplate TargetType="tlk:RadToggleButton">

        <Grid>

          <VisualStateManager.VisualStateGroups>

            <VisualStateGroup x:Name="FocusStates">

              <VisualState x:Name="Focused"/>

              <VisualState x:Name="Unfocused"/>

            </VisualStateGroup>

            <VisualStateGroup x:Name="CommonStates">

              <VisualState x:Name="Disabled"/>

              <VisualState x:Name="Normal"/>

              <VisualState x:Name="MouseOver">

                <Storyboard>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="RestoreIcon">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileView_ButtonBackground_MouseOver}"/>

                  </ObjectAnimationUsingKeyFrames>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CollapseIcon">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileView_ButtonBackground_MouseOver}"/>

                  </ObjectAnimationUsingKeyFrames>

                </Storyboard>

              </VisualState>

              <VisualState x:Name="Pressed">

                <Storyboard>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="RestoreIcon">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileView_ButtonBackground_Pressed}"/>

                  </ObjectAnimationUsingKeyFrames>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CollapseIcon">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TileView_ButtonBackground_Pressed}"/>

                  </ObjectAnimationUsingKeyFrames>

                </Storyboard>

              </VisualState>

            </VisualStateGroup>

            <VisualStateGroup x:Name="CheckStates">

              <VisualState x:Name="Checked">

                <Storyboard>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Restore">

                    <DiscreteObjectKeyFrame KeyTime="0">

                      <DiscreteObjectKeyFrame.Value>

                        <Visibility>Collapsed</Visibility>

                      </DiscreteObjectKeyFrame.Value>

                    </DiscreteObjectKeyFrame>

                  </ObjectAnimationUsingKeyFrames>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Collapse">

                    <DiscreteObjectKeyFrame KeyTime="0">

                      <DiscreteObjectKeyFrame.Value>

                        <Visibility>Visible</Visibility>

                      </DiscreteObjectKeyFrame.Value>

                    </DiscreteObjectKeyFrame>

                  </ObjectAnimationUsingKeyFrames>

                </Storyboard>

              </VisualState>

              <VisualState x:Name="Unchecked">

                <Storyboard>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Restore">

                    <DiscreteObjectKeyFrame KeyTime="0">

                      <DiscreteObjectKeyFrame.Value>

                        <Visibility>Visible</Visibility>

                      </DiscreteObjectKeyFrame.Value>

                    </DiscreteObjectKeyFrame>

                  </ObjectAnimationUsingKeyFrames>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Collapse">

                    <DiscreteObjectKeyFrame KeyTime="0">

                      <DiscreteObjectKeyFrame.Value>

                        <Visibility>Collapsed</Visibility>

                      </DiscreteObjectKeyFrame.Value>

                    </DiscreteObjectKeyFrame>

                  </ObjectAnimationUsingKeyFrames>

                </Storyboard>

              </VisualState>

              <VisualState x:Name="Indeterminate"/>

            </VisualStateGroup>

          </VisualStateManager.VisualStateGroups>

          <Grid x:Name="Restore" Background="Transparent" Height="13" Width="13">

            <ToolTipService.ToolTip>

              <ToolTip tlk:LocalizationManager.ResourceKey="TileViewItemMaximizeText"/>

            </ToolTipService.ToolTip>

            <Path x:Name="RestoreIcon" Data="M2,5 L2,8.9999999 6,8.9999999 6,5 z M0,3 L8,3 8,5 8,8.9999999 8,11 0,11 0,8.9999999 0,5 z M3,0 L11,0 11,2 11,8.9999999 9,8.9999999 9,2 3,2 z" Fill="{StaticResource TileView_ButtonBackground}" Margin="1" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0.5"/>

            <Path Data="M1,12 L9,12 9,13 1,13 z M3.9999999,7 L3.9999999,9 6,9 6,7 z M3,6 L7,6 7,7 7,9 7,10 3,10 3,9 3,7 z M0,4 L1,4 1,12 0,12 z M12,1 L13,1 13,10 12,10 z M3,1 L3.9999999,1 3.9999999,3 10,3 10,4 10,10 12,10 12,11 10,11 10,12 9,12 9,4 1,4 1,3 3,3 z M3.9999999,0 L12,0 12,1 3.9999999,1 z" Fill="{StaticResource TileView_ButtonOuterBorder}" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0.5"/>

          </Grid>

          <Grid x:Name="Collapse" Background="Transparent" Height="5" Visibility="Collapsed" Width="12">

            <ToolTipService.ToolTip>

              <ToolTip tlk:LocalizationManager.ResourceKey="TileViewItemMinimizeText"/>

            </ToolTipService.ToolTip>

            <Rectangle Fill="{StaticResource TileView_ButtonOuterBorder}" Stroke="{x:Null}" StrokeThickness="0.5"/>

            <Rectangle x:Name="CollapseIcon" Fill="{StaticResource TileView_ButtonBackground}" Margin="1" Stroke="{x:Null}" StrokeThickness="0.5"/>

          </Grid>

        </Grid>

      </ControlTemplate>

    </Setter.Value>

  </Setter>

</Style>

<CornerRadius x:Key="TileView_HeaderBorder_CornerRadius">1</CornerRadius>

<SolidColorBrush x:Key="TileView_HeaderBorder_HorizontalSplitterBackground" Color="#FFBFBFBF"/>

<LinearGradientBrush x:Key="TileView_HeaderBorder_HorizontalSplitterOpacityMask" EndPoint="0.5,1" StartPoint="0.5,0">

  <GradientStop Color="Black" Offset="0"/>

  <GradientStop Offset="1"/>

</LinearGradientBrush>

<CornerRadius x:Key="TileView_InneBorder_CornerRadius">1</CornerRadius>

<CornerRadius x:Key="TileView_OuterBorder_CornerRadius">10</CornerRadius>

<SolidColorBrush x:Key="ControlOuterBorder_Selected" Color="#FFFFC92B"/>

<Style x:Key="RadTileViewItemStyle1" TargetType="tlk:RadTileViewItem">

  <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

  <Setter Property="VerticalContentAlignment" Value="Stretch"/>

  <Setter Property="Background" Value="{StaticResource TileView_Background}"/>

  <Setter Property="BorderBrush" Value="{StaticResource TileView_OuterBorder}"/>

  <Setter Property="BorderThickness" Value="1"/>

  <Setter Property="Padding" Value="7"/>

  <Setter Property="Template">

    <Setter.Value>

      <ControlTemplate TargetType="tlk:RadTileViewItem">

        <Grid>

          <VisualStateManager.VisualStateGroups>

            <VisualStateGroup x:Name="CommonStates">

              <VisualState x:Name="Normal"/>

              <VisualState x:Name="Disabled">

                <Storyboard>

                  <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledVisual">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                  </ObjectAnimationUsingKeyFrames>

                </Storyboard>

              </VisualState>

              <VisualState x:Name="MouseOver"/>

            </VisualStateGroup>

            <VisualStateGroup x:Name="TileStates">

              <VisualState x:Name="Maximized">

                <Storyboard>

                  <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IsChecked" Storyboard.TargetName="MaximizeToggleButton">

                    <DiscreteObjectKeyFrame KeyTime="0">

                      <DiscreteObjectKeyFrame.Value>

                        <System:Boolean>True</System:Boolean>

                      </DiscreteObjectKeyFrame.Value>

                    </DiscreteObjectKeyFrame>

                  </ObjectAnimationUsingKeyFrames>

                </Storyboard>

              </VisualState>

              <VisualState x:Name="Restored">

                <Storyboard>

                  <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IsChecked" Storyboard.TargetName="MaximizeToggleButton">

                    <DiscreteObjectKeyFrame KeyTime="0">

                      <DiscreteObjectKeyFrame.Value>

                        <System:Boolean>False</System:Boolean>

                      </DiscreteObjectKeyFrame.Value>

                    </DiscreteObjectKeyFrame>

                  </ObjectAnimationUsingKeyFrames>

                </Storyboard>

              </VisualState>

            </VisualStateGroup>

            <VisualStateGroup x:Name="SelectionStates">

              <VisualState x:Name="Selected">

                <Storyboard>

                  <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectedItem">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                  </ObjectAnimationUsingKeyFrames>

                </Storyboard>

              </VisualState>

              <VisualState x:Name="Unselected"/>

            </VisualStateGroup>

          </VisualStateManager.VisualStateGroups>

          <Border x:Name="outerBorder" Background="{TemplateBinding Background}" CornerRadius="{StaticResource TileView_OuterBorder_CornerRadius}" Margin="{TemplateBinding Padding}" BorderBrush="{StaticResource TileView_HeaderBorder_HorizontalSplitterBackground}" BorderThickness="1,1,1,2">

            <Border x:Name="outerContainer" BorderThickness="{StaticResource TileView_InneBorder_Thickness}" Background="Transparent" CornerRadius="{StaticResource TileView_InneBorder_CornerRadius}">

              <Grid>

                <Grid.RowDefinitions>

                  <RowDefinition Height="Auto"/>

                  <RowDefinition Height="*"/>

                </Grid.RowDefinitions>

                <StackPanel>

                  <Border BorderBrush="{StaticResource TileView_HeaderBorder}" BorderThickness="{StaticResource TileView_HeaderBorder_Thickness}" CornerRadius="{StaticResource TileView_HeaderBorder_CornerRadius}" Padding="10 0 7 0">

                    <Grid MinHeight="28">

                      <Border x:Name="GripBarElement" Background="Transparent">

                        <ContentPresenter x:Name="HeaderElement" ContentTemplate="{TemplateBinding HeaderTemplate}" HorizontalAlignment="Left" Margin="0,0,10,0" VerticalAlignment="Center"/>

                      </Border>

                      <tlk:RadToggleButton x:Name="MaximizeToggleButton" Command="tileView:TileViewCommands.ToggleTileState" Style="{StaticResource maximizeToggleStyle}"/>

                    </Grid>

                  </Border>

                  <Border x:Name="Splitter" BorderThickness="0" Background="{StaticResource TileView_HeaderBorder_HorizontalSplitterBackground}" Height="4" OpacityMask="{StaticResource TileView_HeaderBorder_HorizontalSplitterOpacityMask}"/>

                </StackPanel>

                <Grid Background="Transparent" Grid.Row="1">

                  <ContentPresenter x:Name="ContentElement" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                </Grid>

                <Rectangle x:Name="DisabledVisual" Fill="{StaticResource DisabledBrush}" RadiusY="4" RadiusX="4" Grid.RowSpan="2" Visibility="Collapsed"/>

              </Grid>

            </Border>

          </Border>

          <Grid x:Name="SelectedItem" Margin="-1" Visibility="Collapsed">

            <Border BorderBrush="{StaticResource ControlOuterBorder_Selected}" BorderThickness="2" CornerRadius="{StaticResource TileView_OuterBorder_CornerRadius}" Margin="{TemplateBinding Padding}"/>

          </Grid>

        </Grid>

      </ControlTemplate>

    </Setter.Value>

  </Setter>

</Style>

There isn't a VisualStateGroup "MouseOverDraggingStates " and no component "MouseOverBorder".
I added this state and a border with "MouseOverBorder" name and it's work.

Thanks

[Abhilash]

Hello,
I also want to make border of RadTileViewItem visible onmouseover,if anyone know how to achieve this please share.

Thanks.

[Evgenia]

Hi Abhilash,

Can I consider you previous question answered? Let me know if you need any further assistance with it.
As for your last question I'm not sure I understand what exactly is your requirement. Could you please send a sample image of your expectation and we'll guide you further.

Regards,
Evgenia
Telerik

 

 

[Abhilash]

Hello Evgenia,

Thanks for the response.Basically what we are trying to achieve is on mouse over show or hide the border of the RadTileViewItem.
Currently we achieved it using styles,means created two different styles and on radtileview.mouseenter event we are assigning style1 and on radtileview.moseleave event we are assigning style2.
Also we are creating radtileviewitems dynamically and not on using XAML.
There is no mouseover event available for radtileviewitem.Is it possible to achieve this behaviour using pure styles only or any other suggestions,please share.

[Evgenia]

Hello Abhilash,

Unfortunately you'll not be able to achieve this with just adding XAML in MouseOver visual state of the RadTileViewItem's as none of our themes have MouseOver visual behaviour by default. One possible way to achieve this is the one you already have implemented with wireing to MouseEnter, MouseLeave events and applying different styles. Another one that I believe is more suitable for your scenario is presented below:
We'll modify the default RadTileViewItem Style so that we add custom Border that will be shown over corresponding item on MouseOver. The Border's Visibility is controlled by two attached boolean properties and boolean to visibility converter. One of the properties is turned on by default and wires the TileViewItem to MouseEnter,  MouseLeave events. On MouseEnter the other DependencyProperty becames true and on MouseLeave it is false. Here the boolean to visibility converter comes handy. Please find attached the full source code for the suggested approach. Feel free to modify the code per your own scenario needs.

Regards,
Evgenia
Telerik

 

 

[Abhilash]

Thanks again Evgenia,
Actually yes the approach of style loading works fine for us.Means we are loading Styles dynamically on different events.

One more question i got ,Is there any way to change ScrollBar width for Windows8Theme.I am not able to get it.I am using the Theme project and trying to look for ScrollBar styles,but there is no way to set it globally.So is there any option you can suggest.

Actually we want  have the ScrollBar width of Window8 style theme more,currently it looks really thin.

If possible please suggest.

Thanks again.

Regards,

Abhilash

[Evgenia]

Hello Abhilash,

I suggest you use Implicit Styles to achieve the described approach. This is the most efficient way of
customizing the Telerik themes. The xaml file of desired theme can be found inside Theme.Implicit subfolder of your local RadControls installation folder. 

In order to change the size of Width or Height of the ScrollViewer you have to edit the template of the control. Here's a sample:

<ControlTemplate x:Key="ScrollViewerControlTempalte" TargetType="ScrollViewer">
           <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
               <Grid>
                   <Grid.ColumnDefinitions>
                       <ColumnDefinition Width="*"/>
                       <ColumnDefinition Width="Auto"/>
                   </Grid.ColumnDefinitions>
                   <Grid.RowDefinitions>
                       <RowDefinition Height="*"/>
                       <RowDefinition Height="Auto"/>
                   </Grid.RowDefinitions>
                   <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
                   <ScrollBar x:Name="PART_VerticalScrollBar" Style="{StaticResource ScrollBarStyle}" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}">
                       <ScrollBar.Width>30</ScrollBar.Width>
                   </ScrollBar>
                   <ScrollBar x:Name="PART_HorizontalScrollBar"  Style="{StaticResource ScrollBarStyle}" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}">
                       <ScrollBar.Height>30</ScrollBar.Height>
                   </ScrollBar>
               </Grid>
           </Border>
       </ControlTemplate>

       <Style x:Key="MyScrollViewerStyle" TargetType="ScrollViewer" BasedOn="{StaticResource ScrollViewerStyle}">
           <Setter Property="Template" Value="{StaticResource ScrollViewerControlTempalte}" />
       </Style>

       <Style x:Key="TileViewStyle" TargetType="telerik:RadTileView" BasedOn="{StaticResource RadTileViewStyle}">
           <Setter Property="Template">
               <Setter.Value>
                   <ControlTemplate TargetType="telerik:RadTileView">
                       <Grid>
                           <Grid.ColumnDefinitions>
                               <ColumnDefinition Width="*"/>
                               <ColumnDefinition Width="*"/>
                           </Grid.ColumnDefinitions>
                           <Grid.RowDefinitions>
                               <RowDefinition Height="*"/>
                               <RowDefinition Height="*"/>
                           </Grid.RowDefinitions>
                           <VisualStateManager.VisualStateGroups>
                               <VisualStateGroup x:Name="CommonStates">
                                   <VisualState x:Name="Normal"/>
                                   <VisualState x:Name="MouseOver"/>
                                   <VisualState x:Name="Disabled">
                                       <Storyboard>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Visible</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                       </Storyboard>
                                   </VisualState>
                               </VisualStateGroup>
                               <VisualStateGroup x:Name="Docking">
                                   <VisualState x:Name="DockTop">
                                       <Storyboard>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaTop" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Visible</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaBottom" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Collapsed</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaLeft" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Collapsed</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaRight" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Collapsed</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                       </Storyboard>
                                   </VisualState>
                                   <VisualState x:Name="DockLeft">
                                       <Storyboard>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaTop" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Collapsed</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaBottom" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Collapsed</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaLeft" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Visible</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaRight" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Collapsed</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                       </Storyboard>
                                   </VisualState>
                                   <VisualState x:Name="DockRight">
                                       <Storyboard>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaTop" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Collapsed</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaBottom" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Collapsed</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaLeft" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Collapsed</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaRight" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Visible</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                       </Storyboard>
                                   </VisualState>
                                   <VisualState x:Name="DockBottom">
                                       <Storyboard>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaTop" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Collapsed</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaBottom" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Visible</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaLeft" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Collapsed</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaRight" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Collapsed</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                       </Storyboard>
                                   </VisualState>
                                   <VisualState x:Name="HideMaximizeArea">
                                       <Storyboard>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaTop" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Collapsed</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaBottom" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Collapsed</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaLeft" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Collapsed</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaximizeAreaRight" Storyboard.TargetProperty="Visibility" Duration="0">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <Visibility>Collapsed</Visibility>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                       </Storyboard>
                                   </VisualState>
                               </VisualStateGroup>
                           </VisualStateManager.VisualStateGroups>
                           <Border
                               Background="{TemplateBinding Background}"
                               Grid.ColumnSpan="2"
                               Grid.RowSpan="2"
                               BorderThickness="{TemplateBinding BorderThickness}"
                               BorderBrush="{TemplateBinding BorderBrush}">
                               <ScrollViewer x:Name="ScrollViewer" Style="{StaticResource MyScrollViewerStyle}"
                                   BorderThickness="0"
                                   Background="Transparent"
                                   HorizontalScrollBarVisibility="{Binding (ScrollViewer.HorizontalScrollBarVisibility), RelativeSource={RelativeSource TemplatedParent}}"
                                   VerticalScrollBarVisibility="{Binding (ScrollViewer.VerticalScrollBarVisibility), RelativeSource={RelativeSource TemplatedParent}}">
                                   <ItemsPresenter/>
                               </ScrollViewer>
                           </Border>
                           <Rectangle x:Name="DisabledVisual" Grid.ColumnSpan="2" Grid.RowSpan="2" Visibility="Collapsed" Fill="{telerik:Windows8Resource ResourceKey=MainBrush}"/>
                           <Border x:Name="MaximizeAreaTop" Grid.ColumnSpan="2" Grid.Row="0" Visibility="Collapsed" Background="{telerik:Windows8Resource ResourceKey=StrongBrush}" Opacity="0.2"/>
                           <Border x:Name="MaximizeAreaBottom" Grid.ColumnSpan="2" Grid.Row="1" Visibility="Collapsed" Background="{telerik:Windows8Resource ResourceKey=StrongBrush}" Opacity="0.2"/>
                           <Border x:Name="MaximizeAreaLeft" Grid.RowSpan="2" Grid.Column="0" Visibility="Collapsed" Background="{telerik:Windows8Resource ResourceKey=StrongBrush}" Opacity="0.2"/>
                           <Border x:Name="MaximizeAreaRight" Grid.RowSpan="2" Grid.Column="1" Visibility="Collapsed" Background="{telerik:Windows8Resource ResourceKey=StrongBrush}" Opacity="0.2"/>
                       </Grid>
                   </ControlTemplate>
               </Setter.Value>
           </Setter>
       </Style>

Let me know if you need any further assistance with this.

Regards,
Evgenia
Telerik