Comment puis-je lie les éléments de liste à un contrôle d'accordéon du Silverlight 3 Toolkit?

Question

J'ai une liste d'objets dans un modèle. Je souhaite montrer des éléments de la DTO dans la liste dans mes panneaux AccordianItem. Le modèle est comme ceci:

public class MyModel 
{ 
    public List<AnimalDTO> Items { get; set; } 

    public MyModel() 
    { 
        Items = new List<AnimalDTO> 
                    { 
                        new AnimalDTO() {Title = "Monkey", ImageUri = "Images/monkey.jpg"}, 
                        new AnimalDTO() {Title = "Cow", ImageUri = "Images/cow.jpg"}, 
                    }; 
    } 
} 
public class AnimalDTO
{
    public string Title { get; set; }
    public string LongDescription { get; set; }
    public string ImageUri { get; set; }
    public string NavigateUri { get; set; }
}

Je veux montrer l'image dans l'image d'arrière-plan AccordianItems et jeter les LongDescription sur une partie de l'image.

Si je coder en dur, je peux obtenir l'image AccordianItem ainsi ...

<layoutToolkit:AccordionItem x:Name="Item2" Header="Item 2" Margin="0,0,10,0" AccordionButtonStyle="{StaticResource AccordionButtonStyle1}" ExpandableContentControlStyle="{StaticResource ExpandableContentControlStyle1}" HeaderTemplate="{StaticResource DataTemplate1}" BorderBrush="{x:Null}" ContentTemplate="{StaticResource CarouselContentTemplate}">
                <layoutToolkit:AccordionItem.Background>
                    <ImageBrush ImageSource="Images/cow.jpg" Stretch="None"/>
                </layoutToolkit:AccordionItem.Background>
            </layoutToolkit:AccordionItem>

Lorsque je tente avec une reliure comme <ImageBrush ImageSource="{Binding Path={StaticResource MyContentTemplate.ImageUri}}" Stretch="None"/> ou si je l'essayer avec <ImageBrush ImageSource="{Binding Path=Items[0].ImageUri}" Stretch="None"/> , Il jette XamlParseException.

Edit: Je suis en mesure d'obtenir une liaison du texte sur les images codées en dur avec les éléments suivants StaticResource (NOTE: Je suis Articles codage en dur [2], je ne sais pas comment indexer)

        <DataTemplate x:Key="CarouselContentTemplate">
        <Grid Width="650" Height="420">
            <Grid.RowDefinitions>
                <RowDefinition Height="0.476*"/>
                <RowDefinition Height="0.524*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="150" />
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Row="0" Grid.Column="0"
                   x:Name="Title" 
                   Text="{Binding Items[2].Title}" 
                   Foreground="Black" FontSize="12"></TextBlock>
            <TextBlock Grid.Row="1" Grid.Column="0"
                   x:Name="LongDescription" 
                   Text="{Binding Items[2].LongDescription}"
                   TextWrapping="Wrap"FontSize="8"></TextBlock>
        </Grid>
    </DataTemplate>

Est-il possible d'indexer la collection Items dans le DataTemplate? De plus, comment puis-je obtenir l'image de lier plutôt que de les coder en dur dans chaque AccordianItem? Toute aide dans la bonne direction serait appréciée, surtout comment lier et poser le texte sur une image.

Answer 1

Pour se lier à une collection, il doit être référencé avec ItemsSource = "{Binding Articles}" , où dans ce cas Articles est ma collection MyModel.Items

<layoutToolkit:Accordion
        HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
        ExpandDirection="Right" 
        Style="{StaticResource AccordionStyle1}"
        AccordionButtonStyle="{StaticResource AccordionButtonStyle1}"
         MaxHeight="420" MaxWidth="800" 
         ItemsSource="{Binding Items}" Margin="8,0,-8,-12" Grid.Row="3"
        >
        <layoutToolkit:Accordion.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Title}"></TextBlock>
            </DataTemplate>
        </layoutToolkit:Accordion.ItemTemplate>

Notez qu'une collection doit être lié avec ItemsSource, qui est plurielle comme mnémonique. et des membres individuels d'éléments sont liés sous le contrôle de <layoutToolkit:Accordian.ItemTemplate> Ici je montre MyCollection.Title dans un contrôle TextBlock. Je mettre à jour ce avec le code complet ou un lien vers mon blog pour un exemple complet plus tard.