在Silverlight中顯示圖像（綁定）

Question

我需要解決以下問題：在Silverlight應用程序中，用戶需要能夠將圖像上傳到客戶端（而不是服務器）。這些圖像應該顯示在一個wrappanel中。

我是Silverlight的一個完整的新手，所以你可能會在代碼中發現一些錯誤。下面我發佈了代碼，我希望它足以回答這個問題！

App.xaml中：

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:local="clr-namespace:Dojo_3_wi10b012.ViewModel" 
      x:Class="Dojo_3_wi10b012.App" 
      > 
    <Application.Resources> 
     <local:ViewModel x:Key="viewModel"/> 
    </Application.Resources> 
</Application> 

MainPage.xaml中：

<UserControl x:Class="Dojo_3_wi10b012.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"   
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" 
    xmlns:local="clr-namespace:Dojo_3_wi10b012.ViewModel" 

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    d:DesignHeight="300" d:DesignWidth="400"> 

    <Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource viewModel}"> 
     <sdk:Frame Height="350" Width="450" 
        Name="frameContainer" Margin="0,0,0,0"> 
     </sdk:Frame> 

     <Button Content="Add Image" Command="{Binding Path=AddImageCommand}" Height="23" HorizontalAlignment="Left" Margin="468,454,0,0" Name="buttonAddImage" VerticalAlignment="Top" Width="75" /> 

    </Grid> 
</UserControl> 

Gallery.xaml：

<navigation:Page x:Class="Dojo_3_wi10b012.View.Gallery" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

      xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" 
      xmlns:local="clr-namespace:Dojo_3_wi10b012.ViewModel" 

      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      mc:Ignorable="d" 

      d:DesignWidth="640" d:DesignHeight="480" 
      Title="Gallery Page" 
      NavigationCacheMode="Required" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"> 
    <!-- trying to implement Mr. Eckkrammer's hint (wiki)--> 
    <UserControl.Resources> 
     <DataTemplate x:Key="galleryTemplate"> 
      <Image> 
       <Image.Source> 
        <BitmapImage UriSource="{Binding Image}"/> 
       </Image.Source> 
      </Image> 
     </DataTemplate> 
    </UserControl.Resources> 
    <!-- END OF trying to implement Mr. Eckkrammer's hint (wiki)--> 

     <Grid x:Name="LayoutRoot" Height="350" Width="450" Background="Beige" DataContext="{StaticResource viewModel}"> 
     <!-- "First attempt 
     <ItemsControl ItemsSource="{Binding ElementName=ImageDescrList, Path=Image ,Mode=TwoWay}" > 

      <ScrollViewer Width="449" Height="349" Margin="1,1,0,0"> 
       <toolkit:WrapPanel Orientation="Horizontal" ItemWidth="90" ItemHeight="90" Width="Auto" /> 
      </ScrollViewer> 
     </ItemsControl> 

     --> 

     <!-- 2nd attempt (Mr. Eckkrammer's hint (wiki): --> 
     <ItemsControl ItemsSource="{Binding ElementName=ImageDescrList}" ItemTemplate="{StaticResource galleryTemplate}"> 
      <ScrollViewer Width="449" Height="349" Margin="1,1,0,0"> 
       <toolkit:WrapPanel Orientation="Horizontal" ItemWidth="90" ItemHeight="90" Width="Auto" /> 
      </ScrollViewer> 
     </ItemsControl> 


    </Grid> 
</navigation:Page> 

ImageDescription.cs：

namespace Dojo_3_wi10b012.Model 
{ 
    public class ImageDescription : INotifyPropertyChanged 
    { 

     private string _description; 
     private BitmapImage _image; 

     public string Description 
     { 
      get { return _description; } 
      set 
      { 
       _description = value; 
       NotifyPropertyChanged("Description"); 
      } 
     } 

     public BitmapImage Image 
     { 
      get { return _image; } 
      set 
      { 
       _image = value; 
       NotifyPropertyChanged("Image"); 
      } 
     } 

     public event PropertyChangedEventHandler PropertyChanged; 

     public void NotifyPropertyChanged(string propName) 
     { 
      if (PropertyChanged != null) 
       PropertyChanged(this, new PropertyChangedEventArgs(propName)); 
     } 
    } 
} 

個

ViewModel.cs：

using System; 
using System.Net; 
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; 
using System.IO; 
using System.IO.IsolatedStorage; 
using System.Windows.Media.Imaging; 
using System.Collections; 
using System.Collections.ObjectModel; 
using Dojo_3_wi10b012.Model; 
using System.ComponentModel; 


namespace Dojo_3_wi10b012.ViewModel 
{ 
    public class ViewModel : INotifyPropertyChanged 
    { 
     public RelayCommand AddImageCommand { get; private set; } 
     private ObservableCollection<ImageDescription> _imageDescrList = new ObservableCollection<ImageDescription>(); 

     #region properties 

     public ObservableCollection<ImageDescription> ImageDescrList 
     { 
      get { return _imageDescrList; } 
      set 
      { 
       _imageDescrList = value; 
       NotifyPropertyChanged("ImageDescrList"); 
      } 
     } 

     #endregion 

     #region Constructor 

     public ViewModel() 
     { 
      AddImageCommand = new RelayCommand(AddImage); 
      AddImageCommand.IsEnabled = true; 
     } 
     #endregion 

     #region private methods 

     private void AddImage() 
     { 
      //initial ideas: (copy paste + modified from source: http://msdn.microsoft.com/en-us/library/cc221415(v=vs.95).aspx) 

      // Create an instance of the open file dialog box. 
      OpenFileDialog openFileDialog1 = new OpenFileDialog(); 

      // Set filter options and filter index. 
      openFileDialog1.Filter = "JPEG Files (.jpg)|*.jpg|PNG Files (.png)|*.png|GIF Files (.gif)|*.gif|BMP Files (.bmp)|*.bmp|TIFF Files (.tiff)|*.tiff"; 
      openFileDialog1.FilterIndex = 1; 


      openFileDialog1.Multiselect = false; 

      // Call the ShowDialog method to show the dialog box. 
      bool? userClickedOK = openFileDialog1.ShowDialog(); 

      // Process input if the user clicked OK. 
      if (userClickedOK == true) 
      { 

       // Open the selected file to read. 
       using (var filestream = openFileDialog1.File.OpenRead()) 
       { 
        var buffer = new byte[filestream.Length]; 
        filestream.Read(buffer, 0, buffer.Length); 
        //add the image to our list of images 
        MemoryStream ms = new MemoryStream(buffer, 0, buffer.Length); 
        BitmapImage temp = new BitmapImage(); 
        temp.SetSource(ms); 

        ImageDescrList.Add(
         new ImageDescription() 
         { 
          // Description = filestream.Name, 
          Description="Default Description", 
          Image = temp 
         } 
        ); 
        ms.Close(); 
        filestream.Close(); 

       } 

      } 

     } 
     #endregion 

     #region event Handler (property changed) 
     public event PropertyChangedEventHandler PropertyChanged; 

     protected void NotifyPropertyChanged(string propertyName) 
     { 
      if (PropertyChanged != null) 
      { 
       PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
      } 
     } 
     #endregion 
    } 
} 

Answer 1

試試這個在您的galleryTemplate模板的圖像源綁定到你的位圖：

<DataTemplate x:Key="galleryTemplate"> 
    <Image Source="{Binding Image}"/> 
</DataTemplate> 

你似乎是試圖綁定一個位圖UriSource爲位圖，而不是（這將期待一個URI）：

<DataTemplate x:Key="galleryTemplate"> 
     <Image> 
      <Image.Source> 
       <BitmapImage UriSource="{Binding Image}"/> 
      </Image.Source> 
     </Image> 
</DataTemplate>