10

I have a main datagrid, then an accordion control below it. In one of the accordion items I have another datagrid that binds to the selected item of the first datagrid. Simple xaml is:

<sdk:DataGrid Name="dgMain" ItemsSource="{Binding SomeSource}" />
<toolkit:Accordion>
    <toolkit:AccordionItem Header="Details">
        <sdk:DataGrid ItemsSource="{Binding ElementName=dgMain, Path=SelectedItem.Children}"/>
    </toolkit:AccordionItem>
</toolkit:Accordion>

I have VerticalAlignment property of the second grid set to "Stretch" so it stretches as different collection sizes are bound to it, but the problem is it only stretches within the AccordionItem size so if I select a new item in the first grid that has more "Children" then I have to scroll the second grid because the AccordionItem didn't change.

AccordionItem region will only change when i condense and expand it again. Setting VerticalContentAlignment to "Stretch" for the accordion item does not work. I guess because it only triggers this when first expanded.

Does anyone know what else I could try or if I'm missing something. I'd prefer to stick with xaml solution so I can stay MVVM-friendly, but glad to hear everything.

Adam
  • 1,580
  • 21
  • 40
  • my problem is with nested accordions - but i get the strong feeling the problem is the same. There needs to be some kind of 'size changed event' bubbled up to parent controls. Sadly dunno how to do this in silverlight yet. – John Nicholas Nov 19 '10 at 10:48

3 Answers3

6

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. :)

Justin XL
  • 38,763
  • 7
  • 88
  • 133
  • 1
    Thank you. Although I didn't test it, this looks reasonable. My silverlight days are over. – Adam Feb 13 '12 at 18:15
  • Thanks. Although, when I replaced this Style in one of the AccordionItems, it indeed always shows the full content of the AccordionItem while the others are dynamically resized, but now the Accordion Items are not filling the whole Accordion area. i.e. there could be lots of unused space in the accordion, and one scrollable Item (that could be bigger). – seldary Mar 12 '12 at 15:47
  • @seldary, what happens if you apply the style to all your items? – Justin XL Mar 12 '12 at 21:29
  • 1
    great solution - worked for me and saved me a lot of work :-) – SteveB Sep 08 '14 at 21:32
2

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();
    }
Joshscorp
  • 1,832
  • 4
  • 22
  • 42
  • For me, the inner datagrid sizechanged event does not fire except when the page initially loads. – Adam Apr 18 '11 at 17:22
0

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>
John Nicholas
  • 4,778
  • 4
  • 31
  • 50