c# - 以编程方式将图像放置在页面 ASP.net Web 应用程序 c#

Question

如何以编程方式移动图像控件？在该页面上的 asp.net Web 应用程序中，我希望以编程方式创建 3 个图像并将它们放置在它们之间有一定距离；

int punctX = 50;
            int punctY=50;

            for (int y = 0; y < 2; y++)
            {
                System.Web.UI.WebControls.Image image = new System.Web.UI.WebControls.Image();
                image.ID = "culoare" + y.ToString();

-- 如何在页面上放置图像？}

Answer 1

如果您可以使用某种占位符将图像添加到其中，那就更好了。在此示例中，我使用的是 asp.net 面板控件。在后面的代码中，您可以使用相应的属性设置样式属性。

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="StackOverFlow_2._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:Panel ID="pnlImages" runat="server"></asp:Panel>
</asp:Content>

如果你有这样的图像

你可以做这样的事情（可能不是最干净的代码；但你明白了）

using System;
using System.Web.UI;

namespace StackOverFlow_2
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                double punctX = 10;
                double punctY = 10;

                double spacing = 5;

                pnlImages.Style["position"] = "relative";

                for (int y = 0; y < 3; y++)
                {
                    System.Web.UI.WebControls.Image image = new System.Web.UI.WebControls.Image();
                    image.ID = "culoare" + y.ToString();
                    image.Style["position"] = "absolute";
                    image.Style["left"] = punctX.ToString() + "px";
                    image.Style["top"] = punctY.ToString() + "px";
                    image.Width = 100;
                    image.Height = 60;
                    image.ImageUrl = "~/Images/" + image.ID.ToString() + ".jpg";

                    pnlImages.Controls.Add(image);                    

                    punctX += image.Width.Value + spacing;

                }
            }
        }
    }
}

渲染输出看起来像这样（您的图像相距 5px）

Answer 2

您必须像这样将它们添加到您的页面控件集合中

page.Controls.Add(yourImage)

Answer 3

    //The image data is from database.
    System.Web.UI.WebControls.Image img = new System.Web.UI.WebControls.Image();
    img.ID = row["id"].ToString();
    img.AlternateText = row["id"].ToString();
    img.ImageUrl = "~/myimage.png";
    img.Style["position"] = "relative";              //here must be "relative"
    img.Style["left"] = row["posX"].ToString() + "px";
    img.Style["top"] = row["posY"].ToString() + "px";