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

Question

What I need to do is change the text on a button but in a more general way. 我需要做的是更改按钮上的文本，但使用更一般的方式。 For example I would like to define exactly the position of each character( and not the position of the whole sentence). 例如，我想准确定义每个字符的位置（而不是整个句子的位置）。

Answer 1

As you have found out, there is a TextAlign Property that you can use to align where the text appears, but for very custom ways of positioning there is not (and of course can not be) properties, but however you can use Paint event of the button to draw the text as you like: 如您TextAlign ，有一个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

You could use some JavaScript and JQuery for customizing the look. 您可以使用一些JavaScript和JQuery自定义外观。 You can make them work with your C# / ASP.NET project. 您可以使它们与C＃/ ASP.NET项目一起使用。 Here's an example: 这是一个例子：

First, in your .aspx file, make a container for your fancy custom button (see MyCustomBtn below). 首先，在您的.aspx文件中，为您喜欢的自定义按钮创建一个容器（请参见下面的MyCustomBtn）。

Also have a regular submit button that runs at the server level (MySubmitBtn), but hide it using CSS; 还有一个在服务器级别运行的常规提交按钮（MySubmitBtn），但是使用CSS隐藏它。 display:none; 显示：无;

<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>

Next, make sure to include JQuery in your project. 接下来，确保在项目中包含JQuery。

You can download it from the official site here: https://code.jquery.com/jquery-3.3.1.min.js 您可以从以下官方网站下载它： https : //code.jquery.com/jquery-3.3.1.min.js

And save this file in your project. 并将此文件保存在您的项目中。 Then refer to it in the head of your .aspx page like this: 然后像这样在.aspx页的开头引用它：

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

Then include this code to handle any clicks on MyCustomBtn to cause a click on the MySubmitBtn as well: 然后包括以下代码以处理对MyCustomBtn的任何单击，从而也导致对MySubmitBtn的单击：

$(document).ready(function() {

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

    ...

});

You can then use CSS, HTML, JavaScript, JQuery, and your imagination to customize MyCustomBtn however you wish. 然后，您可以根据需要使用CSS，HTML，JavaScript，JQuery和您的想象力来自定义MyCustomBtn。

Here's the full (rough) code for this example. 这是此示例的完整（粗糙）代码。 There are much better ways to write all of this, but this should help give you an idea. 有很多更好的方法可以编写所有这些内容，但这应该可以帮助您了解一下。

<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 个解决方案

解决方案1
0 已采纳 2018-09-30 21:29:15

解决方案2
0 2018-09-30 22:27:54

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2018-09-30 21:29:15

解决方案2 0 2018-09-30 22:27:54

解决方案1
0 已采纳 2018-09-30 21:29:15

解决方案2
0 2018-09-30 22:27:54