Now, you have the base control template defined in a Metro style. I am going to set the background to black and the border to white, so that it fits the theme (once again):ĭon’t forget about setting the proper border thickness. Same as with the border discussed above, there is no default brush defined for the background color. But it’s not the Popup that defines the looks of the list, but rather the embedded ScrollViewer, so I expand the Popup element in my Objects and Timeline list till I reach the ScrollViewer component. Now you can actually modify the Popup - the list that is being shown when the user wants to select an item. Set the BorderBrush property to white and define the border a bit thicker (a value of 2 or 3 should work just fine, but you can adapt it depending on the circumstances). In the Objects and Timeline tab, select ContentPresenterBorder:īy default, there are no brushes set for the border, as well as the border thickness is set to zero. In the Properties tab I can select its fill color(in my case I set it to white, to follow the theme conventions):Īlso, I modified its Height and Width properties to be larger, as well as the right margin, since there will be a white border around the control: If I expand the DropDownToggle, there is BtnArrow: Since the control is a bit larger that the regular ComboBox, it makes sense to make the selection arrow also a bit larger than the standard one. Now I can select the initial container Grid and customize its background.
This will cancel the existing template and will allow me to customize each property specific to the DropDownToggle. This will open the Advanced Options menu:Ĭonvert to Local Value is the option I need. In that section there is the Template property:Ĭlick the square on the right from the property value field. In the properties tab, there is the Miscellaneous section. The DropDownToggle is what the user sees before actually clicking on the ComboBox.
Now I am able to expand the ContentPresenterBorder and select the DropDownToggle that is a member of the container Grid: Once done, you will see that the actual control is now separated in a set of unique elements that correspond to various functionality tied to the ComboBox: I defined the template in the context of the initial document: Once prompted to enter the name, enter whatever name you want to identify your template. This can be done by right-clicking on the control in the Objects and Timeline tab and selecting Edit Template > Edit a Copy… I need to edit the default template by creating a copy of the initial one. Now I need to specify that this control should not follow the assigned template structure but rather let me customize it to the maximum. Once I created a Silverlight project, I simply inserted a regular ComboBox control on the page:
#WINDOWS PHONE 7 TEXT STYLES FULL VERSION#
NOTE: By default, I cannot work with the ComboBox control in Expression Blend 4 for Windows Phone 7, therefore I am using the full version of Expression Blend 4 in the context of a Silverlight application.
The overall base template is quite large so here I might use some help from Expression Blend. What you can do here is create a custom control template based on the existing “skeleton”. And although you can easily modify the ItemTemplate therefore setting the correct grid border and background color, the base selector will remain the same. That blue gradient is ruining the overall user experience. It doesn’t look too appealing, especially if you use other Metro-styled controls in your application. It is pretty much styled like a regular Silverlight ComboBox:Īlthough this control is not directly available from the Visual Studio toolbox (or the Expression Blend 4 for Windows Phone 7 toolbox for that matter) you can add it directly via XAML. All of them are styled in compliance with the Metro UI layout, but one control – the ComboBox. Windows Phone 7 development tools come with a handy set of default controls that can be used in Windows Phone 7 applications.
0 kommentar(er)
