title: ItemsControl clickable items
body: <p>I've made an app that streams video from a video device and added the ability to take screenshots of the video, when a capture is taken it shows up in the ItemsControl with the rest of the captures taken.</p>
  
  <p>My question is how can i make each item "image" shown in the ItemsControl clickable so i can preview it ?</p>
  
  <p>I store the image details in a list :</p>
  
  <pre><code>List&lt;ImageDetails&gt; images = new List&lt;ImageDetails&gt;();
  </code></pre>
  
  <p>This is the Xaml code of the ItemsControl :</p>
  
  <p>Edit : I wrapped everything inside a button template inside the datatemplate and i called a mousebuttonclickup event on the button but nothing happens.
  Did i misplaced the button template ? </p>
  
  <pre><code> &lt;ItemsControl Name="ImageList" ItemsSource="{Binding ImageList}" &gt;
              &lt;ItemsControl.ItemTemplate&gt;
                  &lt;DataTemplate&gt;
                      &lt;Button Width="auto" Height="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MouseLeftButtonUp="Button_MouseLeftButtonUp"&gt;
                          &lt;Button.Template&gt;
                              &lt;ControlTemplate&gt;
                                  &lt;Border x:Name="imagecanv" BorderThickness="1" BorderBrush="#FFD0D1D7" Padding="5" Margin="5,5,0,0" MouseLeftButtonUp="imagecanv_MouseLeftButtonUp"&gt;
                                      &lt;StackPanel Orientation="Horizontal"&gt;
                                          &lt;!--image and dimensions--&gt;
                                          &lt;Grid x:Name="picgrid" Width="88" Height="55"&gt;
                                              &lt;Image x:Name="imgcontainer"  Source="{Binding Path}" MouseLeftButtonUp="imgcontainer_MouseLeftButtonUp"/&gt;
                                              &lt;TextBlock Background="#B2000000" Foreground="White" Height="16" TextAlignment="Center" VerticalAlignment="Bottom"&gt;
                                                  &lt;TextBlock.Text&gt;
                                                      &lt;MultiBinding StringFormat="{}{0}x{1}"&gt;
                                                          &lt;Binding Path="Height"/&gt;
                                                          &lt;Binding Path="Width"/&gt;
                                                      &lt;/MultiBinding&gt;
                                                  &lt;/TextBlock.Text&gt;
                                              &lt;/TextBlock&gt;
                                          &lt;/Grid&gt;
                                          &lt;!--name, type and size--&gt;
                                          &lt;StackPanel Orientation="Vertical" Margin="5,0,0,0" VerticalAlignment="Center"&gt;
                                              &lt;TextBlock Name="ImageName" Margin="1" Foreground="#FF787878" Text="{Binding FileName}"/&gt;
                                              &lt;TextBlock Name="ImageType" Margin="1" Foreground="#FF787878"&gt;
                                                  &lt;TextBlock.Text&gt;
                                                      &lt;MultiBinding StringFormat="Type: {0}"&gt;
                                                          &lt;Binding Path="Extension"/&gt;
                                                      &lt;/MultiBinding&gt;
                                                  &lt;/TextBlock.Text&gt;
                                              &lt;/TextBlock&gt;
                                              &lt;TextBlock Name="ImageSize" Margin="1" Foreground="#FF787878"&gt;
                                                  &lt;TextBlock.Text&gt;
                                                      &lt;MultiBinding StringFormat="Size: {0} Bytes"&gt;
                                                          &lt;Binding Path="Size"/&gt;
                                                      &lt;/MultiBinding&gt;
                                                  &lt;/TextBlock.Text&gt;
                                              &lt;/TextBlock&gt;
                                          &lt;/StackPanel&gt;
                                      &lt;/StackPanel&gt;
                                  &lt;/Border&gt;
                                  &lt;/ControlTemplate&gt;
                                      &lt;/Button.Template&gt;
                                          &lt;/Button&gt;
                                       &lt;/DataTemplate&gt;
              &lt;/ItemsControl.ItemTemplate&gt;
              &lt;ItemsControl.ItemsPanel&gt;                   
                  &lt;ItemsPanelTemplate &gt;                       
                      &lt;StackPanel x:Name="stackeditems" Orientation="Horizontal" /&gt;
                  &lt;/ItemsPanelTemplate&gt;
              &lt;/ItemsControl.ItemsPanel&gt;
              &lt;ItemsControl.Template&gt;
                  &lt;ControlTemplate&gt;
                      &lt;ScrollViewer Name="Scroller" Padding="{TemplateBinding Padding}" HorizontalScrollBarVisibility="Visible" &gt;
                          &lt;ItemsPresenter /&gt;
                      &lt;/ScrollViewer&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/ItemsControl.Template&gt;               
          &lt;/ItemsControl&gt;
  </code></pre>
  
  <p>The click event: </p>
  
  <pre><code>private void Button_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
      {
          MessageBox.Show("Clickable!");
      }
  </code></pre>
  
  <p>This is the code behind for viewing the captures :</p>
  
  <pre><code> private void capture_Click(object sender, RoutedEventArgs e)
      {
          // Create a Bitmap of the same dimension of panelVideoPreview (Width x Height)
          using (Bitmap bitmap = new Bitmap(viewpanel.Width, viewpanel.Height))
          {
              using (Graphics g = Graphics.FromImage(bitmap))
              {
                  // Get the paramters to call g.CopyFromScreen and get the image
                  System.Drawing.Rectangle rectanglePanelVideoPreview = viewpanel.Bounds;
                  System.Drawing.Point sourcePoints = viewpanel.PointToScreen(new System.Drawing.Point(viewpanel.ClientRectangle.X, viewpanel.ClientRectangle.Y));
                  g.CopyFromScreen(sourcePoints, System.Drawing.Point.Empty, rectanglePanelVideoPreview.Size);
              }
  
              string strGrabFileName = String.Format(@"d:\app result\\Snapshot_{0:yyyyMMdd_hhmmss}.jpg", DateTime.Now);
  
              try
              {
                  bitmap.Save(strGrabFileName, System.Drawing.Imaging.ImageFormat.Jpeg);
                  imageview(strGrabFileName);
              }
              catch (Exception)
              {
  
  
              }                
          } 
      }
  
   public void imageview (string file)
      {          
  
              ImageDetails id = new ImageDetails()
              {
                  Path = file,
                  FileName = System.IO.Path.GetFileName(file),
                  Extension = System.IO.Path.GetExtension(file)
              };
  
              BitmapImage img = new BitmapImage();
              img.BeginInit();
              img.CacheOption = BitmapCacheOption.OnLoad;
              img.UriSource = new Uri(file, UriKind.Absolute);
              img.EndInit();
              id.Width = img.PixelWidth;
              id.Height = img.PixelHeight;
  
              // I couldn't find file size in BitmapImage
              FileInfo fi = new FileInfo(file);
              id.Size = fi.Length;
              images.Add(id);
              //images.Insert(i, id);
              ImageList.ItemsSource = null;
              ImageList.ItemsSource = images;
      }
  </code></pre>