locked
font color combobox RRS feed

  • Question

  • Hi,

    I'm new to Silverlight and I want to learn how to put image inside font color/highlight color combobox's header , for example, like the ones in Microsoft Office Word for font color and highlight color combobox? or are they somewhat complex comboboxes( with buttons, colomns..)

    I created simple combobox with colored rectangles as items, when you select a color (textbox), it will be applyed on selected text and the selected rectangle will be shown in the header of the the combobox

    I just want the apperiance of the font color combobox like the one in Microsoft Office Word, how to do this?

    (Sorry for my English!)

     

    The Xaml part :

    <local:MyComboBox Name="MyFColorComoB" Height="26" Width="52" PreKeyDown="MyFColorCB_PreKeyDown" Loaded="MyFColorCB_Loaded">

    <ComboBoxItem>

    <Rectangle Width="20" Stroke="Black" Height="20" Fill="LightGray" ></Rectangle>

    </ComboBoxItem>

    <ComboBoxItem>

    <Rectangle Width="20" Stroke="Black" Height="20" Fill="Orange"></Rectangle>

    </ComboBoxItem>

    <ComboBoxItem IsSelected="True" >

    <Rectangle Width="20" Stroke="Black" Height="20" Fill="Brown"></Rectangle>

    </ComboBoxItem>

    <ComboBoxItem>

    <Rectangle Width="20" Stroke="Black" Height="20" Fill="Cyan"></Rectangle>

    </ComboBoxItem>

    <ComboBoxItem>

    <Rectangle Width="20" Stroke="Black" Height="20" Fill="Purple"></Rectangle>

    </ComboBoxItem>

    <ComboBoxItem>

    <Rectangle Width="20" Stroke="Black" Height="20" Fill="Red"></Rectangle>

    </ComboBoxItem>

    </local:MyComboBox>

    Thursday, May 27, 2010 10:12 AM

Answers

  • These types of controls usually are not combo-boxes. Typically they are some type of popup or button popup controls that host a color related control inside them. In the MS Word case I would recommend making a color control similar to the MS one using a grid or multiple controls inside a panel or grid to define the control and attach events to it. Then you can create a button popup control and host the custom color control inside.Also the MS version has multiple versions inside it after you select more colors.. its almost like 3 color pickers in one. Q quick color picker based on themes and common colors, and two versions of color pickers on more colors.

    I am also not aware one a color picker in the MS Style.. there may be one out there, or commercial product, but Id guess most color pickers you find will look more like the ones in blend or other graphics applications.

     

    Thursday, May 27, 2010 1:41 PM
  • You can use a Popup Control to render that effect. Create a custom Color Picker UserControl that allows the user to select the color.  The UserControl can have a ColorChanged event to inform the parent control of the new color.

    The Color Picker UserControl can be placed inside a Popup Control in the main UI.  By default, the Popup Control will not be visible. 

    In the main UI, you can have a button that the user can click to open the Popup control.  The control will need to be positioned directly under the button to make it look like a dropdown menu.

    Thursday, May 27, 2010 1:50 PM
  • Thursday, May 27, 2010 1:59 PM

All replies

  • These types of controls usually are not combo-boxes. Typically they are some type of popup or button popup controls that host a color related control inside them. In the MS Word case I would recommend making a color control similar to the MS one using a grid or multiple controls inside a panel or grid to define the control and attach events to it. Then you can create a button popup control and host the custom color control inside.Also the MS version has multiple versions inside it after you select more colors.. its almost like 3 color pickers in one. Q quick color picker based on themes and common colors, and two versions of color pickers on more colors.

    I am also not aware one a color picker in the MS Style.. there may be one out there, or commercial product, but Id guess most color pickers you find will look more like the ones in blend or other graphics applications.

     

    Thursday, May 27, 2010 1:41 PM
  • You can use a Popup Control to render that effect. Create a custom Color Picker UserControl that allows the user to select the color.  The UserControl can have a ColorChanged event to inform the parent control of the new color.

    The Color Picker UserControl can be placed inside a Popup Control in the main UI.  By default, the Popup Control will not be visible. 

    In the main UI, you can have a button that the user can click to open the Popup control.  The control will need to be positioned directly under the button to make it look like a dropdown menu.

    Thursday, May 27, 2010 1:50 PM
  • Thursday, May 27, 2010 1:59 PM
  • It is not MS Style like office, but I would highly suggest this as alternative. Nice work!

    Thursday, May 27, 2010 2:01 PM
  • You can try to have a look at the following article http://endofstream.com/creating-custom-colorpicker-in-silverlight/ which is a guide for creating a color picker/selector control. You can style this to get a bit closer to the ms office version if you are good at the designing and styling thingie ;)

    Best regards!

    Tuesday, September 7, 2010 10:07 AM