Logo
programming4us
programming4us
programming4us
programming4us
Home
programming4us
XP
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Windows Phone
 
Windows Phone

Items Controls : Customizing Item Displays

- Windows 10 Product Activation Keys Free 2019 (All Versions)
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
5/5/2011 6:16:24 PM
The second of the three approacesh to filling an items control requires explicitly defining the contents in XAML. The ItemsControlsFromXaml project uses this approach to fill an ItemsControl and two ListBox controls. The Items property defined by ItemsControl is the content property of the control, so in XAML all you need to do is put a bunch of objects between the begin and end tags of the particular items control.

In anticipation of formatting some strings in data bindings, a StringFormatConverter is included in the Resources collection of the program’s MainPage.xaml file:

Example 1. Silverlight Project: ItemsControlsFromXaml File: MainPage.xaml (excerpt)
<phone:PhoneApplicationPage.Resources>
<petzold:StringFormatConverter x:Name="stringFormat" />
</phone:PhoneApplicationPage.Resources>

The content area contains a three-column Grid:

Example 2. Silverlight Project: ItemsControlsFromXaml File: MainPage.xaml (excerpt)
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

. . .

</Grid>

The first Grid cell contains a ScrollViewer hosting an ItemsControl which contains Color objects for all the colors defined in Silverlight:

Example 3. Silverlight Project: ItemsControlsFromXaml File: MainPage.xaml (excerpt)
<ScrollViewer Grid.Column="0">
<ItemsControl>
<Color>AliceBlue</Color>
<Color>AntiqueWhite</Color>
<Color>Aqua</Color>
<Color>Aquamarine</Color>
<Color>Azure</Color>
. . .
<Color>Wheat</Color>
<Color>White</Color>
<Color>WhiteSmoke</Color>
<Color>Yellow</Color>
<Color>YellowGreen</Color>
</ItemsControl>
</ScrollViewer>

Based on your experience of seeing what happens when you put a Color object in a Button, you can probably guess the result: a list of 141 hexadecimal color values. But at least it will be scrollable.

For a little variety, the second column of the Grid contains a ListBox with 141 SolidColorBrush objects:

Example 4. Silverlight Project: ItemsControlsFromXaml File: MainPage.xaml (excerpt)
<ListBox Grid.Column="1"
DisplayMemberPath="Color">
<SolidColorBrush Color="AliceBlue" />
<SolidColorBrush Color="AntiqueWhite" />
<SolidColorBrush Color="Aqua" />
<SolidColorBrush Color="Aquamarine" />
<SolidColorBrush Color="Azure" />
. . .
<SolidColorBrush Color="Wheat" />
<SolidColorBrush Color="White" />
<SolidColorBrush Color="WhiteSmoke" />
<SolidColorBrush Color="Yellow" />
<SolidColorBrush Color="YellowGreen" />
</ListBox>

Again, from your experience with putting a SolidColorBrush object in a Button, you know that this will be even worse: All you’ll get will be 141 instances of a text string with the fully-qualified class name “System.Windows.Media.SolidColorBrush”.

But wait: Look at that property setting on the ListBox:

DisplayMemberPath="Color"

This property is defined by ItemsControl, and it allows you to specify one property of the items in the items control that you want used for display purposes. (Of course, it helps if all the items are of the same type, which is not otherwise a requirement.) With this property setting, ListBox will not display the SolidColorBrush object but will instead display the Color property of each SolidColorBrush, and the same hexadecimal values as the ItemsControl.

The third column is a ListBox done right. It has the same 141 SolidColorBrush items as the first ListBox but it also has a DataTemplate set to its ItemTemplate property that allows it to format the display of the items:

Example 5. Silverlight Project: ItemsControlsFromXaml File: MainPage.xaml (excerpt)
<ListBox Grid.Column="2">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Rectangle Width="48" Height="36"
Margin="2"
Fill="{Binding}" />

<StackPanel Orientation="Horizontal"
VerticalAlignment="Center">
<TextBlock Text="{Binding Color.R,
Converter={StaticResource stringFormat},
ConverterParameter=' {0:X2}'}" />
<TextBlock Text="{Binding Color.G,
Converter={StaticResource stringFormat},
ConverterParameter='-{0:X2}'}" />
<TextBlock Text="{Binding Color.B,
Converter={StaticResource stringFormat},
ConverterParameter='-{0:X2}'}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>

<SolidColorBrush Color="AliceBlue" />
<SolidColorBrush Color="AntiqueWhite" />
<SolidColorBrush Color="Aqua" />
<SolidColorBrush Color="Aquamarine" />
<SolidColorBrush Color="Azure" />
. . .
<SolidColorBrush Color="Wheat" />
<SolidColorBrush Color="White" />
<SolidColorBrush Color="WhiteSmoke" />
<SolidColorBrush Color="Yellow" />
<SolidColorBrush Color="YellowGreen" />
</ListBox>


In this DataTemplate, a Rectangle has its Fill property set to an empty Binding:

Fill="{Binding}"

This means that Fill is set to the particular item in the ListBox, which is of type SolidColorBrush. The three TextBlock elements have bindings that reference the R, G, and B properties of the Color property of the brush. Although this ListBox still displays hexadecimal numbers, it at least displays them with a modicum of class:



Defining a list of items for an items control entirely in XAML is fine for a small number of fixed items; the only reason I used this technique with the 141 Color values is because you can’t generate them in Silverlight code by performing reflection on the Colors class. (The Colors class in Silverlight only defines 15 of these colors, so I wrote a WPF program instead that generated the markup that I then pasted into the Silverlight XAML file.)

If the items you want to put into an ItemsControl or ListBox in XAML are just text strings, you need to force the XAML parser to differentiate them. Perhaps the easiest solution is to define an XML namespace declaration for the System namespace:

xmlns:system="clr-namespace:System;assembly=mscorlib"

You can then explicitly delimit the items with String tags:

<ItemsControl>
<system:String>Item Number 1</system:String>
<system:String>Item Number 2</system:String>
<system:String>Item Number 3</system:String>
<system:String>Item Number 4</system:String>
. . .
</ItemsControl>

In a similar way, you can explicitly fill an ItemsControl with numbers using system:Double tags. If you’re using a ListBox rather than ItemsControl, you can separate string items with ListBoxItem tags:

<ListBox>
<ListBoxItem>Item Number 1</ListBoxItem>
<ListBoxItem>Item Number 1</ListBoxItem>
<ListBoxItem>Item Number 1</ListBoxItem>
</ListBox>

Earlier I said that ListBox automatically generates ListBoxItem objects as containers. Won’t this markup cause ListBox to wrap these ListBoxItem objects in additional ListBoxItem objects? Actually, no. Specifically to prevent this problem, ItemsControl defines a virtual method named IsItemItsOwnContainerOverride.

PropertyProperty TypePurpose
TemplateControlTemplatecustomizes display of control “chrome”
ContentTemplateDataTemplatecustomizes display of content

For an items control, there are three types of templates you can use, and another is indirectly available for ListBox and ComboBox. These are listed as you might encounter them from the top of the visual tree to the bottom

PropertyProperty TypePurpose
TemplateControlTemplatecustomizes display of control “chrome”
ItemsPanelItemsPanelTemplatespecifies Panel used to list items
ItemContainerStyleStylestyle of ListBoxItem or ComboBoxItem
ItemTemplateDataTemplatecustomizes display of item itself
Other -----------------
- Items Controls and Visual Trees
- The Two Templates : Custom Controls
- The Two Templates : The Ever-Handy Thumb
- The Two Templates : Variations on the Slider
- The Two Templates : Custom Controls in a Library
- The Two Templates : Sharing and Reusing Styles and Templates
- The Two Templates : The Visual State Manager
- The Two Templates : ControlTemplate Basics
- The Two Templates : Examining the Visual Tree
- The Two Templates : ContentControl and DataTemplate
 
 
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 windows Phone 7 windows Phone 8
programming4us programming4us
Celebrity Style, Fashion Trends, Beauty and Makeup Tips.
 
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server