在Silverlight中显示图像(绑定)

时间:2012-05-25 13:30:14

标签: silverlight image upload

我需要解决以下问题:在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
    }
}

1 个答案:

答案 0 :(得分:0)

在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>