Image Custom Control in Silverlight

Priya Linge
13y
9.2k
0
0

Article

Introduction:

With the help of this control we can Save, View and Delete images. Here an image control has MenuItems i.e SaveMenuitem, ViewMenuItem and DeleteMenuItem. On the click events of these menuitems, we can perform the operation we want.

We can use this imageCustom control in our Silverlight application.

Create Image Custom Control

1. First select one Silverlight application name, such as ImageCustomecontrol. Here we can have an ImageControl.Xaml file as below.

<x:Class="imagecustomecontrol.imagecontrol">

            <toolkit:ContextMenuService.ContextMenu>
                <toolkit:ContextMenu >
                    <toolkit:MenuItem Header="Add Image" DisplayMemberPath="HeaderText" x:Name="savemenuitem" Click="savemenuitem_Click"/>
                    <toolkit:MenuItem Header="View Image" DisplayMemberPath="HeaderText" x:Name="viewmenuitem" Click="viewmenuitem_Click"/>
                    <toolkit:MenuItem Header="Delete Image" DisplayMemberPath="HeaderText" x:Name="deletemenuitem" Click="deletemenuitem_Click"/>
                </toolkit:ContextMenu>
            </toolkit:ContextMenuService.ContextMenu>

        </Image>
    </Grid>

In CS code we have methods for an event, so we can use this event with the image controls anywhere in our application.

The Imagecontrol.cs file looks like as follows:

   public partial class imagecontrol : UserControl
    {
        //Declare Bytes for Image
        //Declare Delegate for event
        //Declare event as public
        public byte[] ProfileImageData;
        BitmapImage bi;
        public delegate void ClickHandler(object sender, EventArgs e);
        public event ClickHandler SaveImageClick;
        public event ClickHandler DeleteImageClick;
        public event ClickHandler ViewImageClick;

        void RaiseSaveClick(RoutedEventArgs e)
        {
            if (SaveImageClick != null)
            {
                SaveImageClick(this, e);
            }

}

        void RaiseDeleteClick(RoutedEventArgs e)
        {
            if (DeleteImageClick != null)
            {
                DeleteImageClick(this, e);
            }
        }
        void RaiseViewClick(RoutedEventArgs e)
        {
            if (ViewImageClick != null)
            {
                ViewImageClick(this, e);
            }
        }

        public imagecontrol()
        {
            InitializeComponent();

}

        public void savemenuitem_Click(object sender, RoutedEventArgs e)
        {
            OpenFileDialog openfiledialog = new OpenFileDialog();
            openfiledialog.Filter = "Images (*.jpg, *.png, *.bmp)|*.jpg;*.png;*.bmp";
            openfiledialog.Multiselect = false;

            bool? userclikedok = openfiledialog.ShowDialog();
            if (userclikedok == true)
            {
                Stream stream = openfiledialog.File.OpenRead();
                BinaryReader binary = new BinaryReader(stream);
                ProfileImageData = binary.ReadBytes((int)stream.Length);
                stream.Position = 0;
                bi = new BitmapImage();
                bi.SetSource(stream);
                Myimage.Source = bi;
                stream.Close();
            }
           RaiseSaveClick(e);

}

        public void viewmenuitem_Click(object sender, RoutedEventArgs e)
        {
          RaiseViewClick(e);
        }

        public void deletemenuitem_Click(object sender, RoutedEventArgs e)
        {
            RaiseDeleteClick(e);
        }

}

2. Now build the application; we get an output assembly of imagecustomcontrol application

like imagecustomecontrol.dll. With the help of this DLL we can get the imageCutome control in our application.

Access the Image Custom Control in other Silverlight application

Other Silverlight application, let's say TestingAppliation. Then add this dll to the application as below.

TestingAppliation -> Reference -> Add Reference -> Browse -> imagecustomecontrol.dll.

Now you can access the imageCustom Control in Testing application as follow.

<x:Class="Testing.MainPage">
   < xmlns:my="clr-namespace:imagecustomecontrol;assembly=imagecustomecontrol">
   <Grid x:Name="LayoutRoot" Background="White">
      <my:imagecontrol HorizontalAlignment="Left" Margin="170,57,0,0"   Name="imagecontrol1" VerticalAlignment="Top"/>

</Grid>

We can access their events in application like.

public MainPage()
{
         InitializeComponent();
         imagecontrol1.SaveImageClick += new imagecustomecontrol.imagecontrol.ClickHandler(imagecontrol1_SaveImageClick);
         imagecontrol1.DeleteImageClick += new imagecustomecontrol.imagecontrol.ClickHandler(imagecontrol1_DeleteImageClick);
         imagecontrol1.ViewImageClick += new imagecustomecontrol.imagecontrol.ClickHandler(imagecontrol1_ViewImageClick);