none
slide show of images in Silverlight 2

    Question

  • I have a silverlight 2 application running on a web page and my users want the image that is there changing every 10 seconds to another - in a rotation.

    I would personally like it that it pulls the images from a seperate web folder.

    Can anyone tell me how to do this?

    Thanks

    Alex

    Tuesday, June 03, 2008 6:22 AM

Answers

  • 1) You can put images in a separate web folder under your Web project. And set the image.Source to the file url either using Absolute URL or Relative URL. If you want to use Relative URL and your images are in the folder named Images under your Web Project.

    <Image Source="..//images/YourImageFile"  />

    2) You build your image list. You can use ListBox to bind your ImageList and use ScrollViewer to control which one to show. Or you just hold the list control which one to added to the image container.

    3) You can use a System.Windows.Threading.DispatcherTimer to control your image showing process.

    4) You can use Storyboard and Animation add more visual effect.


    There are more than one way of doing this. Here is a simple one without Timer. You can add Timer code to control it.

    XAML

    <Grid HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="RootLayout">                      
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>      

            <!-- ListBox slide display -->
            <ListBox x:Name="SlideShow" Grid.ColumnSpan="2"
                     Width="484" Height="364"
                     SelectionChanged="SlideShow_SelectionChanged"
                     controls:ScrollViewer.HorizontalScrollBarVisibility="Hidden"  
                     controls:ScrollViewer.VerticalScrollBarVisibility="Hidden"
                     >

                <!-- Style to size all images to desired size -->
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="Width" Value="480"/>
                        <Setter Property="Height" Value="360"/>
                    </Style>
                </ListBox.ItemContainerStyle>
                <!-- Slide images, Update that path if necessary for your machine -->      
                <Image Source="..//images/Image1.jpg"/>
                <Image Source="..//images/Image2.jpg""/>
                <Image Source="..//images/Image3.jpg""/>
                <Image Source="..//images/Image4.jpg""/>
            </ListBox>

            <!-- Previous/Next buttons -->
            <Button x:Name="Previous" Grid.Column="0" Grid.Row="1" Content="Previous" Click="Nav_Click" />
            <Button x:Name="Next" Grid.Column="1" Grid.Row="1" Content="Next" Click="Nav_Click" />
        </Grid>

     Code Behind:

    public partial class Page : UserControl
        {
            public Page()
            {
                InitializeComponent();           
            }
           
            private void Nav_Click(object sender, RoutedEventArgs e)
            {
                Button s = sender as Button;
                if (s == this.Previous)
                    Show.SelectedIndex--;
                if(s == this.Next)
                    Show.SelectedIndex++;
                Show.ScrollIntoView(Show.SelectedItem);
            }

            private void SlideShow_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                Previous.IsEnabled = (0 < Show.SelectedIndex);
                Next.IsEnabled = (Show.SelectedIndex < Show.Items.Count - 1);
            }       
        }
     

     

    Tuesday, June 03, 2008 5:10 PM

All replies

  • 1) You can put images in a separate web folder under your Web project. And set the image.Source to the file url either using Absolute URL or Relative URL. If you want to use Relative URL and your images are in the folder named Images under your Web Project.

    <Image Source="..//images/YourImageFile"  />

    2) You build your image list. You can use ListBox to bind your ImageList and use ScrollViewer to control which one to show. Or you just hold the list control which one to added to the image container.

    3) You can use a System.Windows.Threading.DispatcherTimer to control your image showing process.

    4) You can use Storyboard and Animation add more visual effect.


    There are more than one way of doing this. Here is a simple one without Timer. You can add Timer code to control it.

    XAML

    <Grid HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="RootLayout">                      
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>      

            <!-- ListBox slide display -->
            <ListBox x:Name="SlideShow" Grid.ColumnSpan="2"
                     Width="484" Height="364"
                     SelectionChanged="SlideShow_SelectionChanged"
                     controls:ScrollViewer.HorizontalScrollBarVisibility="Hidden"  
                     controls:ScrollViewer.VerticalScrollBarVisibility="Hidden"
                     >

                <!-- Style to size all images to desired size -->
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="Width" Value="480"/>
                        <Setter Property="Height" Value="360"/>
                    </Style>
                </ListBox.ItemContainerStyle>
                <!-- Slide images, Update that path if necessary for your machine -->      
                <Image Source="..//images/Image1.jpg"/>
                <Image Source="..//images/Image2.jpg""/>
                <Image Source="..//images/Image3.jpg""/>
                <Image Source="..//images/Image4.jpg""/>
            </ListBox>

            <!-- Previous/Next buttons -->
            <Button x:Name="Previous" Grid.Column="0" Grid.Row="1" Content="Previous" Click="Nav_Click" />
            <Button x:Name="Next" Grid.Column="1" Grid.Row="1" Content="Next" Click="Nav_Click" />
        </Grid>

     Code Behind:

    public partial class Page : UserControl
        {
            public Page()
            {
                InitializeComponent();           
            }
           
            private void Nav_Click(object sender, RoutedEventArgs e)
            {
                Button s = sender as Button;
                if (s == this.Previous)
                    Show.SelectedIndex--;
                if(s == this.Next)
                    Show.SelectedIndex++;
                Show.ScrollIntoView(Show.SelectedItem);
            }

            private void SlideShow_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                Previous.IsEnabled = (0 < Show.SelectedIndex);
                Next.IsEnabled = (Show.SelectedIndex < Show.Items.Count - 1);
            }       
        }
     

     

    Tuesday, June 03, 2008 5:10 PM
  • Thanks for you answer - I will look into these.

    Alex

    Wednesday, June 04, 2008 3:40 AM
  • VS says that attached property "HorizontalScrollBarVisibility" and "VerticalScrollBarVisibility" was not found in type "Scroll Viewer"
    Friday, June 13, 2008 3:30 PM
  • Sorry I forgot to include the name space in last post.

    If you are using beta2, you need to define the countrols name space as following

     <UserControl x:Class="YourNameSpace.SlideShow"
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows">

    ..

    </UserControl>

    if you are using beta1

      <UserControl x:Class="YourNameSpace.SlideShow"
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls">

    ..

    </UserControl>

    Friday, June 13, 2008 3:42 PM
  • Now VS says: "Show" does not exist in the current context

    Friday, June 13, 2008 5:29 PM
  • Should be SlideShow.

    Or you change the XAML

    <ListBox x:Name="SlideShow" >

    to  

    <ListBox x:Name="Show" >

    Friday, June 13, 2008 5:33 PM
  •  

    It works. Thank youSmile
    Saturday, June 14, 2008 11:19 AM
  • hi sladapter why we need extra namespace declaration what is the reason bedhind this can you pls explain ?

     

    Wednesday, July 30, 2008 7:17 AM
  • That might a question for people from Microsoft. I have no idea why we need to do that other than you get compiling error if you don't.

    When we use most other controls from System.Windows assembly we never have to do this. But for some(not all) attached properties, such as VisualStateManager, ScrollbarVisibility etc, we need to do this.

     

    Wednesday, July 30, 2008 9:29 AM
  •  I'm trying to use sladapter's code but am getting an error message, referring to the ListBox control:

     "'SlideShow': member names cannot be the same as their enclosing type"

     This is what comes up in the g.cs file:

    public partial class SlideShow : System.Windows.Controls.UserControl {
           
            internal System.Windows.Controls.Grid RootLayout;
           
            internal System.Windows.Controls.ListBox SlideShow;
           
            internal System.Windows.Controls.Button Previous;
           
            internal System.Windows.Controls.Button Next;
           
            private bool _contentLoaded;

     

    All I've done is call the solution SlideShowTest and created an "images" directory in the web project.

    Any idea what I'm doing wrong?

     

    Thanks, ransomcat

    Monday, August 04, 2008 11:46 AM
  • If your UserControl is also called SlideShow, then you'd better to name the listbox within the UserControl to something else (such as x:Name="Show").

     

    Monday, August 04, 2008 11:52 AM
  • Every thing works fine but my images are not displayed

    Wednesday, September 17, 2008 9:00 AM
  • Build suceed but images are not displayed

    Wednesday, September 17, 2008 9:07 AM
  • Build suceed but i am getting runtime error

    unhandled error in silverlight 2 Application

    Clientbin/Debug/AdityaRocks.xap

    code:4001

    category:ImageError

    Message:A_GE_NETWORK_ERROR

     

    Wednesday, September 17, 2008 9:14 AM
  • Check your image path. First test with just one image in a UserControl.

     

     

     

    Wednesday, September 17, 2008 9:47 AM
  • Please check my code:

    <Grid HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="RootLayout">

    <Grid.ColumnDefinitions>

    <ColumnDefinition Width="Auto"/>

    <ColumnDefinition Width="Auto"/>

    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

    <RowDefinition Height="*"/>

    <RowDefinition Height="Auto"/>

    </Grid.RowDefinitions>

    <!-- ListBox slide display -->

    <ListBox x:Name="Show" Grid.ColumnSpan="2"

    Width="484" Height="364"

    SelectionChanged="SlideShow_SelectionChanged"

    controls:ScrollViewer.HorizontalScrollBarVisibility="Hidden"

    controls:ScrollViewer.VerticalScrollBarVisibility="Hidden"

    >

    <!-- Style to size all images to desired size -->

    <ListBox.ItemContainerStyle>

    <Style TargetType="ListBoxItem">

    <Setter Property="Width" Value="480"/>

    <Setter Property="Height" Value="360"/>

    </Style>

    </ListBox.ItemContainerStyle>

    <!-- Slide images, Update that path if necessary for your machine -->

    <Image Source="..//images/Image1.jpg" Width="484" Height="364" />

    <Image Source="..//images/Image2.jpg" Width="484" Height="364" />

    <Image Source="..//images/Image3.jpg" Width="484" Height="364" />

    <Image Source="..//images/Image4.jpg" Width="484" Height="364" />

    </ListBox>

    <!-- Previous/Next buttons -->

    <Button x:Name="Previous" Grid.Column="0" Grid.Row="1" Content="Previous" Click="Nav_Click" />

    <Button x:Name="Next" Grid.Column="1" Grid.Row="1" Content="Next" Click="Nav_Click" />

    </Grid>

    Code behind

    public partial class ImageSlideShow : UserControl

    {

    public ImageSlideShow()

    {

    InitializeComponent();

    }

    private void Nav_Click(object sender, RoutedEventArgs e)

    {

    Button s = sender as Button;if (s == this.Previous)

    Show.SelectedIndex--;

    if (s == this.Next)

    Show.SelectedIndex++;

    Show.ScrollIntoView(Show.SelectedItem);

    }

    private void SlideShow_SelectionChanged(object sender, SelectionChangedEventArgs e)

    {

    Previous.IsEnabled = (0 < Show.SelectedIndex);

    Next.IsEnabled = (Show.SelectedIndex < Show.Items.Count - 1);

    }

    }

     IN design view i am able to see my image but when i run i get ablank page displayed.

    I have to directoriesL

    AdityaRocks and AdityaRocksWeb-->My images are placed in AdityaRocks dir

    Please respond

     

     

    Thursday, September 18, 2008 3:12 AM
  • I corrected my path and now it works fine >

    But one more doubt is that all the images are added statically but how to add dynamically to the list box

    Thursday, September 18, 2008 3:24 AM
  •  Use databinding. Set Listbox.ItemTemplate in Xaml, then set ListBox.ItemsSource  = YourImageObjectList;

                        <ListBox>
                            <ListBox.ItemTemplate>
                                <DataTemplate>                                                                   
                                      <Image Source="{Binding ImageURL}"   />                                                                                                                            
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>

    Thursday, September 18, 2008 9:16 AM
  • I added this to replace the default grid control and it doesn't work anymore.

     

    <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
        <StackPanel Orientation="Horizontal"/>
    </ItemsPanelTemplate>
     What i want to do is for the listview item to scroll horizontally. How can this be done? Thanks!
    Friday, September 19, 2008 5:22 AM
  • I think the problem might be the ListBox.ScrollIntoView function call not doing it's job correctly.

    The code here just to show how to put up a simple slide show. It is just some basic concept. There are a lot of ways to do this. You can create a much fancier slide show if you use storyboard and animation. 

    Take a look at the following blog and play with the demo, you can get some idea and code sample on how to achieve different visual effect when switching controls into the viewing area. The code was for switching different UserControls for the application.  But you can make it to work for switching different controls (any controls including image) into any container by modifying the code little bit (change transition function parameters from UserControl to FrameworkElement which is more generic)

    http://www.flawlesscode.com/post/2008/03/Silverlight-2-Navigating-Between-Xaml-Pages.aspx

     

     

    Friday, September 19, 2008 10:55 AM
  •  Can you tell me how to have slide show of the images, and once the pictures are displayed it should repeat the images.... i guess we need to use timer, but i dont knw how to use that can you please help me do that. Thanks in Advance.

    Friday, July 10, 2009 11:07 AM
  • Check your image path. First test with just one image in a UserControl.

     

    hi i have change my image path and there is the first image being showed in the uc, but when i run the application the images are not in there, can u tell me what to do with this problem?

     

    Monday, July 20, 2009 1:30 AM
  • Will this work in Silverlight 3? If so what tweaks to the code is needed?

    Thursday, August 13, 2009 3:36 PM
  • I got this working, but have a question on the timing. When you first open the file, then click the forward button, the System displays the default image. Instead, it should load the 2nd image. Any thoughts?

    Friday, August 14, 2009 9:52 PM
  • This seems to be a problem with the ListBox having a lack of focus until you click the button or click the ListBox itself.  Did you solve the problem?

    Sunday, October 18, 2009 1:18 PM