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

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

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

<title>Working with Dropdown Controls </title>

table

{

font-family: Arial;

font-size: 12px;

border: solid 1px #ccc;

}

{

height: 30px;

text-align: center;

font-weight: bold;

border: solid 1px #ccc;

}

</style>

</head>

<body>

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

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

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

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

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

Some Helpful Resources