Professional, Software

Part 5: Better Image Detail View

Technorati Tags: ,,

In Part 4, I was having some problems switching the thumbnail to full size image. I made some small changes to make it look better.

  1. I changed root layout panel from StackPanel to Grid.
  2. I also used animation (animating opacity ) to fade out thumbnail and fade in full size image.
  3. I added a progressbar control , but I only show it if I get downloadprogress event where download is greather than 0. otherwise it was showing progress with value 0 and before it could show anything, it was hiding it again.


1: <UserControl x:Class=”Search.DetailImage”2: xmlns=”; 3: xmlns : x=”; 4: xmlns:d=”; 5: xmlns:mc=”; 6: xmlns:control=”clr-namespace:Search;assembly=Search”7: xmlns:mycontrol=”clr-namespace:MyControls;assembly=MyControls”8: mc:Ignorable=”d” d:DesignWidth=”300″ d:DesignHeight=”300″ 9: >10: <UserControl.Resources>11: <control:UriConverter x:Key=”uriconverter”/>12: <control:ImageSourceConverter x:Key=”imagesourceconverter”/>13: <Storyboard x:Name=”ShowFullImage”>14: <DoubleAnimationUsingKeyFrames Storyboard.TargetName=”fullimage” Storyboard.TargetProperty=”(UIElement.Opacity)” BeginTime=”00:00:00″>15: <SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0″/>16: <SplineDoubleKeyFrame KeyTime=”00:00:01″ Value=”1″/>17: </DoubleAnimationUsingKeyFrames>18: <DoubleAnimationUsingKeyFrames Storyboard.TargetName=”image” Storyboard.TargetProperty=”(UIElement.Opacity)” BeginTime=”00:00:00″>19: <SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”1″/>20: <SplineDoubleKeyFrame KeyTime=”00:00:01″ Value=”0″/>21: </DoubleAnimationUsingKeyFrames>22: </Storyboard>23:  24: </UserControl.Resources>25: <Grid x:Name=”LayoutRoot” >26: <Grid.RowDefinitions>27: <RowDefinition Height=”120″/>28: <RowDefinition Height=”*”/>29: </Grid.RowDefinitions>30: <Border BorderThickness=”2,2,2,2″ CornerRadius=”5,5,5,5″ Grid.Row=”0″ BorderBrush=”#FF000000″ >31: <StackPanel >32: <StackPanel Orientation=”Horizontal”>33: <TextBlock Text=”URL: “ FontWeight=”Bold” Margin=”10,0,0,0″/>34: <HyperlinkButton Content=”Link to Image” 35: FontSize=”15″ 36: NavigateUri=”{Binding Image.ImageURL,Converter={StaticResource uriconverter}}”37: TargetName=”_blank”/>38: </StackPanel>39: <StackPanel Orientation=”Horizontal”>40: <TextBlock Text=”Width (px): “ FontWeight=”Bold” Margin=”10,0,0,0″/>41: <TextBlock x:Name=”txtWidth” Text=”{Binding Image.ImageWidth}”/>42: </StackPanel>43: <StackPanel Orientation=”Horizontal”>44: <TextBlock Text=”Height (px):” FontWeight=”Bold” Margin=”10,0,0,0″/>45: <TextBlock x:Name=”txtHeight” Text=”{Binding Image.ImageHeight}”/>46: </StackPanel>47: <StackPanel Orientation=”Horizontal”>48: <TextBlock Text=”Size: (Bytes):” FontWeight=”Bold” Margin=”10,0,0,0″/>49: <TextBlock x:Name=”txtSize” Text=”{Binding Image.ImageFileSize}”/>50: </StackPanel> 51: <mycontrol:ProgressBar 52: x:Name=”progress” Height=”20″ 53: Margin=”0,5,0,5″ 54: VerticalAlignment=”Center” HorizontalAlignment=”Center” 55: Visibility=”Collapsed”/>56: </StackPanel>57: </Border>58: <Border 59: BorderThickness=”2,2,2,2″ CornerRadius=”5,5,5,5″ 60: BorderBrush=”#FF000000″ 61: Margin=”0,20,0,0″ x:Name=”imageborder” Grid.Row=”1″>62: <Grid>63: <Image 64: Margin=”5,5,5,5″ Stretch=”Fill” 65: Source=”{Binding Image.ThumbnailURL , Converter={StaticResource imagesourceconverter}}”66: RenderTransformOrigin=”0.5,0.5″ 67: x:Name=”image” 68: HorizontalAlignment=”Stretch”>69: <Image.RenderTransform>70: <TransformGroup>71: <ScaleTransform/>72: <SkewTransform/>73: <RotateTransform/>74: <TranslateTransform/>75: </TransformGroup>76: </Image.RenderTransform>77: </Image>78: <Image 79: Margin=”5,5,5,5″ Stretch=”Fill” 80: RenderTransformOrigin=”0.5,0.5″ 81: x:Name=”fullimage” 82: HorizontalAlignment=”Stretch”>83: <Image.RenderTransform>84: <TransformGroup>85: <ScaleTransform/>86: <SkewTransform/>87: <RotateTransform/>88: <TranslateTransform/>89: </TransformGroup>90: </Image.RenderTransform>91: </Image>92: </Grid>93: </Border>94: </Grid>95: </UserControl>


1: using System;2: using System.Windows;3: using System.Windows.Controls;4: using System.Windows.Media.Imaging;5: using Search.SearchService;6: using System.Net;7:  8: namespace Search9: {10: public partial class DetailImage : UserControl11: {12: #region Public Members13:  14: public DetailImage()15: {16: InitializeComponent();17: }18:  19: //sets the SearchResult. The reason why I had to expose this is because 20: //I need to know when the data context is changing so that I can do necessary21: //work to switch images from thumbnail to fullsize22: public Result SearchResult23: {24: get 25: {26: return _searchresult;27: }28: set 29: {30: _searchresult = value;31: //set the datacontext for the control32: DataContext = value;33: fullimage.Opacity = 0;34: image.Opacity = 100;35: BitmapImage bi = new BitmapImage(new Uri(_searchresult.Image.ImageURL, UriKind.Absolute));36: bi.DownloadProgress += new DownloadProgressEventHandler(bi_DownloadProgress);37: fullimage.Source = bi;38: }39: }40:  41: #endregion42:  43: #region Private Members44:  45: //when the full image is downloaded 46: //I switch the thumbnail image in detail view for full size47: void bi_DownloadProgress(object sender, DownloadProgressEventArgs e)48: {49:  50: if (e.Progress > 0 && e.Progress < 1)51: {52: progress.Visibility = Visibility.Visible;53: progress.Value = e.Progress * 100;54: }55: if (e.Progress == 1)56: {57: progress.Value = 100;58: ShowFullImage.Begin();59: progress.Visibility = Visibility.Collapsed;60: }61: }62:  63: Search.SearchService.Result _searchresult;64: #endregion65:  66: }67: }

here is the working project


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s