ImageView

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

Create an ImageView

To create an image view, follow these steps:

Figure: ImageView

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

   
                   
   avrasm
                   
   
                       
   Copy
                       
   
                   
               
   xmlns:base="clr-namespace:Tizen.NUI.BaseComponents;assembly=Tizen.NUI"
   xmlns:comp="clr-namespace:Tizen.NUI.Components;assembly=Tizen.NUI.Components"
   

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 like below:

   
                   
   routeros
                   
   
                       
   Copy
                       
   
                   
               
   <base:ImageView x:Name="img" ResourceUrl="*Resource*/images/your-image.jpg"/>
   

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 an object, set Size2D property, and display it at the center of the window by setting ParentOrigin and Position2D properties:

   
                   
   routeros
                   
   
                       
   Copy
                       
   
                   
               
   <base:ImageView x:Name="img" ResourceUrl="*Resource*/images/your-image.jpg"
       Size2D="400, 400" ParentOrigin="Center" Position2D="-200,-200"/>
   

2. Use PixelArea property to apply the zoom effect:

   
                   
   C#
                   
   
                       
   Copy
                       
   
                   
               
   <base:ImageView x:Name="img" ResourceUrl="*Resource*/images/your-image.jpg"
       PixelArea="0.25, 0.25, 0.5, 0.5" />
   

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

   
                   
   C#
                   
   
                       
   Copy
                       
   
                   
               
   img.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:

   
                   
   routeros
                   
   
                       
   Copy
                       
   
                   
               
   <base:ImageView x:Name="img" ResourceUrl="*Resource*/images/your-image.jpg"
       ResourceReady="onResourceReady"/>
   

ImageView properties

The following table defines the ImageView class control properties:

Table: ImageView control properties

Related information

• Dependencies
  • Tizen 6.5 and Higher