Rich Application

Styling Listbox – WPF

Posted on: February 11, 2009

By default Listbox will list the data in Vertical style. WPF gives us easy option to change Listbox Orientation and content in desired way.

Styling of Listbox mainly depends on three templates. ControlTemplate, ItemTemplate, ItemPanelTemplate

ControlTempalte : This used to change Appearance for Listbox. Default Listbox Control Template will have MainContainer(Grid,Border) ,Scrollviewer and ItemPresenter.

Main container : To Set Background, Border etc…

ScrollViewer :Container to Scrollbar to Listbox.

ItemPresenter : This is the main Control for Listbox. We should have ItemPresenter to display the Content in Listbox.


<controltemplate TargetType="{x:Type ListBox}">
                        <border x:Name="Bd" SnapsToDevicePixels="true" Background="Gray"
                                BorderBrush="Darkgray"  BorderThickness="1">
                            <scrollviewer Padding="{TemplateBinding Padding}" Focusable="false">

                                <itemspresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>

                            </scrollviewer>
                        </border>
                        </controltemplate><controltemplate .Triggers>
<trigger Property="IsEnabled" Value="false">
								<setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
							</trigger>
<trigger Property="IsGrouping" Value="true">
								<setter Property="ScrollViewer.CanContentScroll" Value="false"/>
							</trigger>
						</controltemplate>

ItemTemplate : Item template can have any control to bind with data eg:


  <datatemplate x:Key="ItemTemplate">
            <grid>
                <image x:Name="img" Source="{Binding XPath=Thumbnail}" Width="125" Stretch="Uniform" RenderTransformOrigin="0,0">

                </image>
                <border Background="#66000000" Height="20" Opacity="0" VerticalAlignment="Bottom" x:Name="txtBorder" BorderBrush="#FF1c1c1c" BorderThickness="0,2,0,0">
                    <textblock Margin="5,0,0,0" VerticalAlignment="Center" FontWeight="Bold" Text="{Binding XPath=Description}" Foreground="#FFffffff"/>
                </border>

            </grid>
        </datatemplate>

ItemPanelTemplate : Container present inside the this Template will decide the apperance of Listboxitems. By default ItempanelTemplate will have VirtualizingStackPanel with orientation vertical. We can change the orientation horizontal, and we can use any container instead of VirtualizingStackPanel.

panels

Code to Apply Style to our Lsitbox

	<listbox Template="{DynamicResource ListBoxStyle}"
                 ItemTemplate="{DynamicResource ItemTemplate}" 

                 IsSynchronizedWithCurrentItem="True"  ItemsPanel="{DynamicResource ItemsPanelTemplate1}" 

                 />
About these ads

3 Responses to "Styling Listbox – WPF"

Great example. Would love to see the code as a download though.

Chris, will upload with example in one or two days

Hi,
Can you post sample code for this?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


  • monwsh.over-blog.com: I love what you guys tend to be up too. This sort of clever work and reporting! Keep up the amazing works guys I've included you guys to our blogrol
  • incense burner: This is very interesting, You are an excessively professional blogger. I have joined your rss feed and look forward to looking for more of your fanta
  • Online Low cost Hotels scheduling in The capital: We're a bunch of volunteers and opening a brand new scheme in our community. Your web site provided us with helpful info to work on. You've performed
February 2009
M T W T F S S
     
 1
2345678
9101112131415
16171819202122
232425262728  
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: