Tuesday, November 29, 2011

Multiple Columns in WPF ListBox

In this article we will discuss ways to have multiple columns in WPF ListBox control and layout the ListBox such that each row has 3 items. All WPF controls deriving from ItemsControl provide an ItemsPanel property that allows us to replace the internal layout panel that arranges the items. So to have multiple columns in a ListBox we have to change the ItemsPanel property of the control.

WrapPanel

One of the most simple way of displaying content horizontally in ListBox is to have WrapPanel in ItemsPanel property of Listbox. But if we need to display fixed number of items in a row then we have to disable the horizontal scrollBar so that item get wrap to next row and set fixed width for ListBox. But as item get wrap the ListBoxItem are not positioned uniformly. So we have to set Width for each ListBoxItem so that all the items are positioned in a tabular way.

        <ListBox Width="300" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<
ListBox.ItemsPanel>
<
ItemsPanelTemplate>
<
WrapPanel Orientation="Horizontal"/>
</
ItemsPanelTemplate>
</
ListBox.ItemsPanel>

<
ListBoxItem Content="Visual Basic" Width="80"/>
<
ListBoxItem Content="Silverlight" Width="80"/>
<
ListBoxItem Content="ASP.NET" Width="80"/>
<
ListBoxItem Content="WCF" Width="80"/>
<
ListBoxItem Content="Web Services" Width="80"/>
<
ListBoxItem Content="Windows Service" Width="80"/>
</
ListBox>

UniformGrid


One of the drawback with WrapPanel was we had to disable horizontal scrollbar, set Width for ListBox and also width for ListBoxItem. So we can use UniformGrid instead of WrapPanel in ItemsPanel property and set Columns property of it to the number of items we need to display in a row. Using UniformGrid all the items in the ListBox will have same width and height.


        <ListBox>
<
ListBox.ItemsPanel>
<
ItemsPanelTemplate>
<
UniformGrid Columns="3"/>
</
ItemsPanelTemplate>
</
ListBox.ItemsPanel>

<
ListBoxItem Content="Visual Basic" />
<
ListBoxItem Content="Silverlight" />
<
ListBoxItem Content="ASP.NET" />
<
ListBoxItem Content="WCF" />
<
ListBoxItem Content="Web Services" />
<
ListBoxItem Content="Windows Service" />
</
ListBox>
Grid

Although UniformGrid is the best solution for multiple column ListBox but sometime we don’t want all the columns in the ListBox of same size. Also in some scenario we could have a requirement where we need to merge two or more columns (or rows) for a larger text. In this situation using Grid is very useful option.


        <ListBox>
<
ListBox.ItemsPanel>
<
ItemsPanelTemplate>
<
Grid>
<
Grid.RowDefinitions>
<
RowDefinition Height="*"/>
<
RowDefinition Height="*"/>
<
RowDefinition Height="*"/>
</
Grid.RowDefinitions>
<
Grid.ColumnDefinitions>
<
ColumnDefinition Width="0.8*"/>
<
ColumnDefinition Width="*"/>
<
ColumnDefinition Width="Auto"/>
</
Grid.ColumnDefinitions>
</
Grid>
</
ItemsPanelTemplate>
</
ListBox.ItemsPanel>

<
ListBoxItem Content="WCF" Grid.Row="0" Grid.Column="0"/>
<
ListBoxItem Content="ASP.NET" Grid.Row="0" Grid.Column="1"/>
<
ListBoxItem Content="VB.NET" Grid.Row="0" Grid.Column="2"/>
<
ListBoxItem Content="Silverlight" Grid.Row="1" Grid.Column="0"/>
<
ListBoxItem Content="Web Services" Grid.Row="1" Grid.Column="1"/>
<
ListBoxItem Content="Windows Service" Grid.Row="1" Grid.Column="2"/>
<
ListBoxItem Content="Windows Presentation Foundation" Grid.Row="2" Grid.ColumnSpan="3"/>
</
ListBox>

Only headache of using Grid in ItemsPanel is that we have to set RowDefinitions and ColumnDefinitions for the Grid. Also we have to set the Grid.Row and Grid.Column for each item to position them in the ListBox. But in some scenario as described above it is very useful.

Sunday, November 6, 2011

I unlock Joy

At the recent Mobile Developer Summit which took place on November 2, 2011 at Bangalore Microsoft announced the details of the developer programme for Windows Mobile in India with ‘I unlock Joy’, a unique Application Development and Submission Program, where technology professionals and students get an opportunity to develop applications and showcase creativity.

‘I unlock Joy’ programme for developers has started from November 1, 2011 and will continue till June 30, 2012 whereas the program for students will begin on December 18, 2011 and conclude on March 30 next year.

Developer competitive categories:

· “SUBMIT & WIN” CATEGORY: A registered participant submits THREE qualified Windows Phone Application in the Marketplace and gets a chance to win a Windows Phone. In this category, the Applications must be distinct and of non-trivial utility value for the Application User.

· “PORT 2 APPS & WIN” CATEGORY: A registered participant submitting TWO qualified Windows Phone Applications in the Marketplace which are ported from existing Android or iPhone Applications get to win a Windows Phone.

· “WOMEN SPECIAL” CATEGORY: A first of its kind in the developer space. The first 100 registered Woman Developers who submit ONE (1) qualified Windows Phone Application each in the Marketplace qualify to win a Windows Phone each. The applications can be based on Entertainment, Fashion, Leisure, Sports, Recreation or Travel themes.

Student competitive categories:

· “STUDENT” CATEGORY: Calling on the community to be a part of the initiative, the “I unlock Joy” programme is customized to unfold their innovative and creative best and become among the select first few proud owners of the Windows Phone.

The contestants need to build one or more applications using Dev Tools and submit on AppHub. If their apps get certified and published on the Windows Phone Marketplace during the contest period which ends November 18, they can claim goodies like a brand new Windows Phone, certificate of acknowledgment from Microsoft and Windows Phone T-Shirts as well as USB flash drives.

You can find more information from official Website

http://www.microsoft.com/india/iunlockjoy/