Silverlight 4 Image Slider XML Data in VB.NET

This article demonstrates how to make image slider in Silverlight using XML database.
  • 2107

First of all make a new project in Silverlight and add a new .xml file in the ClientBin folder using add new item and add some images in Assets folder under ClientBin folder; here is my xml file data.

<?xml version="1.0" encoding="utf-8" ?>
<Images>
  <
Image>
    <
ImageId>1</ImageId>
    <ImageUri>../ClientListingGallery/1.jpg</ImageUri>
    <ImageName>A fountain on the Place de la Concorde</ImageName>
    <ImageRedirectUrl>www.c-sharpcorner.com</ImageRedirectUrl>
  </Image>
  <
Image>
    <
ImageId>2</ImageId>
    <ImageUri>../ClientListingGallery/2.jpg</ImageUri>
    <ImageName>Musee du Louvre</ImageName>
    <ImageRedirectUrl>www.c-sharpcorner.com</ImageRedirectUrl>
  </Image>
  <
Image>
    <
ImageId>3</ImageId>
    <ImageUri>../ClientListingGallery/3.jpg</ImageUri>
    <ImageName>Hand sculptures in Jeu de Paume, near Place De La Concorde</ImageName>
    <ImageRedirectUrl>www.c-sharpcorner.com</ImageRedirectUrl>
  </Image>
  <
Image>
    <
ImageId>4</ImageId>
    <ImageUri>../ClientListingGallery/4.jpg</ImageUri>
 
   <ImageName>Rive gauche, from Notre Dame de Paris</ImageName>
    <ImageRedirectUrl>www.c-sharpcorner.com</ImageRedirectUrl
</Image>
  <
Image>
    <
ImageId>5</ImageId>
    <ImageUri>../ClientListingGallery/5.png</ImageUri>
    <ImageName>Notre Dame de Paris</ImageName>
    <ImageRedirectUrl>www.c-sharpcorner.com</ImageRedirectUrl>
  </Image>
  <
Image>
    <
ImageId>6</ImageId>
    <ImageUri>../ClientListingGallery/6.jpg</ImageUri>
    <ImageName>Statue in Opéra national de Paris</ImageName>
    <ImageRedirectUrl>www.c-sharpcorner.com</ImageRedirectUrl
</Image>
  <
Image>
    <
ImageId>7</ImageId>
    <ImageUri>../ClientListingGallery/7.jpg</ImageUri>
    <ImageName>Paris</ImageName>
    <ImageRedirectUrl>www.c-sharpcorner.com</ImageRedirectUrl>
  </Image>
  <
Image>
    <
ImageId>8</ImageId>
    <ImageUri>../ClientListingGallery/8.jpg</ImageUri>
    <ImageName>Statue in Jardin de Luxembourg</ImageName>
    <ImageRedirectUrl>www.c-sharpcorner.com</ImageRedirectUrl
</Image>
    <
Image>
    <
ImageId>9</ImageId>
    <ImageUri>../ClientListingGallery/9.jpg</ImageUri>
    <ImageName>Statue near Musee du Louvre</ImageName>
    <ImageRedirectUrl>www.c-sharpcorner.com</ImageRedirectUrl
</Image
  <
Image>
    <
ImageId>10</ImageId>
    <ImageUri>../ClientListingGallery/10.jpg</ImageUri>
    <ImageName>Statue near Musee du Louvre</ImageName>
    <ImageRedirectUrl>www.c-sharpcorner.com</ImageRedirectUrl>
  </Image>
</
Images> 

Now it's time to work on .xaml page. 

<UserControl.Resources>
        <ControlTemplate x:Key="pevButtonControlTemplate" TargetType="Button">
            <Grid Background="Black">
                <Image HorizontalAlignment="Left" Source="prev.jpg" Stretch="Fill" VerticalAlignment="Center"></Image>
            </Grid>
        </ControlTemplate>
        <ControlTemplate x:Key="nextButtonControlTemplate" TargetType="Button">
            <Grid Background="Black">
                <Image HorizontalAlignment="Left"  Source="next.jpg" Stretch="Fill" VerticalAlignment="Center" />
            </Grid>
        </ControlTemplate>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White" VerticalAlignment="top" Margin="1,0,-1,0" Height="138" Width="584">
        <Thumb Margin="1,33,8,3" Background="#FFF9FAFB">
            <Thumb.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA3AEB9" Offset="0"/>
                    <GradientStop Color="#FF8399A9" Offset="0.375"/>
                    <GradientStop Color="#FF718597" Offset="0.375"/>
                    <GradientStop Color="#FFAFB3B6" Offset="1"/>
                </LinearGradientBrush>
            </Thumb.BorderBrush>
        </Thumb>
   <ListBox x:Name="ImagesListBox" Background="Transparent" Margin="43,39,0,9" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled" BorderBrush="{x:Null}" Width="496" HorizontalAlignment="Left" Height="90">          
  
<ListBox.ItemsPanel >
                <ItemsPanelTemplate >
                    <StackPanel Orientation="Horizontal"  >
                    </StackPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate >
                <DataTemplate >
                    <StackPanel>
                        <Image Source="{Binding Path=ImageUri}" Stretch="Fill"  Margin="1,1,1,1" Width="70" Height="70"></Image>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>      
        
<TextBlock Margin="3,2,0,0" TextWrapping="Wrap" Text="Clients Listing ..." Foreground="#FF6C6B69" FontSize="21.333" FontWeight="Bold"Height="33" VerticalAlignment="Top" HorizontalAlignment=

"Left" Width="201">                             <TextBlock.Effect>
                                      <DropShadowEffect Color="#FFA9A6A6"/>
                  </TextBlock.Effect>
        </TextBlock>       
        
<Button HorizontalAlignment="Left" Background="Black" VerticalAlignment="Top" Height="60"
                            x:Name="LeftArrowButton" Click="LeftArrowButton_Click" Template="
StaticResource pevButtonControlTemplate}" Width="30"d:LayoutOverrides="HorizontalAlignment" Margin="8,54,0,0">
        </Button>
        <Button VerticalAlignment="Top" Height="60" HorizontalAlignment="Right"
                            x:Name="RightArrowButton" Click="RightArrowButton_Click" Template="
StaticResource nextButtonControlTemplate}"Margin="0,54,27,0" Width="30" d:LayoutOverrides="HorizontalAlignment">
        </Button>
</Grid> 

And put this code in the code behind.  

Imports System.Xml.Linq
Private clientListImages As List<ClientList>
Dim PageNumber As Integer = 0
Dim PageIndex As Integer = 1
Public Sub New()
    InitializeComponent()
    LoadPictureAlbumXMLFile()
End Sub
Public Sub LoadPictureAlbumXMLFile()
    Dim xmlClient As New WebClient()
    xmlClient.DownloadStringCompleted += NewDownloadStringCompletedEventHandler(AddressOf LoadXMLFile)
    xmlClient.DownloadStringAsync(New Uri("ClientListing.xml", UriKind.RelativeOrAbsolute))
End Sub
Private Sub LoadXMLFile(ByVal sender As ObjectByVal e AsDownloadStringCompletedEventArgs)
    If e.[Error] Is Nothing Then
        clientListImages = New List(Of ClientList)()
        Dim xdoc As XDocument = XDocument.Parse(e.Result)
        'System.Windows.Browser.HtmlPage.Window.Alert(e.Result);
        For Each item As XElement In xdoc.Elements("Images").Elements("Image")
            Dim clientListImage As New ClientList()
            clientListImage.ImageId = Integer.Parse(item.Element("ImageId").Value)
            clientListImage.ImageName = item.Element("ImageName").Value
            If item.Element("ImageUri").Value.Contains("http"Then
                clientListImage.ImageUri = New Uri(item.Element("ImageUri").Value, UriKind.Absolute)
            Else
                clientListImage.ImageUri = New Uri(item.Element("ImageUri").Value,
UriKind.Relative)
            End If
            clientListImage.ImageRedirectUrl = item.Element("ImageRedirectUrl").Value
            clientListImages.Add(clientListImage)
        Next
        ImagesListBox.ItemsSource = clientListImages.Skip((PageNumber) * PageIndex).Take(6)
    End If
End Sub
Private Sub LeftArrowButton_Click(ByVal sender As ObjectByVal e AsSystem.Windows.RoutedEventArgs)
    ' TODO: Add event handler implementation here.           
    If PageNumber > 0 Then
        PageNumber = PageNumber - 1
        ImagesListBox.ItemsSource = clientListImages.Skip((PageNumber) * PageIndex).Take(6)
    End If
End Sub
Private Sub RightArrowButton_Click(ByVal sender As ObjectByVal e AsSystem.Windows.RoutedEventArgs)
    ' TODO: Add event handler implementation here.
    PageNumber = PageNumber + 1
    ImagesListBox.ItemsSource = clientListImages.Skip((PageNumber) * PageIndex).Take(6)
End Sub

Now it's time to run the application and see the result.

 1.jpg

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.