Condividi tramite

ComboBox control styling tips

  • Articolo

JJ170183.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(it-it,VS.110).png

You can use the built-in ComboBox control template to create a custom ComboBox template. The Popup control contains a ListBox control that enables users to select an item from a list. By default, the ComboBox control looks like the following:

JJ170183.f2dbcfc2-1ccd-49d5-9de9-6be35c73ad67(it-it,VS.110).png

Parts of the ComboBox template

The ComboBox template includes the following parts:

JJ170183.69fada84-8d77-4b89-a14c-18fcbd2da5a9(it-it,VS.110).png

Part name

Object type

JJ170183.25182a96-9a69-478a-9cfe-5b360e6a9bea(it-it,VS.110).png ContentPresenter

ContentPresenter

JJ170183.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(it-it,VS.110).png ContentPresenterBorder

FrameworkElement

JJ170183.f0c1ff71-7814-42ba-806b-7ea92d616e69(it-it,VS.110).png DropDownToggle

ToggleButton

JJ170183.eb6fad93-f17e-4f62-a926-8c8651862891(it-it,VS.110).png Popup

Popup
SuggerimentoSuggerimento

To view the parts of the template, open the Parts panel while modifying the template.

ComboBox tips

A combo box consists of a pop-up window containing a list of items (4), an area in which the currently selected item is displayed (1), and a toggle button used for opening and closing the pop-up window (3).

JJ170183.collapse_all(it-it,VS.110).gifContentPresenter part

The ContentPresenter part is mandatory, and its purpose is to display the current item. If you put some content inside the ContentPresenter part in the template, that content will be displayed whenever there is no item selected.

JJ170183.collapse_all(it-it,VS.110).gifContentPresenterBorder part

If IsHitTestVisible is true, the ContentPresenterBorder part can be clicked to open and close the pop-up window, and the pop-up window will be located at the lower-left corner of ContentPresenterBorder (2). A layout panel is a good choice for the ContentPresenterBorder part.

JJ170183.collapse_all(it-it,VS.110).gifDropDownToggle part

The DropDownToggle part is optional, but you can use it as another way to open and close the pop-up window.

JJ170183.collapse_all(it-it,VS.110).gifPopup part

The Popup part is mandatory. This is the part in which the items are displayed. An ItemsPresenter is used to indicate where the items should be displayed. The ItemsPresenter should be put inside the ScrollViewer part. The Popup is opened relative to the bounds of the root object of the template.

States of the ComboBox control

By default, the ComboBox control can be in one of the following three states in the CommonStates state group, which you can view in the States panel when modifying a ComboBox template:

State name

Description

Normal

The appearance of the ComboBox control when there is no interaction with the control.

MouseOver

The appearance of the ComboBox control when the user moves the pointer over it.

Disabled

The appearance of the ComboBox control when the IsEnabled property is set to False.

The ComboBox control can be in one of the following three states of the FocusStates state group:

State name

Description

Unfocused

The appearance of the ComboBox control when it does not have keyboard focus.

Focused

The appearance of the ComboBox control when it has keyboard focus and the ComboBox control is not expanded. For example, a user might press the Tab key to cycle through the objects in your application until keyboard focus is on the ComboBox control.

FocusedDropDown

The appearance of the ComboBox control when it has keyboard focus and the ComboBox control is expanded.

The ComboBox control can be in one of the following three states of the ValidationStates state group:

State name

Description

Valid

The appearance of the ComboBox control when it is valid.

InvalidUnfocused

The appearance of the ComboBox control when it is invalid and does not have keyboard focus.

InvalidFocused

The appearance of the ComboBox control when it is invalid and has keyboard focus.
SuggerimentoSuggerimento

A state group contains the visual states that are part of the same logical category, and that cannot be displayed at the same time. For example, the CommonStates group includes states that relate to user interaction with an input device such as the mouse. Only one state in a state group can be displayed at a time, but a state from one group can be displayed at the same time as a state in another state group.

When you select a state, state recording is turned on, and any changes that you make will be recorded for that state. To turn off state recording, click the recording button JJ170183.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(it-it,VS.110).png on the artboard, or select Base in the States panel. To modify the appearance of your control when two separate states are active, you can pin a preview of a state in one state group while you modify a state in a different state group.

Template-binding

You can template-bind the Background, BorderBrush, Foreground, or BorderThickness properties. For more information, see Carry object properties through to the template.

To convert objects into a ComboBox control

The following graphic is a design comprehensive (comp) of a combo box.

ComboBox

[!NOTA]

It is important to note that the preceding graphic is not yet a ComboBox control, but artwork that resembles a ComboBox control.

This example uses the XAML code in step 2 of the following procedure.

  1. Open a new Microsoft Silverlight project. In Code view, locate the following code, and then delete the closing slash mark (/).

    <Grid x:Name="LayoutRoot" Background="White"/>

  2. Copy and then paste the following code into your new project, after the code that you located in step 1.

    <Grid Height="70" Width="120">
<Rectangle 
   x:Name="contentarea" Fill="#FF333333" RadiusX="5" RadiusY="5" 
   Height="20" VerticalAlignment="Top" />
<Rectangle 
   Fill="#FF666666" RadiusX="3" RadiusY="3" HorizontalAlignment="Right" 
   Width="14" Height="18" Margin="0,1,1,0" VerticalAlignment="Top" />
<Path 
   Fill="White" Stretch="Fill" Width="8" Height="5" 
   Data="M6,12 L2,16 L-1,12 L-4,12 L1,17 L3,17 L9,12 z" Margin="0,8,4,0" 
   HorizontalAlignment="Right" VerticalAlignment="Top" />
<Rectangle 
   x:Name="popupbackground" Fill="#FF333333" Stroke="#FF4C4C4C" 
   Margin="0,20,0,0" />
<TextBlock Margin="5,25,0,0" Foreground="White" Text="Lorem"/>
<TextBlock Margin="5,46,0,0" Foreground="White" Text="Ipsum"/>
</Grid>

  3. Add a closing Grid tag (</Grid>) after the code that you just pasted.

  4. In the Objects and Timeline panel, right-click Grid, and then click Make Into Control. In the Make Into Control dialog box, click ComboBox, and then click OK.

  5. In the Objects and Timeline panel, press Ctrl, and then click both TextBlock items. Right-click either selected item, and then click Cut. Click **Return scope to **JJ170183.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(it-it,VS.110).png, and then click Paste. In the Properties panel, in the Layout category, next to Width, click Advanced options, and then click Reset. Repeat for Height.

  6. In the Objects and Timeline panel, right-click ComboBox, click Edit Template, and then click Edit Current.

  7. In the Objects and Timeline panel, right-click contentarea, click Group Into, and then click Grid.

  8. Right-click Grid, click Make Into Part of ComboBox, and then click ContentPresenterBorder.

  9. In the Parts panel, double-click ContentPresenter. In the Properties panel, in the Layout category, set Margin to the following:

    • Left   5

    • Right   5

    • Top   1

    • Bottom   0

  10. In the Objects and Timeline panel, click Rectangle, press Ctrl, and then click Path. Right-click the selection, click Group Into, and then click Grid.

  11. In the Objects and Timeline panel, right-click Grid, click Make Into Part of ComboBox, and then click DropDownToggle. Click OK.

  12. Right-click Path, and then click Cut. Click **Return scope to **JJ170183.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(it-it,VS.110).png, click DropDownToggle, and then press Ctrl+V to paste.

  13. In the Objects and Timeline panel, select Grid. In the Parts panel, double-click Popup.

  14. In the Tools panel, double-click Grid. In the Properties panel, in the Layout category, next to Width, click Advanced options, and then click Reset. Repeat for Height.

  15. In the Objects and Timeline panel, click popupbackground, and then drag it onto the grid that you just created. In the Properties panel, in the Layout category, next to Width, click Advanced options, and then click Reset. Repeat for Height, HorizontalAlignment, VerticalAlignment, and Margin.

  16. In the Objects and Timeline panel, drag ScrollViewer onto the new grid. In the Properties panel, in the Layout category, next to Width, click Advanced options, and then click Reset. Repeat for Height, HorizontalAlignment, VerticalAlignment, and Margin.

  17. Click **Return scope to **JJ170183.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(it-it,VS.110).png. In the Properties panel, in the Layout category, set Height to 20.

  18. Build your project (Ctrl+Shift+B), and then test your project by pressing F5.

For information about applying your new ComboBox template to other ComboBox objects, see Apply or remove a resource.

References

You can find detailed information about the properties and events of the Microsoft Silverlight ComboBox control at the Silverlight Control Gallery on MSDN.

Vedere anche

Concetti

Styling tips for common Silverlight controls

SimpleComboBox and SimpleComboBoxItem

Styling a control that supports templates