Silverlight Insert image and Text in VB.NET
In this you will see how to work with accordion like how to insert image and Text in Accordion Items in Silverlight.
Accordion: As you learn about the
Accordion in my previous
article Accordion is a web
control that allows you to provide multiple panes and display them one at a
time. It is like having several CollapsiblePanels where only one can be expanded
at a time. The Accordion is implemented as a web control that contains
AccordionPane web controls. Each AccordionPane control has a template for its
Header and its Content. We keep track of the selected pane so it stays visible
across postbacks.
Now with the help of an example I
will explain you the basic use of accordion control of silverlight, we can show
different types of elements like image, text, button etc. inside the accordion
items. The given below example help you to understand how do can insert this
thing inside your accordion.
For the complete example download the
source code given above of this article:
Example of an simple Accordion
<Grid x:Name="LayoutRoot" Background="Blue" Width="640">
<layoutToolkit:Accordion Margin="121,65,62,56" VerticalAlignment="Stretch"HorizontalAlignment="Stretch" ItemContainerStyle="{StaticResource
AccordionItemStyle1}" ExpandDirection="Right">
<layoutToolkit:AccordionItem Header="Button
One" FontFamily="Verdana"FontSize="13.333">
<Canvas Height="353" Width="364">
<Image Height="222" Width="231" Source="1.jpg" Stretch="Fill"Canvas.Left="42" Canvas.Top="15"/>
<TextBlock Height="32" Width="231" Canvas.Left="42" Canvas.Top="254"FontSize="14" Text="This
is image one" TextWrapping="NoWrap"
FontStretch="Expanded" FontFamily="Verdana" FontWeight="Bold"
/>
</Canvas>
</layoutToolkit:AccordionItem>
<layoutToolkit:AccordionItem Header="Button
Two" FontFamily="Verdana"FontSize="13.333">
<Canvas Height="353" Width="364">
<Image Height="222" Width="231" Source="2.jpg" Stretch="Fill" Canvas.Left="42"Canvas.Top="15"/>
<TextBlock Height="32" Width="231" Canvas.Left="42" Canvas.Top="254"FontSize="14" Text="This
is image two" TextWrapping="NoWrap"
FontStretch="Expanded" FontFamily="Verdana" FontWeight="Bold"
/>
</Canvas>
</layoutToolkit:AccordionItem>
<layoutToolkit:AccordionItem Header="Button
Three" FontFamily="Verdana"FontSize="13.333">
<Canvas Height="353" Width="364">
<Image Height="222" Width="231" Source="3.jpg" Stretch="Fill"Canvas.Left="42" Canvas.Top="15"/>
<TextBlock Height="32" Width="231" Canvas.Left="42" Canvas.Top="254"FontSize="14" Text="This
is image three" TextWrapping="NoWrap"
FontStretch="Expanded" FontFamily="Verdana" FontWeight="Bold"
/>
</Canvas>
</layoutToolkit:AccordionItem>
<layoutToolkit:AccordionItem Header="Button
Four" FontFamily="Verdana"FontSize="13.333">
<Canvas Height="353" Width="364">
<Image Height="222" Width="231" Source="4.jpg" Stretch="Fill" Canvas.Left="42"Canvas.Top="15"/>
<TextBlock Height="32" Width="231" Canvas.Left="42" Canvas.Top="254"FontSize="14" Text="This
is image four" TextWrapping="NoWrap"
FontStretch="Expanded" FontFamily="Verdana" FontWeight="Bold"
/>
</Canvas>
</layoutToolkit:AccordionItem>
<layoutToolkit:AccordionItem Header="Button
Five" FontFamily="Verdana"FontSize="13.333">
<Canvas Height="353" Width="364">
<Image Height="222" Width="231" Source="5.jpg" Stretch="Fill" Canvas.Left="42"Canvas.Top="15"/>
<TextBlock Height="32" Width="231" Canvas.Left="42" Canvas.Top="254"FontSize="14" Text="This
is image five" TextWrapping="NoWrap"
FontStretch="Expanded" FontFamily="Verdana" FontWeight="Bold"
/>
</Canvas>
</layoutToolkit:AccordionItem>
</layoutToolkit:Accordion>
</Grid>
Output
Window

Conclusion
Hope this article helps you to
understand that how to work with accordion like how to insert image and Text in
Accordion Items in Silverlight.