Question

我需要做的是更改按钮上的文本，但使用更一般的方式。例如，我想准确定义每个字符的位置（而不是整个句子的位置）。

Answer 1

您已经发现，有一个TextAlign属性可以用来对齐文本出现的位置，但是对于非常自定义的定位方式，没有（当然也不能）属性，但是但是，您可以使用按钮的Paint事件来随意绘制文本：

    private void button1_Paint(object sender, PaintEventArgs e)
    {
        Font f = new Font("Tahoma", 14, FontStyle.Bold, GraphicsUnit.Pixel);
        Button btn = ((Button)sender);
        e.Graphics.DrawString(btn.Text[0].ToString(), f, new SolidBrush(Color.Red), new Point(10, 10));
        e.Graphics.DrawString(btn.Text.Substring(1), f, new SolidBrush(Color.Black), new Point(22, 15));
    }

Answer 2

您可以使用一些JavaScript和JQuery自定义外观。您可以使它们与C＃/ ASP.NET项目一起使用。这是一个示例：

首先，在您的.aspx文件中，为您喜欢的自定义按钮创建一个容器（请参见下面的MyCustomBtn）。

还具有在服务器级别运行的常规提交按钮（MySubmitBtn），但是使用CSS隐藏了该按钮；显示：无；

<form id="form1" runat="server">
...
<div id="MyCustomBtn"> ... </div>
...
<div style="display:none;">
<asp:Button ID="MySubmitBtn" runat="server" Text="Submit" OnClick="MySubmitBtn_Click" />
</div>
...
</form>

接下来，确保在项目中包含JQuery。

您可以从以下官方网站下载它：https://code.jquery.com/jquery-3.3.1.min.js

并将此文件保存在您的项目中。然后像这样在.aspx页的开头引用它：

<script type="text/javascript" src="C:\your\Path\jquery-3.3.1.min.js"></script>

然后包含以下代码以处理对MyCustomBtn的任何单击，从而也导致对MySubmitBtn的单击：

$(document).ready(function() {

    $("#MyCustomBtn").click(function () {
        $("#MySubmitBtn").click();
    });

    ...

});

然后，您可以根据需要使用CSS，HTML，JavaScript，JQuery和您的想象力来自定义MyCustomBtn。

这是此示例的完整（粗糙）代码。有很多更好的方法可以编写所有这些内容，但这应该可以帮助您了解一下。

<html>
<head>
    <script type="text/javascript" src="C:\your\Path\jquery-3.3.1.min.js"></script>

    <style>
    /* clearfix credit goes to http://www.mikepadgett.com/technology/technical/alternative-to-the-pie-clearfix-hack/ */
    .clearfix:after 
    {
        clear: both; 
        content: "."; 
        display: block; 
        height: 0; 
        visibility: hidden;
    }
    .clearfix 
    {
        display: inline-block;
    }
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */

    .customButtonStyle
    {
        background: #00C;
        width: 100px;
        margin: 50px;
        padding: 10px;
    }

    .floatLeft
    {
        float: left;
    }
    </style>

</head>
<body>

<form id="form1" runat="server">

<div id="MyCustomBtn"> 
    <div class="clearfix customButtonStyle">
        <div class="floatLeft" style='color: #f99;padding: 1px 4px 30px 2px'>C</div>
        <div class="floatLeft" style='color: #8f9;padding: 30px 2px 1px 2px'>l</div>
        <div class="floatLeft" style='color: #fa0;padding: 15px 2px 16px 2px'>i</div>
        <div class="floatLeft" style='color: #290;padding: 10px 4px 21px 2px'>c</div>
        <div class="floatLeft" style='color: #fff;padding: 1px 2px 30px 2px'>k</div>
        <div class="floatLeft" style='color: #2f9;padding: 21px 4px 10px 4px'>M</div>
        <div class="floatLeft" style='color: #f29;padding: 30px 2px 1px 2px'>e</div>
    </div>
</div>

<div style="display:none;">
    <asp:Button ID="MySubmitBtn" runat="server" Text="Submit" OnClick="MySubmitBtn_Click" />
</div>

</form>

<script>
    $(document).ready(function() {

        $("#MyCustomBtn").click(function () {
            $("#MySubmitBtn").click();
        });

    });
</script>

</body>
</html>

如何更改按钮上出现的文本

2 个答案: