Part 5: Search Application (Detail View)

The last part of Search Application is the detail view. User comes here when they click on one of the images in the grid. Here is the functionality detail view provides…

1. ListBox control that has same images as GridView. Individual items in ListBox are of type ImageListBoxItem. I used the sample ListBox control that Silverlight 1.1 Alpha SDK shipped with a small fix.
2. ImageView control that can show the image in detail view. It also animates the image when user selects another image in listbox by rotating image and swapping it.  It also shows the URI from where Image came from.

User clicks on Grid View and listbox is populated and hooked SelectionChanged events..

void gridviewitem_Click(object sender, GridViewItemClickEventArgs e) 
{ 
    gridview.Items.Clear(); 
    this.Children.Remove(gridview); 
    gridview = null; 
    listbox = new ListBox(); 
    listbox.SelectionChanged += new EventHandler(listbox_SelectionChanged); 
    imageview = new ImageView(); 
    this.Children.Add(listbox); 
    this.Children.Add(imageview); 
    UpdateLayout(); 

    imageview.Source = e.ImageUri; 

    foreach (SearchService.Result r in searchresults) 
    { 
        string imageurl = r.Image.ImageURL.ToLower(); 
        if (imageurl.Contains(".jpg") || imageurl.Contains(".jpeg") || imageurl.Contains(".png")) 
            AddItemToList(r); 
    } 

    listbox.UpdateItems(); 

} 

void AddItemToList(SearchService.Result result) 
{ 
    ImageListBoxItem imagelistitem = new ImageListBoxItem(); 
    imagelistitem.Height = itemheight; 
    imagelistitem.Width = itemwidth; 
    imagelistitem.Source = new Uri(result.Image.ImageURL); 
    if (imagelistitem.ValidImage == true) 
        listbox.Items.Add(imagelistitem); 
} 

void listbox_SelectionChanged(object sender, EventArgs e) 
{ 
    ImageListBoxItem selecteditem = (ImageListBoxItem)listbox.SelectedItem; 
    imageview.Source = selecteditem.Source; 
    imageview.Description = selecteditem.Source.ToString(); 
}

Source code for ImageListBoxItem.xaml

<Canvas xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Width="100" 
        Height="100" 
        x:Name="rootCanvas" Background="#FF080808" 
        > 
    <Image x:Name="imageThumbnail" Width="84" Height="84" Canvas.Left="8" Canvas.Top="8"/> 
    <Rectangle Stroke="#FF757575" StrokeThickness="3" x:Name="rectborder" Width="100" Height="100"/> 
</Canvas>

Source code for ImageListBoxItem.xaml.cs

using System; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Ink; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes; 

namespace SearchApplication 
{ 
    public class ImageListBoxItem : Control 
    { 
        /// <summary> 
        /// Private Variables 
        /// </summary> 
        private Canvas rootCanvas; 
        private Image imageThumbnail; 
        private bool _validImage = true; 
        private SolidColorBrush _originalBackground; 
        private Rectangle rectBorder; 

        public ImageListBoxItem() 
        { 
            System.IO.Stream s = this.GetType().Assembly.GetManifestResourceStream("SearchApplication.ImageListBoxItem.xaml"); 
            rootCanvas = (Canvas) this.InitializeFromXaml(new System.IO.StreamReader(s).ReadToEnd()); 
            imageThumbnail = (Image) rootCanvas.FindName("imageThumbnail"); 
            rectBorder = (Rectangle)rootCanvas.FindName("rectborder"); 
            this.Loaded += new EventHandler(ImageListBoxItem_Loaded); 
            imageThumbnail.ImageFailed += new ErrorEventHandler(imageThumbnail_ImageFailed); 
            _originalBackground = rootCanvas.Background as SolidColorBrush; 
            rootCanvas.MouseEnter += new MouseEventHandler(rootCanvas_MouseEnter); 
            rootCanvas.MouseLeave += new EventHandler(ImageListBoxItem_MouseLeave); 
        } 

        void ImageListBoxItem_MouseLeave(object sender, EventArgs e) 
        { 
            rootCanvas.Background = _originalBackground; 
            this.Height = 100; 
            this.Width = 100; 
        } 

        void rootCanvas_MouseEnter(object sender, MouseEventArgs e) 
        { 
            rootCanvas.Background = new SolidColorBrush(Colors.Gray); 
            this.Height = 110; 
            this.Width = 110; 
        } 

        void imageThumbnail_ImageFailed(object sender, ErrorEventArgs e) 
        { 
            _validImage = false; 
        } 

        ///Source Property 
        public Uri Source 
        { 
            get { return imageThumbnail.Source; } 
            set 
            { 
                imageThumbnail.Source = value; 
                UpdateLayout(); 
            } 
        } 

        public bool ValidImage 
        { 
            get { return _validImage; } 
        } 

        /// <summary> 
        /// General Layout Functionality 
        /// </summary> 

        void ImageListBoxItem_Loaded(object sender, EventArgs e) 
        { 
            UpdateLayout(); 
        } 

        public new double Height 
        { 
            get { return ((FrameworkElement)this).Height; } 
            set 
            { 
                ((FrameworkElement)this).Height = value; 
                UpdateLayout(); 
            } 
        } 

        public new double Width 
        { 
            get { return ((FrameworkElement)this).Width; } 
            set 
            { 
                ((FrameworkElement)this).Width = value; 
                UpdateLayout(); 
            } 
        } 

        private void UpdateLayout() 
        { 
            rootCanvas.Height = Height; 
            rootCanvas.Width = Width; 
            imageThumbnail.Height = Height - 16; 
            imageThumbnail.Width = Width - 16; 
            rectBorder.Height = Height; 
            rectBorder.Width = Width; 

        } 
    } 
} 

Source code for ImageView.xaml

<Canvas xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Width="600" 
        Height="700" 
        x:Name="rootCanvas" 
        Background="Black" 
        > 
  <Canvas.Resources> 
    <Storyboard x:Name="flip"> 
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imageDetail" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"> 
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/> 
        <SplineDoubleKeyFrame KeyTime="00:00:00.2500000" Value="0"/> 
        <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/> 
      </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
    <Storyboard x:Name="fakeFlip"> 
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="txtDetail" Storyboard.TargetProperty="(UIElement.Opacity)"> 
        <SplineDoubleKeyFrame KeyTime="00:00:00.2500000" Value="0"/> 
      </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
  </Canvas.Resources> 
  <Image x:Name="imageDetail" Width="600" Height="600" Canvas.Left="0" Canvas.Top="0" RenderTransformOrigin="0.5,0.5" Stretch="Uniform" > 
    <Image.RenderTransform> 
      <TransformGroup> 
        <ScaleTransform ScaleX="1" ScaleY="1"/> 
      </TransformGroup> 
    </Image.RenderTransform> 
  </Image> 
  <TextBlock x:Name="txtDetail" Width="600" Height="100" Canvas.Left="0" Canvas.Top="600" TextWrapping="Wrap" Foreground="#FFFFEEEE"/> 
</Canvas>

Source code for ImageView.xaml.cs

using System; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Ink; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes; 

namespace SearchApplication 
{ 
    public class ImageView : Control 
    { 
        private Canvas rootCanvas; 
        private TextBlock txtDetail; 
        private Image imageDetail; 
        private Storyboard flip; 
        private Storyboard fakeFlip; 
        private Uri _source; 

        public ImageView() 
        { 
            System.IO.Stream s = this.GetType().Assembly.GetManifestResourceStream("SearchApplication.ImageView.xaml"); 
            rootCanvas = (Canvas) this.InitializeFromXaml(new System.IO.StreamReader(s).ReadToEnd()); 
            txtDetail = (TextBlock)rootCanvas.FindName("txtDetail"); 
            imageDetail = (Image)rootCanvas.FindName("imageDetail"); 
            flip = (Storyboard)rootCanvas.FindName("flip"); 
            fakeFlip = (Storyboard)rootCanvas.FindName("fakeFlip"); 
            fakeFlip.Completed += new EventHandler(fakeFlip_Completed); 
            flip.Completed += new EventHandler(flip_Completed); 
            this.Loaded += new EventHandler(ImageView_Loaded); 
            imageDetail.ImageFailed += new ErrorEventHandler(imageDetail_ImageFailed); 
        } 

        void imageDetail_ImageFailed(object sender, ErrorEventArgs e) 
        { 
            this.imageDetail.Source = null; 
        } 

        void flip_Completed(object sender, EventArgs e) 
        { 
            fakeFlip.Stop(); 
            flip.Stop(); 
            txtDetail.Opacity = 1; 
        } 

        void fakeFlip_Completed(object sender, EventArgs e) 
        { 
            imageDetail.Source = _source; 
        } 

        public Uri Source 
        { 
            get { return imageDetail.Source; } 
            set 
            { 
                flip.Begin(); 
                fakeFlip.Begin(); 
                _source = value; 
            } 
        } 

        public string Description 
        { 
            get { return txtDetail.Text; } 
            set { txtDetail.Text = value; } 
        } 

        /// <summary> 
        /// Typical Layout methods 
        /// </summary> 
 
        void ImageView_Loaded(object sender, EventArgs e) 
        { 
            UpdateLayout(); 
        } 

        public new double Height 
        { 
            get { return ((FrameworkElement)this).Height; } 
            set 
            { 
                ((FrameworkElement)this).Height = value; 
                UpdateLayout(); 
            } 
        } 

        public new double Width 
        { 
            get { return ((FrameworkElement)this).Width; } 
            set 
            { 
                ((FrameworkElement)this).Width = value; 
                UpdateLayout(); 
            } 
        } 

        private void UpdateLayout() 
        { 
            rootCanvas.Height = Height; 
            rootCanvas.Width = Width; 
            txtDetail.Width = Width; 
            imageDetail.Width = Width; 
            txtDetail.Height = Height / 7; 
            imageDetail.Height = txtDetail.Height * 6; 
        } 

    } 
}