Content Property in Accordion

11-22-2009 1:19 PM |

Hi I am trying to create an accordion control and bind it to an object. This is my xaml for the accordion

1            <layout:Accordion x:Name="mydetails"
2                                  Grid.Column="0"
3                                  Grid.Row="0"
4                                  HorizontalAlignment="Stretch"
5                                  VerticalAlignment="Top"
6                                  Margin="10">
7                    <layout:Accordion.ContentTemplate>
8                        <DataTemplate>
9                            <StackPanel>
10                               <TextBlock Text="{Binding Path=Name}" />
11                               <TextBlock Text="{Binding Path=Location}" />
12                               <TextBlock Text="{Binding Path=PhotographedBy}" />
13                               <Image Source="{Binding Path=ImageSource}" />
14                           </StackPanel>
15                       </DataTemplate>
16                   </layout:Accordion.ContentTemplate>
17               </layout:Accordion>

But when I try to set the content property for the accordion by giving mydetails.Content, there is no such method. Should I use any other property of the accordion control to set the Content to a business object.

Re: Content Property in Accordion

11-22-2009 1:41 PM |

To bind data to controls you can for example use the ItemsSource property (if the controls takes a list of items), or you can also use the DataContext property which can take for example take a singel object.. Every child controls will "inherits" the parent's DataContext object..

Content Controls with a Content property are often used to add UIElement into the control.. for example Button is a content control, so you can add other controls into a button:

 <Button.Content>
     <StackPanel>
            <Button Content="Hello"/>
            <TextBox Text="World!"/>
     </StackPanel>
</Button.Content>

Re: Content Property in Accordion

11-22-2009 1:52 PM |

Hi, Thanks for your reply. I changed my XAML to have a content template for each Accordion Item. In the code behind I set the Accordion's dataContext property to my custom business object, What I found is that the headers are being set but not the Content part. Any idea why?  

      <layout:Accordion x:Name="mydetails"
                              Grid.Column="0"
                              Grid.Row="0"
                              HorizontalAlignment="Stretch"
                              VerticalAlignment="Top"
                              Margin="10">
                <layout:AccordionItem Header="Name">
                    <layout:AccordionItem.ContentTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Path=Name}" />
                        </DataTemplate>
                    </layout:AccordionItem.ContentTemplate>
                </layout:AccordionItem>
                <layout:AccordionItem Header="Location">
                    <layout:AccordionItem.ContentTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Path=Location}" />
                        </DataTemplate>
                    </layout:AccordionItem.ContentTemplate>
                </layout:AccordionItem>
                <layout:AccordionItem Header="Photographed By">
                    <layout:AccordionItem.ContentTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Path=PhotographedBy}" />
                        </DataTemplate>
                    </layout:AccordionItem.ContentTemplate>
                </layout:AccordionItem>
                <layout:AccordionItem Header="Image">
                    <layout:AccordionItem.ContentTemplate>
                        <DataTemplate>
                            <Image Source="{Binding Path=ImageSource}" />
                        </DataTemplate>
                    </layout:AccordionItem.ContentTemplate>
                </layout:AccordionItem>
            </layout:Accordion>

Re: Content Property in Accordion

11-22-2009 3:30 PM |

Ganesh_Ranganathan:

In the code behind I set the Accordion's dataContext property to my custom business object

You've explicitly set a list of AccordionItems in XAML so trying to use DataContext will have no effect - the accordion already has its data source.  Since your items specified don't have the fields or properties you are trying to bind to, you won't see anything.

The Accordion control is an ItemsControl, so it expects to have a collection of items as its data source.  It looks like you are trying to use the Accordion like a content control.  Maybe just making a user control with a stack of expander controls is more appropriate for what you are trying to do, since you are binding to a single object.

Re: Content Property in Accordion

11-22-2009 3:49 PM |

Thanks for your answer, I think I understand what you mean. I am new to Silverlight and WPF, so making many stupid mistakes on the way :)

One more doubt, my Accordion Control doesnt have a HeaderTemplate, One of Ruurd Boeke's samples shows the Accordion Control having a seperate Header Template, but mine doesnt. So all the headers show up having the Name of the Business Object. Is there any seperate reference that needs to be added for the Accordion Control to have a HeaderTemplate?

Re: Content Property in Accordion

11-23-2009 12:13 AM |

Ahh, Thanks a ton!!!