Come faccio lego voci di elenco a un controllo Accordion dal Silverlight 3 Toolkit?
-
19-09-2019 - |
Domanda
Ho una lista di oggetti in un modello. Vorrei mostrare elementi del DTO nella lista nei miei pannelli AccordianItem. Il modello è simile a questo:
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; }
}
Voglio mostrare l'immagine l'immagine di sfondo in AccordianItems e gettare le longdescription su una porzione dell'immagine.
Se il codice difficile, posso ottenere l'immagine nella AccordianItem così ...
<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>
Quando provo con un legante come <ImageBrush ImageSource="{Binding Path={StaticResource MyContentTemplate.ImageUri}}" Stretch="None"/>
o se provo con <ImageBrush ImageSource="{Binding Path=Items[0].ImageUri}" Stretch="None"/>
, Getta XamlParseException.
Modifica Sono in grado di ottenere un po 'di legame del testo sulle immagini hard-coded con la seguente StaticResource (NOTA: Sono prodotti che duri-codifica [2], io non sono sicuro di come indicizzarlo)
<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>
C'è un modo per indicizzare l'insieme di elementi in DataTemplate? Inoltre come faccio a ottenere l'immagine di legare piuttosto che hard-codifica in ogni AccordianItem? Qualsiasi aiuto nella giusta direzione sarebbe apprezzato, soprattutto come associare e laici testo sopra un immagine.
Soluzione
Per associare ad una raccolta che deve essere referenziato con ItemsSource = "{Binding Articoli}" , dove in questo caso Elementi è la mia collezione 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>
Si noti che una collezione deve essere legato con ItemsSource, che è plurale come mnemonico. e singoli membri di elementi sono tenuti sotto il controllo di <layoutToolkit:Accordian.ItemTemplate>
Qui sto mostrando MyCollection.Title in un controllo TextBlock. Io aggiornare questo con piena codice o un link al mio blog per un esempio completo in seguito.