Expander over controls

4 posts, 0 answers
  1. devster
    devster avatar
    19 posts
    Member since:
    Oct 2009

    Posted 27 Nov 2009 Link to this post

    When i expand the expander, i expect to show the content above the other controls on the page. Is this not possible? It shows transparent, but i changed the backgroundcolor of the stackpanel inside the content , so i expected it not to be transparent anymore.

    Greetings
  2. Ivan
    Admin
    Ivan avatar
    519 posts

    Posted 30 Nov 2009 Link to this post

    Hi Katrien,

    Thank you for contacting us.

    Actually the expander just expands itself and this way shows/hides its content. It can not pop-up over other controls. However you can layout it in the way to simulate the hovering effect - just put last in the grid's children list or set its z-order to be the biggest value.

    In order to expand the content over other controls you can use the RadDropDownButton. Its drop-down content is displayed in a pop-up and this way it is over the page.

    About the background question: you should change the expander's background in order to make it non-transparent.

    If you have a bit wired case with the element's layout please send us more information (or better a sample application) and we will elaborate it.

    All the best,
    Ivan
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. DevCraft banner
  4. Chiara
    Chiara avatar
    31 posts
    Member since:
    Oct 2011

    Posted 25 Oct 2011 Link to this post

    Hi, 
    I've red this post and I have the same problem.
    In my project I've got 4 expander (one on the left, one on the right, one on top e one on the bottom).
    In center, inside the ContentControl, I have to load an external grid.
    The problem is that when I press one of the 4 expanders, the content of it doesn't appear over the grid,
    but on the same level and the grid narrows.

    What I have to do for let the expander's content pass over the grid?

    Here is the style of bottom expander:
    <ResourceDictionary
         
        xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
        xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls"
        xmlns:dragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls"
        xmlns:animation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls"
        xmlns:telerikChromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
        xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        mc:Ignorable="d">
     
     
        <SolidColorBrush x:Key="ControlOuterBorder_Focused" Color="#FF6CAFFF" />
        <SolidColorBrush x:Key="ControlOuterBorder_Disabled" Color="#FFD9D9D9" />
        <LinearGradientBrush x:Key="ControlInnerBorder_Disabled" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFAFAFB" Offset="0" />
            <GradientStop Color="#FFF0F0F0" Offset="1" />
        </LinearGradientBrush>
        <SolidColorBrush x:Key="ControlBackground_Disabled" Color="#FFF8F8F8" />
        <SolidColorBrush x:Key="ControlElement_Disabled" Color="#FFA7A7A7" />
        <SolidColorBrush x:Key="ControlOuterBorder_MouseOver" Color="#FFB8D6FB" />
        <LinearGradientBrush x:Key="ControlInnerBorder_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="White" Offset="0" />
            <GradientStop Color="#FFFAFCFD" Offset="1" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ControlBackground_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFBFCFD" Offset="0" />
            <GradientStop Color="#FFF6F8FB" Offset="0.5" />
            <GradientStop Color="#FFEDF2F9" Offset="0.5" />
            <GradientStop Color="#FFE5EBF4" Offset="1" />
        </LinearGradientBrush>
        <SolidColorBrush x:Key="ControlElement_MouseOver" Color="#FF1E395B" />
        <SolidColorBrush x:Key="ControlOuterBorder_Pressed" Color="#FFC0CBD9" />
        <LinearGradientBrush x:Key="ControlInnerBorder_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFC0CBD9" Offset="0" />
            <GradientStop Color="#FFE6EAEE" Offset="0.5" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ControlBackground_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFC0CBD9" Offset="0" />
            <GradientStop Color="#FFE6EAEE" Offset="0.5" />
        </LinearGradientBrush>
        <SolidColorBrush x:Key="ControlElement_Pressed" Color="#FF1E395B" />
        <CornerRadius x:Key="Expander_BorderRadius">3</CornerRadius>
        <LinearGradientBrush x:Key="ControlOuterBorder_Normal" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFA9BFD6" />
            <GradientStop Color="#FFCDDAEA" Offset="1" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ControlBackground_Normal" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFDFEFF" Offset="0" />
            <GradientStop Color="#FFE6F0FA" Offset="0.5" />
            <GradientStop Color="#FFDCE6F4" Offset="0.5" />
            <GradientStop Color="#FFDDE9F7" Offset="1" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ControlInnerBorder_Normal" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFAFCFD" Offset="0" />
            <GradientStop Color="#FFE4EFFB" Offset="1" />
        </LinearGradientBrush>
        <SolidColorBrush x:Key="ControlElement_Normal" Color="#FF1E395B" />
        <SolidColorBrush x:Key="Expander_Background" Color="#00FFFFFF" />
        <SolidColorBrush x:Key="Expander_BorderBrush" Color="#00FFFFFF" />
        <Thickness x:Key="Expander_BorderThickness">0</Thickness>
     
        <telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
     
        <ControlTemplate TargetType="telerik:RadToggleButton" x:Key="ToggleTemplate">
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualStateGroup.Transitions>
                            <VisualTransition GeneratedDuration="0:0:0.2" To="Focused" />
                            <VisualTransition GeneratedDuration="0:0:0.2" To="Unfocused" />
                        </VisualStateGroup.Transitions>
                        <VisualState x:Name="Unfocused" />
                        <VisualState x:Name="Focused">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusDecorator"
                                                                 Storyboard.TargetProperty="Visibility" Duration="0:0:0">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
     
                <ContentPresenter x:Name="Content" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}"
                                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
     
                <Rectangle x:Name="FocusDecorator" Stroke="{StaticResource ControlOuterBorder_Focused}"
                                         StrokeDashArray="1 2" StrokeThickness="0" Visibility="Collapsed" IsHitTestVisible="false" />
            </Grid>
        </ControlTemplate>
     
        <ControlTemplate TargetType="telerik:RadExpander" x:Key="ExpanderTemplate">
            <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                               VerticalAlignment="{TemplateBinding VerticalAlignment}">
     
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStateGroup">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LowerRectangle"
                                                                 Storyboard.TargetProperty="Stroke" Duration="1">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                                                       Value="{StaticResource ControlOuterBorder_Disabled}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerRectangle"
                                                                 Storyboard.TargetProperty="Stroke" Duration="1">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                                                       Value="{StaticResource ControlInnerBorder_Disabled}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LowerRectangle"
                                                                 Storyboard.TargetProperty="Fill" Duration="1">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                                                       Value="{StaticResource ControlBackground_Disabled}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow"
                                                                 Storyboard.TargetProperty="Fill" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Disabled}" />
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity" To=".5" />
                                <DoubleAnimation Storyboard.TargetName="HeaderContent" Storyboard.TargetProperty="Opacity"
                                                                 To=".5" />
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="HeaderStateGroup">
                        <VisualState x:Name="NormalHeader" />
                        <VisualState x:Name="MouseOverHeader">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LowerRectangle"
                                                                 Storyboard.TargetProperty="Stroke" Duration="0:0:0">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                                                       Value="{StaticResource ControlOuterBorder_MouseOver}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerRectangle"
                                                                 Storyboard.TargetProperty="Stroke" Duration="0:0:0">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                                                       Value="{StaticResource ControlInnerBorder_MouseOver}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LowerRectangle"
                                                                 Storyboard.TargetProperty="Fill" Duration="0:0:0">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                                                       Value="{StaticResource ControlBackground_MouseOver}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow"
                                                                 Storyboard.TargetProperty="Fill" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_MouseOver}" /> <!--Transparent-->
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="PressedHeader">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LowerRectangle"
                                                                 Storyboard.TargetProperty="Stroke" Duration="0:0:0">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                                                       Value="{StaticResource ControlOuterBorder_Pressed}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerRectangle"
                                                                 Storyboard.TargetProperty="Stroke" Duration="0:0:0">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                                                       Value="{StaticResource ControlInnerBorder_Pressed}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LowerRectangle"
                                                                 Storyboard.TargetProperty="Fill" Duration="0:0:0">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                                                        Value="{StaticResource ControlBackground_Pressed}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="arrow"
                                                                 Storyboard.TargetProperty="Fill" Duration="0">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_MouseOver}" /> <!--Transparent-->
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="HeaderOrientationGroup">
                        <VisualState x:Name="HorizontalOrientation">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform"
                                                                 Storyboard.TargetProperty="LayoutTransform">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <RotateTransform Angle="0" />
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform" Storyboard.TargetProperty="(Grid.Column)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="VerticalOrientation">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform"
                                                                 Storyboard.TargetProperty="LayoutTransform">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <RotateTransform Angle="90" />
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform" Storyboard.TargetProperty="(Grid.Row)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="ExpandStateGroup">
                        <VisualState x:Name="Expanded">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="arrow"
                                                                 Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" To="180"
                                                                 Duration="0:0:0.2" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Collapsed">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="arrow"
                                                                 Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" To="0"
                                                                 Duration="0:0:0.2" />
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="ExpandDirectionStates">
                        <VisualStateGroup.Transitions>
                            <VisualTransition>
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content"
                                                                       Storyboard.TargetProperty="(Grid.Row)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content"
                                                                       Storyboard.TargetProperty="(Grid.Column)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton"
                                                                       Storyboard.TargetProperty="(Grid.Row)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton"
                                                                       Storyboard.TargetProperty="(Grid.Column)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0" Storyboard.TargetProperty="Width">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Auto" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col1" Storyboard.TargetProperty="Width">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Auto" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0" Storyboard.TargetProperty="Height">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Auto" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row1" Storyboard.TargetProperty="Height">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Auto" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualTransition>
                        </VisualStateGroup.Transitions>
                        <VisualState x:Name="DirectionLeft">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0" Storyboard.TargetProperty="Width">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="*" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0" Storyboard.TargetProperty="Height">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="*" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Column)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Storyboard.TargetName="arrowPanel"
                                                                 Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" To="90" Duration="0:0:0" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="DirectionRight">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col1" Storyboard.TargetProperty="Width">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="*" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0" Storyboard.TargetProperty="Height">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="*" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Column)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Storyboard.TargetName="arrowPanel"
                                                                 Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" To="-90" Duration="0:0:0" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="DirectionUp">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0" Storyboard.TargetProperty="Width">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="*" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0" Storyboard.TargetProperty="Height">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="*" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Row)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Storyboard.TargetName="arrowPanel"
                                                                 Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" To="180" Duration="0:0:0" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="DirectionDown">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0" Storyboard.TargetProperty="Width">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="*" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row1" Storyboard.TargetProperty="Height">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="*" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Row)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
     
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                                      Background="{TemplateBinding Background}" CornerRadius="{StaticResource Expander_BorderRadius}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition x:Name="row0" Height="Auto" />
                            <RowDefinition x:Name="row1" Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="col0" Width="Auto" />
                            <ColumnDefinition x:Name="col1" Width="Auto" />
                        </Grid.ColumnDefinitions>
     
                        <telerik:RadToggleButton
                                x:Name="HeaderButton" TabIndex="{TemplateBinding TabIndex}"
                                                   HorizontalAlignment="{TemplateBinding HorizontalHeaderAlignment}"
                                                   VerticalAlignment="{TemplateBinding VerticalHeaderAlignment}"
                                                   HorizontalContentAlignment="{TemplateBinding HorizontalHeaderAlignment}"
                                                   VerticalContentAlignment="{TemplateBinding VerticalHeaderAlignment}"
                                                   Template="{StaticResource ToggleTemplate}" Background="Transparent"
                                                   IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                                   ClickMode="{TemplateBinding ClickMode}" FontSize="{TemplateBinding FontSize}"
                                                   FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}"
                                                   FontFamily="{TemplateBinding FontFamily}" FontStretch="{TemplateBinding FontStretch}"
                                Foreground="{TemplateBinding Foreground}">
     
                            <Grid x:Name="HeaderPanel" Background="Transparent">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
     
     
     
                                <Grid Grid.ColumnSpan="2" Height="15" Width="50">
                                    <Path Stretch="Fill"
                                             Data="M9.6879816,9.6164646 L9.7167177,9.6166697 L9.6990175,9.5904799 C9.6968584,9.5872803 9.691864,9.5846701 9.687994,9.5846701" 
                                             Stroke="{StaticResource ControlOuterBorder_Normal}" StrokeThickness="1"
                                             Margin="5.439,0,0,-2.707" 
                                             Fill="{StaticResource ControlBackground_Normal}" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutOverrides="GridBox"
                                             HorizontalAlignment="Left" Width="20.233" Height="10.002" VerticalAlignment="Bottom">
                                        <Path.RenderTransform>
                                            <CompositeTransform ScaleX="-1" TranslateX="0.00099945068359375"/>
                                        </Path.RenderTransform>
                                    </Path>
     
     
                                    <Path Stretch="Fill"
                                             Data="M9.6879816,9.6164646 L9.7167177,9.6166697 L9.6990175,9.5904799 C9.6968584,9.5872803 9.691864,9.5846701 9.687994,9.5846701" 
                                                                 Stroke="{StaticResource ControlOuterBorder_Normal}" StrokeThickness="1"
                                             Margin="24.333,0,5.374,-2.735" 
                                             Fill="{StaticResource ControlBackground_Normal}" RenderTransformOrigin="0.5 0.5" UseLayoutRounding="False" d:LayoutOverrides="HorizontalAlignment, GridBox" Height="10.043" VerticalAlignment="Bottom"/>
     
                                    <Grid RenderTransformOrigin=".5 .5" x:Name="arrowPanel">
                                        <Grid.RenderTransform>
                                            <RotateTransform />
                                        </Grid.RenderTransform>
     
                                        <Path x:Name="arrow" Fill="{StaticResource ControlElement_Normal}" Width="6.124" HorizontalAlignment="Center" Margin="0,0,0,11"
                                                          Height="3.5" Stretch="None"
                                                          Data="M0,0 L0.51296544,0 L3.0624802,1.8133497 L5.550745,0 L6.1249604,0 L6.1249604,0.45503533 L3.0624802,2.7166288 L0,0.50936788 z"
                                                          RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" VerticalAlignment="Bottom" d:LayoutOverrides="VerticalAlignment">
                                            <Path.RenderTransform>
                                                <RotateTransform Angle="0" />
                                            </Path.RenderTransform>
                                        </Path>
                                    </Grid>
                                </Grid>
     
                                <Grid Grid.ColumnSpan="2" Grid.Row="1">
     
                                    <Rectangle x:Name="LowerRectangle" Width="auto" Height="8" Margin="0"
                                                                       Stroke="{StaticResource ControlOuterBorder_Normal}" HorizontalAlignment="Stretch"
                                                                       VerticalAlignment="Stretch" Fill="{StaticResource ControlBackground_Normal}"/>
     
                                    <Rectangle x:Name="InnerRectangle" Width="0" Height="0"
                                                                       HorizontalAlignment="Center"
                                                                       VerticalAlignment="Center" />
     
                                    <!--<Ellipse x:Name="OuterCircle" Width="20" Height="20"
                                                                       Stroke="{StaticResource ControlOuterBorder_Normal}" HorizontalAlignment="Center"
                                                                       VerticalAlignment="Center" Fill="{StaticResource ControlBackground_Normal}" />
                                    <Ellipse x:Name="InnerCircle" Width="18" Height="18"
                                                                       Stroke="{StaticResource ControlInnerBorder_Normal}" HorizontalAlignment="Center"
                                                                       VerticalAlignment="Center" />-->
                                </Grid>
                                <telerikPrimitives:LayoutTransformControl RenderTransformOrigin=".5 .5"
                                                                 x:Name="HeaderContentTransform" Grid.Column="0" Grid.Row="0" >
                                    <!--<ContentPresenter x:Name="HeaderContent" Grid.Column="1" Margin="5 0"
                                                                       VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
                                                                       Content="{TemplateBinding Header}"
                                                                       ContentTemplate="{TemplateBinding HeaderTemplate}" />-->
                                </telerikPrimitives:LayoutTransformControl>
                            </Grid>
                        </telerik:RadToggleButton>
                        <!--Content="{TemplateBinding Content}"-->
     
                        <ContentPresenter x:Name="Content" Margin="2,4,2,0" Visibility="Visible"
                                                   ContentTemplate="{TemplateBinding ContentTemplate}"
                                                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Grid>
                </Border>
            </Grid>
     
        </ControlTemplate>
        <Style x:Key="ExpanderBottom" TargetType="telerik:RadExpander" >
            <Setter Property="IsTabStop" Value="false" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
            <Setter Property="Background" Value="{StaticResource Expander_Background}" />
            <Setter Property="BorderBrush" Value="{StaticResource Expander_BorderBrush}" />
            <Setter Property="BorderThickness" Value="{StaticResource Expander_BorderThickness}" />
            <Setter Property="Padding" Value="2" />
            <Setter Property="Template" Value="{StaticResource ExpanderTemplate}" />
            <Setter Property="animation:AnimationManager.AnimationSelector">
                <Setter.Value>
                    <animation:AnimationSelector>
                        <animation:ExpanderExpandCollapseAnimation AnimationName="Expand" Direction="In"
                                                   TargetElementName="Content" />
                        <animation:ExpanderExpandCollapseAnimation AnimationName="Collapse" Direction="Out"
                                                   TargetElementName="Content" />
                    </animation:AnimationSelector>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>

    And this is the MainPage:
    <UserControl
        x:Class="_4expander.MainPage"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
     
        <UserControl.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="ExpanderStyleTop.xaml"/>
                    <ResourceDictionary Source="ExpanderStyleLeft.xaml"/>
                    <ResourceDictionary Source="ExpanderStyleRight.xaml"/>
                    <ResourceDictionary Source="ExpanderStyleBottom.xaml"/>
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </UserControl.Resources>
     
        <Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue" >
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
     
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
     
            <ContentControl x:Name="localCentralContent" Grid.Row="1" Grid.Column="1" Background="Gray"  HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
            <!--prism:RegionManager.RegionName="CentralRegion"-->
            <Grid x:Name="grigliagiulia" Margin="50" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
     
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
     
                <Grid x:Name="WorkspaceGrid" Grid.Column="1" Grid.Row="1" Grid.RowSpan="3" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" >
                    <telerik:RadTabControl x:Name="MainTab" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" VerticalAlignment="Stretch" DisplayMemberPath="Content" DropDownDisplayMode="Visible" ScrollMode="Viewport"
                   HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
                   BorderThickness="0" >
                        <telerik:RadTabItem x:Name="tab1item"  Padding="1 1" DropDownContent="Layout 1" Margin="5,0,0,0" Height="24" Width="78" >
                            <telerik:RadTabItem.Header>
                                <TextBlock Text="Layout 1" Margin="10,0,10,0" />
                            </telerik:RadTabItem.Header>
                            <telerik:RadTabItem.Content>
                                <ContentControl x:Name="MainCc1"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
                            </telerik:RadTabItem.Content>
                        </telerik:RadTabItem>
                        <telerik:RadTabItem x:Name="tab2item" Padding="1 1" DropDownContent="Layout 2" Margin="5,0,0,0" Height="24" Width="78" >
                            <telerik:RadTabItem.Header>
                                <TextBlock Text="Layout 2" Margin="10,0,10,0" />
                            </telerik:RadTabItem.Header>
                            <telerik:RadTabItem.Content>
                                <ContentControl x:Name="MainCc2"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
                            </telerik:RadTabItem.Content>
                        </telerik:RadTabItem>
                        <telerik:RadTabItem x:Name="tab3item" Padding="1 1" DropDownContent="Layout 3" Margin="5,0,0,0" Height="24" Width="78" >
                            <telerik:RadTabItem.Header>
                                <TextBlock Text="Layout 3" Margin="10,0,10,0" />
                            </telerik:RadTabItem.Header>
                            <telerik:RadTabItem.Content>
                                <ContentControl x:Name="MainCc3"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
                            </telerik:RadTabItem.Content>
                        </telerik:RadTabItem>
                        <telerik:RadTabItem x:Name="tab4item" Padding="1 1" DropDownContent="Layout 4" Margin="5,0,0,0" Height="24" Width="78" >
                            <telerik:RadTabItem.Header>
                                <TextBlock Text="Layout 4" Margin="10,0,10,0" />
                            </telerik:RadTabItem.Header>
                            <telerik:RadTabItem.Content>
                                <ContentControl x:Name="MainCc4"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
                            </telerik:RadTabItem.Content>
                        </telerik:RadTabItem>
                        <telerik:RadTabItem x:Name="tab5item" Padding="1 1" DropDownContent="Layout 5" Margin="5,0,0,0" Height="24" Width="78">
                            <telerik:RadTabItem.Header>
                                <TextBlock Text="Layout 5" Margin="10,0,10,0" />
                            </telerik:RadTabItem.Header>
                            <telerik:RadTabItem.Content>
                                <ContentControl x:Name="MainCc5"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
                            </telerik:RadTabItem.Content>
                        </telerik:RadTabItem>
                        <telerik:RadTabItem x:Name="tab6item" Padding="1 1" DropDownContent="Layout 6" Margin="5,0,0,0" Height="24" Width="78" >
                            <telerik:RadTabItem.Header>
                                <TextBlock Text="Layout 6" Margin="10,0,10,0" />
                            </telerik:RadTabItem.Header>
                            <telerik:RadTabItem.Content>
                                <ContentControl x:Name="MainCc6"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
                            </telerik:RadTabItem.Content>
                        </telerik:RadTabItem>
                        <telerik:RadTabItem x:Name="tab7item" Padding="1 1" DropDownContent="Layout 7" Margin="5,0,0,0" Height="24" Width="78" >
                            <telerik:RadTabItem.Header>
                                <TextBlock Text="Layout 7" Margin="10,0,10,0" />
                            </telerik:RadTabItem.Header>
                            <telerik:RadTabItem.Content>
                                <ContentControl x:Name="MainGrid7"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
                            </telerik:RadTabItem.Content>
                        </telerik:RadTabItem>
                        <telerik:RadTabItem x:Name="tab8item" Padding="1 1" DropDownContent="Layout 8" Margin="5,0,0,0" Height="24" Width="78" >
                            <telerik:RadTabItem.Header>
                                <TextBlock Text="Layout 8" Margin="10,0,10,0" />
                            </telerik:RadTabItem.Header>
                            <telerik:RadTabItem.Content>
                                <ContentControl x:Name="MainCc8"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
                            </telerik:RadTabItem.Content>
                        </telerik:RadTabItem>
                        <telerik:RadTabItem x:Name="tab9item" Padding="1 1" DropDownContent="Layout 9" Margin="5,0,0,0" Height="24" Width="78" >
                            <telerik:RadTabItem.Header>
                                <TextBlock Text="Layout 9" Margin="10,0,10,0" />
                            </telerik:RadTabItem.Header>
                            <telerik:RadTabItem.Content>
                                <ContentControl x:Name="MainCc9"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
                            </telerik:RadTabItem.Content>
                        </telerik:RadTabItem>
                        <telerik:RadTabItem x:Name="tab10item" Padding="1 1" DropDownContent="Layout 10" Margin="5,0,0,0" Height="24" Width="78" >
                            <telerik:RadTabItem.Header>
                                <TextBlock Text="Layout 10" Margin="10,0,10,0" />
                            </telerik:RadTabItem.Header>
                            <telerik:RadTabItem.Content>
                                <ContentControl x:Name="MainCc10"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
                            </telerik:RadTabItem.Content>
                        </telerik:RadTabItem>
                    </telerik:RadTabControl>
                </Grid>
            </Grid>
             
     
            <telerik:RadExpander x:Name="radExpanderTop" Grid.ColumnSpan="3" ExpandDirection="Down" Width="Auto" Height="Auto"
                                 Style="{StaticResource ExpanderTop}"  VerticalAlignment="Top" HorizontalAlignment="Stretch"
                                 IsExpanded="False" telerik:AnimationManager.IsAnimationEnabled="{Binding ElementName=AnimationEnableCheckBox, Path=IsChecked}">
                <telerik:RadExpander.Content >
                    <Grid >
                        <Grid.ColumnDefinitions >
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="auto" />
                        </Grid.RowDefinitions>
     
                        <Border BorderBrush="Red" BorderThickness="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                            <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="auto" Height="auto">
                                <Border Grid.Column="0" BorderBrush="#FFDADADA" BorderThickness="0,0,1,1" Height="auto" CornerRadius="3" Margin="5">
                                    <Border BorderBrush="#B2ADBDD1" BorderThickness="1" CornerRadius="2" Background="White">
                                        <StackPanel Orientation="Horizontal">
                                            <Border BorderBrush="#FFE0E0E0" BorderThickness="1"  Margin="10 0 0 0" Width="108" Height="108" >
                                                <Image/>
                                            </Border>
                                            <StackPanel  Margin="10 25 10 0">
                                                <TextBlock FontFamily="Segoe UI" Margin="0 0 0 5" Foreground="#FF0099CC" FontSize="16" Text="Andrew Fuller" />
                                                <TextBlock FontFamily="Segoe UI" Margin="0 0 0 5" FontSize="11" Text="AndrewFuller@mail.com" />
                                                <TextBlock FontFamily="Segoe UI" FontSize="10.667" Text="Phone: 333 2334" />
                                            </StackPanel>
                                        </StackPanel>
                                    </Border>
                                </Border>
     
                                <Border Grid.Row="1" BorderBrush="#FFDADADA" BorderThickness="0,0,1,1" Height="auto" CornerRadius="3" Margin="5">
                                    <Border BorderBrush="#B2ADBDD1" BorderThickness="1" CornerRadius="2" Background="White">
                                        <StackPanel Orientation="Horizontal">
                                            <Border BorderBrush="#FFE0E0E0" BorderThickness="1"  Margin="10 0 0 0" Width="108" Height="108">
                                                <Image />
                                            </Border>
                                            <StackPanel Margin="10 25 15 0">
                                                <TextBlock FontFamily="Segoe UI" Margin="0 0 0 5" Foreground="#FF0099CC" FontSize="16" Text="Emily Smile" />
                                                <TextBlock FontFamily="Segoe UI" Margin="0 0 0 5" FontSize="11" Text="EmilySmile@mail.com" />
                                                <TextBlock FontFamily="Segoe UI" FontSize="10.667" Text="Phone: 333 2334" />
                                            </StackPanel>
                                        </StackPanel>
                                    </Border>
                                </Border>
                            </StackPanel>
                        </Border>
                    </Grid>
                </telerik:RadExpander.Content>
            </telerik:RadExpander>
     
            <telerik:RadExpander x:Name="radExpanderLeft" Grid.RowSpan="3" ExpandDirection="Right" Width="Auto" Height="Auto" IsTabStop="True"
                                 Style="{StaticResource ExpanderLeft}" VerticalAlignment="Stretch" HorizontalAlignment="Left"
                                 IsExpanded="False" telerik:AnimationManager.IsAnimationEnabled="{Binding ElementName=AnimationEnableCheckBox, Path=IsChecked}" >
     
                <telerik:RadExpander.Content >
                    <Grid >
                        <Grid.ColumnDefinitions >
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="auto" />
                        </Grid.RowDefinitions>
     
                        <Border BorderBrush="Red" BorderThickness="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                            <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="auto" Height="auto">
                                <Border Grid.Column="0" BorderBrush="#FFDADADA" BorderThickness="0,0,1,1" Height="auto" CornerRadius="3" Margin="5">
                                    <Border BorderBrush="#B2ADBDD1" BorderThickness="1" CornerRadius="2" Background="White">
                                        <StackPanel Orientation="Horizontal">
                                            <Border BorderBrush="#FFE0E0E0" BorderThickness="1"  Margin="10 0 0 0" Width="108" Height="108" >
                                                <Image/>
                                            </Border>
                                            <StackPanel  Margin="10 25 10 0">
                                                <TextBlock FontFamily="Segoe UI" Margin="0 0 0 5" Foreground="#FF0099CC" FontSize="16" Text="Andrew Fuller" />
                                                <TextBlock FontFamily="Segoe UI" Margin="0 0 0 5" FontSize="11" Text="AndrewFuller@mail.com" />
                                                <TextBlock FontFamily="Segoe UI" FontSize="10.667" Text="Phone: 333 2334" />
                                            </StackPanel>
                                        </StackPanel>
                                    </Border>
                                </Border>
     
                                <Border Grid.Row="1" BorderBrush="#FFDADADA" BorderThickness="0,0,1,1" Height="auto" CornerRadius="3" Margin="5">
                                    <Border BorderBrush="#B2ADBDD1" BorderThickness="1" CornerRadius="2" Background="White">
                                        <StackPanel Orientation="Horizontal">
                                            <Border BorderBrush="#FFE0E0E0" BorderThickness="1"  Margin="10 0 0 0" Width="108" Height="108">
                                                <Image />
                                            </Border>
                                            <StackPanel Margin="10 25 15 0">
                                                <TextBlock FontFamily="Segoe UI" Margin="0 0 0 5" Foreground="#FF0099CC" FontSize="16" Text="Emily Smile" />
                                                <TextBlock FontFamily="Segoe UI" Margin="0 0 0 5" FontSize="11" Text="EmilySmile@mail.com" />
                                                <TextBlock FontFamily="Segoe UI" FontSize="10.667" Text="Phone: 333 2334" />
                                            </StackPanel>
                                        </StackPanel>
                                    </Border>
                                </Border>
                            </StackPanel>
                        </Border>
                    </Grid>
                </telerik:RadExpander.Content>
            </telerik:RadExpander>
     
            <telerik:RadExpander x:Name="radExpanderRight" Grid.RowSpan="3" Grid.Column="2" ExpandDirection="Left" Height="auto" Width="auto" Style="{StaticResource ExpanderRight}"
                    VerticalAlignment="Stretch" HorizontalAlignment="Right"  IsExpanded="False" telerik:AnimationManager.IsAnimationEnabled="{Binding ElementName=AnimationEnableCheckBox, Path=IsChecked}">
                <telerik:RadExpander.Content >
                    <Grid >
                        <Grid.ColumnDefinitions >
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="auto" />
                        </Grid.RowDefinitions>
     
                        <Border BorderBrush="Red" BorderThickness="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                            <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="auto" Height="auto">
                                <Border Grid.Column="0" BorderBrush="#FFDADADA" BorderThickness="0,0,1,1" Height="auto" CornerRadius="3" Margin="5">
                                    <Border BorderBrush="#B2ADBDD1" BorderThickness="1" CornerRadius="2" Background="White">
                                        <StackPanel Orientation="Horizontal">
                                            <Border BorderBrush="#FFE0E0E0" BorderThickness="1"  Margin="10 0 0 0" Width="108" Height="108" >
                                                <Image/>
                                            </Border>
                                            <StackPanel  Margin="10 25 10 0">
                                                <TextBlock FontFamily="Segoe UI" Margin="0 0 0 5" Foreground="#FF0099CC" FontSize="16" Text="Andrew Fuller" />
                                                <TextBlock FontFamily="Segoe UI" Margin="0 0 0 5" FontSize="11" Text="AndrewFuller@mail.com" />
                                                <TextBlock FontFamily="Segoe UI" FontSize="10.667" Text="Phone: 333 2334" />
                                            </StackPanel>
                                        </StackPanel>
                                    </Border>
                                </Border>
     
                                <Border Grid.Row="1" BorderBrush="#FFDADADA" BorderThickness="0,0,1,1" Height="auto" CornerRadius="3" Margin="5">
                                    <Border BorderBrush="#B2ADBDD1" BorderThickness="1" CornerRadius="2" Background="White">
                                        <StackPanel Orientation="Horizontal">
                                            <Border BorderBrush="#FFE0E0E0" BorderThickness="1"  Margin="10 0 0 0" Width="108" Height="108">
                                                <Image />
                                            </Border>
                                            <StackPanel Margin="10 25 15 0">
                                                <TextBlock FontFamily="Segoe UI" Margin="0 0 0 5" Foreground="#FF0099CC" FontSize="16" Text="Emily Smile" />
                                                <TextBlock FontFamily="Segoe UI" Margin="0 0 0 5" FontSize="11" Text="EmilySmile@mail.com" />
                                                <TextBlock FontFamily="Segoe UI" FontSize="10.667" Text="Phone: 333 2334" />
                                            </StackPanel>
                                        </StackPanel>
                                    </Border>
                                </Border>
                            </StackPanel>
                        </Border>
                    </Grid>
                </telerik:RadExpander.Content>
            </telerik:RadExpander>
     
            <telerik:RadExpander x:Name="radExpanderBottom" Grid.ColumnSpan="3" Grid.Row="2" Width="auto" Height="auto"
                                 ExpandDirection="up" IsTabStop="True"
                                 Style="{StaticResource ExpanderBottom}" VerticalAlignment="Bottom" IsExpanded="False"
                                 telerik:AnimationManager.IsAnimationEnabled="{Binding ElementName=AnimationEnableCheckBox, Path=IsChecked}">
                <telerik:RadExpander.Content >
                    <Grid >
                        <Grid.ColumnDefinitions >
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="auto" />
                        </Grid.RowDefinitions>
     
                        <Border Margin="0" BorderBrush="Red" BorderThickness="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                            <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="auto" Height="auto">
                                <Border Grid.Column="0" BorderBrush="#FFDADADA" BorderThickness="0,0,1,1" Height="auto" CornerRadius="3" Margin="5">
                                    <Border BorderBrush="#B2ADBDD1" BorderThickness="1" CornerRadius="2" Background="White">
                                        <StackPanel Orientation="Horizontal">
                                            <Border BorderBrush="#FFE0E0E0" BorderThickness="1"  Margin="10 0 0 0" Width="108" Height="108" >
                                                <Image/>
                                            </Border>
                                            <StackPanel  Margin="10 25 10 0">
                                                <TextBlock FontFamily="Segoe UI" Margin="0 0 0 5" Foreground="#FF0099CC" FontSize="16" Text="Andrew Fuller" />
                                                <TextBlock FontFamily="Segoe UI" Margin="0 0 0 5" FontSize="11" Text="AndrewFuller@mail.com" />
                                                <TextBlock FontFamily="Segoe UI" FontSize="10.667" Text="Phone: 333 2334" />
                                            </StackPanel>
                                        </StackPanel>
                                    </Border>
                                </Border>
     
                                <Border Grid.Row="1" BorderBrush="#FFDADADA" BorderThickness="0,0,1,1" Height="auto" CornerRadius="3" Margin="5">
                                    <Border BorderBrush="#B2ADBDD1" BorderThickness="1" CornerRadius="2" Background="White">
                                        <StackPanel Orientation="Horizontal">
                                            <Border BorderBrush="#FFE0E0E0" BorderThickness="1"  Margin="10 0 0 0" Width="108" Height="108">
                                                <Image />
                                            </Border>
                                            <StackPanel Margin="10 25 15 0">
                                                <TextBlock FontFamily="Segoe UI" Margin="0 0 0 5" Foreground="#FF0099CC" FontSize="16" Text="Emily Smile" />
                                                <TextBlock FontFamily="Segoe UI" Margin="0 0 0 5" FontSize="11" Text="EmilySmile@mail.com" />
                                                <TextBlock FontFamily="Segoe UI" FontSize="10.667" Text="Phone: 333 2334" />
                                            </StackPanel>
                                        </StackPanel>
                                    </Border>
                                </Border>
                            </StackPanel>
                        </Border>
                    </Grid>
                </telerik:RadExpander.Content>
            </telerik:RadExpander>
        </Grid>
    </UserControl>

    prism:RegionManager.RegionName="CentralRegion"
    this is the grid.

    Thank you for help
    Best regards
    -Chiara
  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 28 Oct 2011 Link to this post

    Hi Chiara,

     This is common scenario: RadExpander to overlap other control when expanded. You can place these controls in Canvas and us the Canvas.ZIndex attached property. You can also check out this forum thread and let us know if it helps you.

    All the best,
    Petar Mladenov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top