Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Expander > Expander layout issue

• Murray Intermediate

  Posted on Dec 12, 2011 (permalink)

  I need two expanders in a grid but I need the bottom expander to fill the available space. I can do this by letting the height go to Stretch, but then when I collapse the expander the content animates towards the middle not the top as expected.
  Any idea how to have both expanders collapse upward, have the content collapse upward, yet have the content fill the screen when expanded?
  
  

  <UserControl

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" mc:Ignorable="d"

      x:Class="SilverlightApplication6.MainPage"

      d:DesignWidth="1024" d:DesignHeight="768"

      >

      <Grid x:Name="LayoutRoot" Background="White">

          <Grid.RowDefinitions>

              <RowDefinition Height="Auto"/>

              <RowDefinition Height="*"/>

          </Grid.RowDefinitions>

          <telerik:RadExpander Header="Header" VerticalAlignment="Top" IsExpanded="True">

              <Grid>

                  <Grid.RowDefinitions>

                      <RowDefinition Height="*"/>

                      <RowDefinition Height="Auto"/>

                  </Grid.RowDefinitions>

                  <Rectangle Height="100" Fill="Red"/>

                  <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Grid.Row="1">

                      <telerik:RadButton Content="Button1"/>

                      <telerik:RadButton Content="Button2"/>

                  </StackPanel>

              </Grid>

          </telerik:RadExpander>

          <telerik:RadExpander Header="Header" IsExpanded="True" Grid.Row="1">

              <Grid>

                  <Grid.RowDefinitions>

                      <RowDefinition Height="*"/>

                      <RowDefinition Height="Auto"/>

                  </Grid.RowDefinitions>

                  <telerik:RadGridView/>

                  <telerik:RadDataPager Grid.Row="1"/>

              </Grid>

          </telerik:RadExpander>

      </Grid>

  </UserControl>

  
  Any help would be awesome!
  
  

  Reply

• Answer Miro Miroslavov Miro Miroslavov

  Posted on Dec 12, 2011 (permalink)

  Hi Murray,

   What you need is not possible using the default expander animation. But you can change the default application with new one, so that it betters suits your needs.
  I've created an example animation that works for your case. (You can find it attached)
  Also you can change it that way.
  

  <telerik:RadExpander Header="Header" IsExpanded="True"

                  Grid.Row="1">

              <telerik:AnimationManager.AnimationSelector>

                  <telerik:AnimationSelector>

                      <local:ExpanderExpandCollapseAnimation AnimationName="Expand" Direction="In"

                              TargetElementName="Content" />

                      <local:ExpanderExpandCollapseAnimation AnimationName="Collapse" Direction="Out"

                              TargetElementName="Content" />

                  </telerik:AnimationSelector>

              </telerik:AnimationManager.AnimationSelector>

              <Rectangle Fill="Blue" />

          </telerik:RadExpander>

  
  Here is how to use it. 
  You scenario is also kind of common, so we decided to also fix this and provide out-of-the-box way of doing it, so it will be fixed and available soon.
  Sorry for any inconvenience. 

  Best wishes,
  Miro Miroslavov
  the Telerik team

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

  Attached files

  • ExpanderExpandCollapseAnimation.zip

  Reply

• Murray Intermediate

  Posted on Dec 13, 2011 (permalink)

  Thank you Miro for the workaround! This will do the job for now and I look forward to seeing this fix in an upcoming build.
  
  Murray

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Expander > Expander layout issue