Using Color Picker Extender Control in ASP.Net

Yesterday , I was working on ASP.Net application. I want to use ColorPickerExtender Control in my application so that user can set background color of the web page according to his/her own choice. I extend my TextBox Control with ColorPickerExtender Control and set its target Control Id to the id of the TextBox Control.But when I set background property of the web page to the value of textbox then I found that data type of textbox value did not matched with the datatype of the background property of the web page. Because first one return String where last one need Color type value.

Now, my problem was how to convert the String data type to Color data type. After extensive research ,I found that I can create a class inherit from Iconverter and then write a code to convert String data type to Color type. Also, I found one another short alternative method to solve the above problem and that was ColorPickerExtender Control has SampleControlID property .

We can set this property to the ID of the Control on which  we want to perform operation.Like ID of the Panel , label ,Textbox and so on and ColorPickerExtender Control automatically change the Back Color of that control as I did in this code:

 

<asp:Table ID="Table1" runat="server"><asp:TableRow>

<asp:Panel ID="Panel2" runat="server">
</asp:Label><asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"></asp:TextBox><asp:ColorPickerExtender ID="ColorPickerExtender1" runat="server" TargetControlID="TextBox1" SampleControlID="Panel1"></asp:ColorPickerExtender></asp:Panel></asp:TableCell>
</asp:Table></asp:TableRow><asp:Label ID="Label1" runat="server" Text="Select a Color" Font-Bold="True"><asp:TableCell>

 

In the above code,note the shaded portion which contain the ColorPickerExtender Control  with TargetControlID and SampleControlID property.I set TargetControlID to the TextBox1 which extend the TextBox Control and SampleControlId to Panel1 which was the id of the Panel in which whole web page contained.

 

When a user select a color from ColorPickerExtender Control then backcolor of panel1 will automatically change with respect to the selected color.

Highlighting selected item of the List Control in WPF.

In my last WPF assignment, I used data template to bind my data source with ListBox Control .Upon successfully binding data source with ListBox Control, when I select an item form a listbox control, I notice that highlighted color of the selected item in the ListBox was same as system default color. But, I want the color of selected item should be different from default color which makes a difference between selected and unselected item of the control.

So, I found that this can be done by using ItemContainerStyle property which is available in List Control. The ItemContainerStyle is responsible for the overall look of the List Control (ListBox Control in my case).

I attached  ItemContainerStyle property like this:

 <ListBox ItemContainerStyle="{StaticResource myContainerStyle}">

Here "myContainerStyle" is the name of the style which handles the selected item in the ListBoxItem.Then I defined the code for myContainerStyle like this:

 

<Style x:Key="myContainerStyle" TargetType="myListBoxItem">

     <Setter Property="FocusVisualStyle" Value="{x:Null}" />

      <Setter Property="Template">

        <Setter.Value>

          <ControlTemplate TargetType="myListBoxItem">

            <Border

           Name="Border"

           Padding="2"

           SnapsToDevicePixels="true">

              <ContentPresenter />

            </Border>

            <ControlTemplate.Triggers>

              <Trigger Property="IsSelected" Value="true">

                <Setter TargetName="Border" Property="Background" Value="Teal"/>

              </Trigger>

            </ControlTemplate.Triggers>

          </ControlTemplate>

        </Setter.Value>

      </Setter>

    </Style>

In the above code ,note the selected portion where I defined the "IsSelected Property" in the trigger.When ever user select the item from the list ,this trigger will fire and change the background color of the selected item to specified color(in this case it is Teal)

So,the final code for my ListBox control become:

       <ListBox x:Name="TemplatedListBox"

      HorizontalAlignment="Left"

      ItemTemplate="{StaticResource myDataTemplate}"

      ItemsSource="{Binding}"

      ItemContainerStyle="{StaticResource myContainerStyle }" >

     

 </ListBox>