Make a grid stretch to the width/height of an AccordionItem

Question

I have a couple of Accordions in a Silverlight App I'm writing (even an Accordion inside of an Accordion!) but the layout is driving me insane.

For example, suppose you have a 500x500 Accordion. If you have 3 AccordionItems, the "Content" area is whatever the height/width of the Accordion is, MINUS the width/height of each header times the number of items you have.

If I add or remove an item, I have to start over if I want to dock items to the right or left of each AccordionItem by manually setting a grid to the resulting size of each AccordionItems content.

Is there a way around this?

Answer 1

What you want can be done very simply. Just set HorizontalContentAlignment and VerticalContentAlignment to "Stretch" on the AccordianItem elements, and their contents will stretch to fill whatever the available space is.

Simple example showing stretched and unstretched content:

<controlsToolkit:Accordion Width="500" Height="500">
        <controlsToolkit:AccordionItem HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
            <Grid Background="Bisque">
                <TextBlock Text="I will be in a grid that fills the accordianitem"></TextBlock>
            </Grid>
        </controlsToolkit:AccordionItem>
        <controlsToolkit:AccordionItem>
            <Grid Background="Aqua">
                <TextBlock Text="My Grid will only be the size of this text"></TextBlock>
            </Grid>
        </controlsToolkit:AccordionItem>
</controlsToolkit:Accordion>