ComponentOne BinaryImage for ASP.NET Web Forms
In This Topic
    Quick Start: Load and Configure
    In This Topic

    Complete the steps below to learn how to load and configure an image in the BinaryImage control.

    The following steps are for an application created on Visual Studio 2012. The steps may be differ slightly based on the version of Visual Studio you use.

    Step 1 of 3: Add BinaryImage to the Web Form

    1. In Visual Studio, create a new ASP.Net WebApplication and add a new Web Form.
    2. In the ToolBox, locate the BinaryImage control and drag it onto the Web Form. If you cannot find the control in the ToolBox, right click and select Choose Items and locate the BinaryImage control in the Choose ToolBox Items dialog box.

     

    Step 2 of 3: Add an Image to the control

    Set the location of the image to be displayed into the BinaryImage control, if there is no binary image data available. To know how to add an image using binary image data. These steps assume that the image to be loaded is included in the project as an embedded resource.

    1. On the BinaryImage control, click the smart tag  to open the BinaryImage Tasks Menu.
    2. Click the button  next to ImageUrl property. The Select Image dialog box appears.
    3. From the Select Image dialog box, select the image to load and then click OK.
    Tip: You can also load the image by providing a URL in the ImageUrl field. For details, refer to Add an External Image.

    In Source View

    Set the ImageUrl property in the <cc1:C1BinaryImage> tag to add an image to the BinaryImage control.

    <cc1:C1BinaryImage ID="C1BinaryImage1" runat="server" ImageUrl="~/C1.png" />

    In Code

    Add the following code to the Page_Load event, to add an image to the BinaryImage control:

    To write code in C#

    C#
    Copy Code
    C1BinaryImage1.ImageUrl = "C1.png";

    To write code in Visual Basic

    Visual Basic
    Copy Code
    C1BinaryImage1.ImageUrl = "C1.png"

    What You've Accomplished

    Run the project and notice that the image appears in its original size.

    Back to Top


    Step 3 of 3: Configure the Image

    1. On the BinaryImage control, click the smart tag to open the BinaryImage Tasks Menu.
    2. Set the Height to 300px and Width to 400px.
    3. Set the ResizeMode to Fit.

    In Source View

    Set the Height, Width and ResizeMode in the <cc1:C1BinaryImage> tag to configure the image in the BinaryImage control.

    <cc1:C1BinaryImage ID="C1BinaryImage1" runat="server" ImageUrl="~/C1.png" Height="300px" ResizeMode="Fit" Width="400px" />

    In Code

    Add the following code to the Page_Load event, to configure the BinaryImage control:

    To write code in C#

    C#
    Copy Code
    C1BinaryImage1.Height = 300;
    C1BinaryImage1.Width = 400;
    C1BinaryImage1.ResizeMode = C1.Web.Wijmo.Controls.C1BinaryImage.ImageResizeMode.Fit;

    To write code in Visual Basic

    Visual Basic
    Copy Code
    C1BinaryImage1.Height = 300
    C1BinaryImage1.Width = 400
    C1BinaryImage1.ResizeMode = C1.Web.Wijmo.Controls.C1BinaryImage.ImageResizeMode.Fit

    What You've Accomplished

    When you run the project, notice that the image is resized to the desired Height and Width and fits the web page.


    Back to Top