ImageView

An ImageView is a NUI control that displays an image. It is implemented through the ImageView class. NUI supports many kinds of format of image, such as .jpg, .png, .bmp, .svg and .gif.

Create an ImageView

To create an image view:

Figure: ImageView

1. To use the ImageView class, add the following namespaces:

   
                   
   C#
                   
   
                       
   Copy
                       
   
                   
               
   using Tizen.NUI;
   using Tizen.NUI.BaseComponents;
   

2. It is assumed that image is in the resources directory. Create an instance of the ImageView class and pass the path to image file as an constructor argument:

   
                   
   C#
                   
   
                       
   Copy
                       
   
                   
               
   ImageView imageView = new ImageView(DirectoryInfo.Resource + "your-image.jpg");
   Window.Instance.Add(imageView);
   

   You can also create the ImageView class instance separately, and define the file path by setting its ResourceUrl property:

   
                   
   C#
                   
   
                       
   Copy
                       
   
                   
               
   imageView = new ImageView();
   imageView.ResourceUrl = DirectoryInfo.Resource + "your-image.jpg";
   Window.Instance.Add(imageView);
   

3. To change the image path after the instance has been created, use the SetImage() method of the ImageView class:

   
                   
   C#
                   
   
                       
   Copy
                       
   
                   
               
   imageView = new ImageView();
   imageView.SetImage(DirectoryInfo.Resource + "your-image.jpg");
   Window.Instance.Add(imageView);
   

Manipulate an ImageView

Figure: Manipulated ImageView

1. Create object, set Size2D property, and display it at the center of the window by setting ParentOrigin and Position2D properties:

   
                   
   C#
                   
   
                       
   Copy
                       
   
                   
               
   ImageView imageView = new ImageView(DirectoryInfo.Resource + "your-image.jpg");
   imageView.Size2D = new Size2D(400, 400);
   imageView.ParentOrigin = ParentOrigin.Center;
   imageView.Position2D = new Position2D(-200, -200);
   Window.Instance.Add(imageView);
   

2. Use PixelArea property to apply the zoom effect:

   
                   
   C#
                   
   
                       
   Copy
                       
   
                   
               
   imageView.PixelArea = new RelativeVector4(0.25f, 0.25f, 0.5f, 0.5f);
   

3. To rotate the image by 45 degrees, set the Orientation property as follows:

   
                   
   C#
                   
   
                       
   Copy
                       
   
                   
               
   imageView.Orientation = new Rotation(new Radian((float)System.Math.PI / 4), 
                                        new Vector3(0.0f, 0.0f, 1.0f));
   

ImageView Event

After all the required resources are loaded and ready, you can perform some actions:

1. Create handler:

   
                   
   C#
                   
   
                       
   Copy
                       
   
                   
               
   public void onResourceReady(object sender, ImageView.ResourceReadyEventArgs e)
   {
       // Resource is ready, do something
   } 
   

2. Add handler to ImageView by using the ResourceReady property:

   
                   
   C#
                   
   
                       
   Copy
                       
   
                   
               
   imageView.ResourceReady += onResourceReady;
   

ImageView Properties

The following table defines the ImageView class control properties.

Table: ImageView control properties

Related information

• Example
  • WearableImageSample
• Dependencies
  • Tizen 4.0 and Higher