Re: How create a slideshow of employee bios?

06-09-2008 8:56 AM |

Hello, there's no built-in slide show Control, but there're a lot of solutions to this problem. Here I have a simple sample.

Let's say you have a data source class:

 public class Employee
{
public int Id { get; set; }
public string ImageUrl { get; set; }
}

 

You can create an invisible ListBox to store a list of employees. You use a ContentControl with an Image to display the employee's photo. You can add other elements to the ContentControl to display information such as name if you want. You can use two Buttons to control the slide show.

<UserControl x:Class="SimpleSliderShow.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="600" Loaded="UserControl_Loaded">
<UserControl.Resources>
<DataTemplate x:Key="PhotoTemplate">
<Grid>
<Image Source="{Binding ImageUrl}" MouseLeftButtonDown="Image_MouseLeftButtonDown"/>
</Grid>
</DataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<ListBox x:Name="listbox1" SelectionChanged="listbox1_SelectionChanged" Visibility="Collapsed"/>
<Button Height="26" HorizontalAlignment="Left" Margin="232,0,0,114" VerticalAlignment="Bottom" Width="73" Content="Previous" x:Name="ButtonPrevious" Click="ButtonPrevious_Click"/>
<Button Height="26" HorizontalAlignment="Right" Margin="0,0,269,114" VerticalAlignment="Bottom" Width="77" Content="Next" x:Name="ButtonNext" Click="ButtonNext_Click"/>
<ContentControl Height="400" HorizontalAlignment="Stretch" VerticalAlignment="Top" Content="{Binding}" Margin="197,24,203,0" Width="400" ContentTemplate="{StaticResource PhotoTemplate}" x:Name="SlideShow"/>
</Grid>
</UserControl>

 

Now we need to data bind the employees to the ListBox. Here I just create some fake data.

 public Page()
{
InitializeComponent();
List<Employee> source = new List<Employee>();
source.Add(new Employee() { Id = 0, ImageUrl = "CC Particle.png" });
source.Add(new Employee() { Id = 1, ImageUrl = "Person.jpg" });
listbox1.ItemsSource = source;
}

 

In the ListBox's SelectionChanged event, you can set the ContentControl's DataTemplate to the selected item. Note the selected item is not a ListBoxItem, but rather the data source (an employee).

 private void listbox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (listbox1.SelectedIndex >= 0)
{
SlideShow.DataContext = listbox1.SelectedItem;
}
}

 

Now handle the Buttons's Click event to navagate through the ListBox.

 private void ButtonPrevious_Click(object sender, RoutedEventArgs e)
{
if (listbox1.SelectedIndex > 0)
{
listbox1.SelectedIndex = listbox1.SelectedIndex - 1;
}
}

private void ButtonNext_Click(object sender, RoutedEventArgs e)
{
if (listbox1.SelectedIndex < listbox1.Items.Count - 1)
{
listbox1.SelectedIndex = listbox1.SelectedIndex + 1;
}
}

 

In UserControl.Loaded event, you can set the ListBox's SelectedIndex to 0, so the first employee will be selected.

 private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
listbox1.SelectedIndex = 0;
}

 

Finally, handle the Image's MouseLeftButtonDown event to navigate the web page.

 private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Image img = (Image)sender;
Employee emp = (Employee)img.DataContext;
HtmlPage.Window.Navigate(new Uri("http://youraspxfile.aspx?Id=" + emp.Id.ToString()));
}

 

If you're just starting learning Silverlight, this may sound a little complex. I suggest you to begin from the learning section to learn the basics. The most important part is data binding. Also this simple sample doesn't have any transition effect. You need to learn animation if you want to create transition effects.