Post
Ask Question

Changing Color of Text Using DropDownList in C#


Today, I have provided an article showing you how to change the color of text using a DropDownList in ASP. NET. There are many ways in which a user can change the color of text using a DropDownList. Here, we use the color class to change the color of text using a DropDownList. It's easy to implement. We drag and drop two DropDownList controls onto the form; one is for the foreground color and the second one is used to change the background color and also drag and drop a Label control for showing the changing color effect. First of all start Visual Studio .NET and make a new ASP.NET web site using Visual Studio 2010. 

Now you have to create a web site.

  • Go to Visual Studio 2010
  • New-> Select a website application
  • Click OK

img5.gif

Now add a new page to the website.

  • Go to the Solution Explorer
  • Right-click on the Project name
  • Select add new item
  • Add new web page and give it a name
  • Click OK

img6.gif

Now drag and drop two DropDownList controls from the Toolbox to the page; one is for the foreground color and the second one is used to change the background color. Let's take a look at a practical example. The .aspx code will be as shown below.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Drop_Down.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Working with Dropdown Controls </title>

    <style type="text/css">

        table

        {

            font-family: Arial;

            font-size: 12px;

            border: solid 1px #ccc;

        }

        td

        {

            height: 30px;

            text-align: center;

            font-weight: bold;

            border: solid 1px #ccc;

        }

     

    </style>

</head>

<body>

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

    <table width="500px" cellpadding="5" cellspacing="5" align="center">

        <tr>

            <td>

                <asp:LinkButton ID="Drop_lnkbtn" runat="server" OnClick="Drop_lnkbtn_Click">Click to show DropDownList </asp:LinkButton>

            </td>

        </tr>

    </table>

    <asp:PlaceHolder ID="Place_Dropdown" runat="server">

        <table width="500px" cellpadding="5" cellspacing="5" align="center">

            <tr>

                <td>

                    Face Color :

                    <asp:DropDownList ID="drop_downforecolor" runat="server" AutoPostBack="true" OnSelectedIndexChanged="drop_down_SelectedIndexChanged">

                        <asp:ListItem> Red </asp:ListItem>

                        <asp:ListItem> Green </asp:ListItem>

                        <asp:ListItem> Blue </asp:ListItem>

                        <asp:ListItem> Black </asp:ListItem>

                        <asp:ListItem> Yellow </asp:ListItem>

                        <asp:ListItem> Orange </asp:ListItem>

                    </asp:DropDownList>

                </td>

                <td>

                    Back Color :

                    <asp:DropDownList ID="Backgroundcolor" runat="server" AutoPostBack="true" OnSelectedIndexChanged="drop_Background_SelectedIndexChanged">

                        <asp:ListItem> Red </asp:ListItem>

                        <asp:ListItem> Green </asp:ListItem>

                        <asp:ListItem> Blue </asp:ListItem>

                        <asp:ListItem> Black </asp:ListItem>

                        <asp:ListItem> Yellow </asp:ListItem>

                        <asp:ListItem> Orange </asp:ListItem>

                    </asp:DropDownList>

                </td>

            </tr>

            <tr>

                <td colspan="4">

                    <asp:Label ID="LabelText" runat="server" BackColor="AliceBlue" Text="Label" Font-Size="18px"></asp:Label>

                </td>

            </tr>

        </table>

    </asp:PlaceHolder>

    </form>

</body>

</html>

 

Now add the following namespace.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Drawing;

 

Color class

 

This is a base class for color values. By adding a reference to the System.Drawing to use the color class. You can use many known colors using the named properties of the Color type.

FromName Method

You may have to convert from a string to a color type. For example, if you accept user input and the user types the word "white", you can convert this into a real color and use it in your program or obtain its ARGB value using the Color.FromName method.

// Create the color from a string.

       Color white = Color.FromName("white");

       // Color will have appropriate R G B values.

       Console.WriteLine(white.R);

       Console.WriteLine(white.G);

       Console.WriteLine(white.B);

Now double-click on the page and write the following code to change the color of the text using DropDownList.

In code-behind write the following complete code.
 

Code-behind

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Drawing;

 

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            LabelText.Visible = false;

            Place_Dropdown.Visible = false;

        }

    }

    protected void drop_down_SelectedIndexChanged(object sender, EventArgs e)

    {

        LabelText.Visible = true;

        string s = drop_downforecolor.SelectedItem.Text.ToString();

        LabelText.ForeColor = System.Drawing.Color.FromName(s);

        LabelText.Text = "This Color is :" + s;

        drop_downforecolor.ForeColor = System.Drawing.Color.FromName(s);

    }

    protected void drop_Background_SelectedIndexChanged(object sender, EventArgs e)

    {

        string s1 = Backgroundcolor.SelectedItem.Text.ToString();

        LabelText.BackColor = System.Drawing.Color.FromName(s1);

        LabelText.Text = "Background Color is :" + s1;

        Backgroundcolor.BackColor = System.Drawing.Color.FromName(s1);

    }

    protected void Drop_lnkbtn_Click(object sender, EventArgs e)

    {

        Place_Dropdown.Visible = true;

    }

}

 

Now run the application and test it and click on the link to show the DropDownList.

 

img1.gif

 

Now click on the both DropDownList and select the foreground and background colors.

 

img2.gif

 

Note: You can see a demo of this article by downloading this application.

 

Some Helpful Resources


Similar Articles