none
Silverlight AccordionItem VerticalContentAlignment not stretching?

    Question

  • I want my AccordionItem to vertically stretch it's content to take up the rest of it's parent grid but can't figure out how. In this example I would expect the black grid to be Bisque when the 2nd item is expanded.

     

    <Grid Background="Black" Height="500">
        <toolkit:Accordion HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" x:Name="toolsAccordion" SelectionMode="ZeroOrOne" d:LayoutOverrides="VerticalAlignment">
            <toolkit:AccordionItem>
                <Grid Background="Aqua">
                    <TextBlock Text="My Grid will only be the size of this text"></TextBlock>
                </Grid>
            </toolkit:AccordionItem>
            <toolkit:AccordionItem HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
                <Grid Background="Bisque">
                    <TextBlock Text="Why doesn't my grid stretch vertically?"></TextBlock>
                </Grid>
            </toolkit:AccordionItem>
        </toolkit:Accordion>
    </Grid>
    
    Tuesday, September 20, 2011 10:55 AM

All replies

  • The default Accordion Item style is as follows:

              <Border x:Name="Background"
             Padding="{TemplateBinding Padding}"
             BorderBrush="{TemplateBinding BorderBrush}"
             BorderThickness="{TemplateBinding BorderThickness}"
             CornerRadius="1,1,1,1">
                  <Grid>
                      <Grid.RowDefinitions>
                          <RowDefinition Height="Auto" x:Name="rd0"/>
                          <RowDefinition Height="Auto" x:Name="rd1"/>
                      </Grid.RowDefinitions>
                      <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="Auto" x:Name="cd0"/>
                          <ColumnDefinition Width="Auto" x:Name="cd1"/>
                      </Grid.ColumnDefinitions>

                      <layoutPrimitivesToolkit:AccordionButton
                   x:Name="ExpanderButton"
                        Style="{TemplateBinding AccordionButtonStyle}"
                   Content="{TemplateBinding Header}"
                   ContentTemplate="{TemplateBinding HeaderTemplate}"
                   IsChecked="{TemplateBinding IsSelected}"
                   IsTabStop="True"
                   Grid.Row="0"
                   Padding="0,0,0,0"
                   Margin="0,0,0,0"
                   FontFamily="{TemplateBinding FontFamily}"
                   FontSize="{TemplateBinding FontSize}"
                   FontStretch="{TemplateBinding FontStretch}"
                   FontStyle="{TemplateBinding FontStyle}"
                   FontWeight="{TemplateBinding FontWeight}"
                   Foreground="{TemplateBinding Foreground}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
                        Background="{TemplateBinding Background}" />
                      <layoutPrimitivesToolkit:ExpandableContentControl
                   x:Name="ExpandSite"
                   Grid.Row="1"
                   IsTabStop="False"
                   Percentage="0"
                        RevealMode="{TemplateBinding ExpandDirection}"
                   Content="{TemplateBinding Content}"
                   ContentTemplate="{TemplateBinding ContentTemplate}"
                   Margin="0,0,0,0"
                        Style="{TemplateBinding ExpandableContentControlStyle}"
                   FontFamily="{TemplateBinding FontFamily}"
                   FontSize="{TemplateBinding FontSize}"
                   FontStretch="{TemplateBinding FontStretch}"
                   FontStyle="{TemplateBinding FontStyle}"
                   FontWeight="{TemplateBinding FontWeight}"
                   Foreground="{TemplateBinding Foreground}"
                   HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                   VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                   HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                   VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                  </Grid>
              </Border>

    You will notice the content is placed in an expandable content control with the Vertical/Horizontal alignments participating in the template binding.  Try setting those to strech as well.  If that doesn't work, try playing around with the above style...

    Tuesday, September 20, 2011 12:01 PM
  • Setting everything on the ExpandableContentControl to stretch does not fix my example problem. 

    Tuesday, September 27, 2011 5:01 PM
  • Hi,

    You might miss the VerticalAlignment="Stretch" property.

    Please refer to the code below, If you still have the problem, please let me know

        <Grid Background="#FFD1D1D1" Height="500" ShowGridLines="True">
            <Border BorderThickness="3" BorderBrush="#FFD42323" Background="#FFDEB9B9">
            <toolkit:Accordion HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalAlignment="Stretch" 
    VerticalContentAlignment="Stretch" x:Name="toolsAccordion" SelectionMode="ZeroOrOne">                 <toolkit:AccordionItem>                     <Grid Background="Aqua">                     <TextBlock Text="My Grid will only be the size of this text"></TextBlock>                 </Grid>             </toolkit:AccordionItem>                 <toolkit:AccordionItem>                     <Grid Background="Bisque">                     <TextBlock Text="Why doesn't my grid stretch vertically?"></TextBlock>                 </Grid>             </toolkit:AccordionItem>         </toolkit:Accordion>         </Border>     </Grid>
    Wednesday, September 28, 2011 3:20 AM
  • You might miss the VerticalAlignment="Stretch" property.

    This doesn't actually stretch the bottom grid.  The entire panel should be Bisque if it was doing what I want.   Also I want the first item to retain it's size.  

    The problem I'm trying to solve here is a list control with dynamically changing items but thought this color example would be easier.   

    Friday, November 04, 2011 4:53 PM