How to get accordion region to expand (vertically) to dynamic content?
The reason that the AccordionItem doesn't resize properly is because there is a bug in one of its control Parts - ExpandableContentControl. The issue is described here.
I think you can either fix its source code or, more easily, replace this control from its default style with a normal ContentControl. I have included a style here with a normal ContentControl and tested it in the code that @JohnNicholas provided, and it works.
<Style TargetType="toolkit:AccordionItem"> <Setter Property="BorderThickness" Value="1"/> <Setter Property="BorderBrush" Value="#FFECECEC"/> <Setter Property="Background" Value="White"/> <Setter Property="Margin" Value="0"/> <Setter Property="Padding" Value="0"/> <Setter Property="HorizontalAlignment" Value="Stretch"/> <Setter Property="VerticalAlignment" Value="Stretch"/> <Setter Property="HorizontalContentAlignment" Value="Left"/> <Setter Property="VerticalContentAlignment" Value="Top"/> <Setter Property="IsTabStop" Value="False"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="toolkit:AccordionItem"> <Grid Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="0"/> </VisualStateGroup.Transitions> <VisualState x:Name="Normal"/> <VisualState x:Name="Pressed"/> <VisualState x:Name="MouseOver"/> <VisualState x:Name="Disabled"/> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"/> <VisualState x:Name="Unfocused"/> </VisualStateGroup> <VisualStateGroup x:Name="ExpansionStates"> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="0"/> </VisualStateGroup.Transitions> <VisualState x:Name="Collapsed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ExpandSite"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Expanded"> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="LockedStates"> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="0"/> </VisualStateGroup.Transitions> <VisualState x:Name="Locked"> <Storyboard> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IsEnabled" Storyboard.TargetName="ExpanderButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="False"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Unlocked"> <Storyboard> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IsEnabled" Storyboard.TargetName="ExpanderButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="True"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="ExpandDirectionStates"> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="0"/> </VisualStateGroup.Transitions> <VisualState x:Name="ExpandDown"> <Storyboard> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd1"> <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd0"> <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="ExpandUp"> <Storyboard> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ExpanderButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ExpandSite"> <DiscreteObjectKeyFrame KeyTime="0" Value="0"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd0"> <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd0"> <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="ExpandLeft"> <Storyboard> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="ExpanderButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="ExpandSite"> <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="ExpanderButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="2"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="ExpandSite"> <DiscreteObjectKeyFrame KeyTime="0" Value="2"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="ExpanderButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ExpandSite"> <DiscreteObjectKeyFrame KeyTime="0" Value="0"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd0"> <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd0"> <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="ExpandRight"> <Storyboard> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="ExpanderButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="ExpandSite"> <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="ExpanderButton"> <DiscreteObjectKeyFrame KeyTime="0" Value="2"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="ExpandSite"> <DiscreteObjectKeyFrame KeyTime="0" Value="2"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ExpandSite"> <DiscreteObjectKeyFrame KeyTime="0" Value="0"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="ExpandSite"> <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd0"> <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd1"> <DiscreteObjectKeyFrame KeyTime="0" Value="*"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1,1,1,1" Padding="{TemplateBinding Padding}"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition x:Name="cd0" Width="Auto"/> <ColumnDefinition x:Name="cd1" Width="Auto"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition x:Name="rd0" Height="Auto"/> <RowDefinition x:Name="rd1" Height="Auto"/> </Grid.RowDefinitions> <toolkit:AccordionButton x:Name="ExpanderButton" Background="{TemplateBinding Background}" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="True" IsChecked="{TemplateBinding IsSelected}" Margin="0,0,0,0" Padding="0,0,0,0" Grid.Row="0" Style="{TemplateBinding AccordionButtonStyle}" VerticalAlignment="{TemplateBinding VerticalAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> <ContentControl x:Name="ExpandSite" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" Margin="0,0,0,0" Grid.Row="1" Style="{TemplateBinding ExpandableContentControlStyle}" VerticalAlignment="{TemplateBinding VerticalAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> </Grid> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>PS. If you want to animate the expanding/collapsing you can just define your own animation in the AccordionItem's Collapsed and Expanded visual states.
It is really a late reply and hope it can be of any help. :)
I had a similar issue long time ago, I think this is what I did. Basically in the size changed event of the inner datagrid, we reinvoke the measure pass of the accordion.
In the inner data grid, attach the size change event as so.
private void InnerDataGrid_SizeChanged(object sender, System.Windows.SizeChangedEventArgs e) { this.AccordionName.Measure(new Size()); this.AccordionName.UpdateLayout(); }
this code will demonstrate the problem
The accordion in the sub-sub-accordion will not expand when you first expand it. However if you collapse its parent and reaxpand it will show. Alternativley resize the browser window and it will also resize everythign to show it.
this example is a bit contrived but usually i am showing a sub control that also has an accordino to get this problem. There are also problems when you wrap everythign in a scrollviewer But these are probably related to the first.
<UserControl x:Class="SilverlightApplication1.MainPage" 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" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"> <Grid x:Name="LayoutRoot" Background="White"> <toolkit:Accordion HorizontalAlignment="Stretch" Name="accordion1" SelectionMode="ZeroOrOne" > <toolkit:AccordionItem> <toolkit:AccordionItem.Header> <TextBlock Text="Title" /> </toolkit:AccordionItem.Header> <toolkit:AccordionItem.Content> <Grid> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> </Grid.RowDefinitions> <TextBox Grid.Row="0" Height="200" Width="400" /> <toolkit:Accordion Grid.Row="1" HorizontalAlignment="Stretch" Name="subAccordion" SelectionMode="ZeroOrOne" > <toolkit:AccordionItem> <toolkit:AccordionItem.Header> <TextBlock Text="Sub Accordion" /> </toolkit:AccordionItem.Header> <toolkit:AccordionItem.Content> <Grid> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> </Grid.RowDefinitions> <TextBox Grid.Row="0" Height="150" Width="400" Text="Sub Accordion" /> <toolkit:Accordion Grid.Row="1" HorizontalAlignment="Stretch" Name="subAccordion2" SelectionMode="ZeroOrOne" > <toolkit:AccordionItem> <toolkit:AccordionItem.Header> <TextBlock Text="Sub sub Accordion" /> </toolkit:AccordionItem.Header> <toolkit:AccordionItem.Content> <TextBox Text="sub sub" Height ="100" /> </toolkit:AccordionItem.Content> </toolkit:AccordionItem> </toolkit:Accordion> </Grid> </toolkit:AccordionItem.Content> </toolkit:AccordionItem> </toolkit:Accordion> </Grid> </toolkit:AccordionItem.Content> </toolkit:AccordionItem> </toolkit:Accordion> </Grid></UserControl>