Silverlight Insert image and Text in VB.NET

 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.