CODEWITHSUNDEEP
c#.netxaml
Tommy
Tommy

Reputation: 583

Basic ListView Styling

I have read the docs and tried many samples but to be honest the samples look like a big jumbled mess and don't seem to make much sense.

Can anyone recommend any easy to follow tutorials or docs on how to style a ListView control in XAML? (Without Expression Blend)

Upvotes: 1

Views: 174

Answers (2)

Neil Barnwell
Neil Barnwell

Reputation: 42095

The two main common tricks to styling a ListView are to style the items and change the kind of container the listbox uses to lay the items out.

Styling an Item
This basically means setting the ItemTemplate in xaml to something that knows how to dispay the thing that is the content of the listbox's ItemsSource, typically using bindings.

For example, if you have an ObservableCollection<Customer> bound to the listbox where customer is defined as:

public class Order
{
    public int Id { get; set; }
    public string OrderReference { get; set; }
    public string CustomerName { get; set; }
}

Then you might style the items with a data template as follows:

<ListBox>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding CustomerName}" />
                <TextBlock Text="{Binding OrderReference}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

A basic example but you get the idea.

Changing how items are laid out
Essentially you might not want the default behaviour where items are listed vertically, so you can change the container control used inside the listbox to something more suitable using the ItemsPanel property. If, for example you had an item template that looked like an item from the "large icons" view in Windows Explorer, then you might want the listbox to use a WrapPanel rather than a StackPanel (I'm pretty sure it's a StackPanel):

<ListBox>
    <ListBox.ItemsPanel>
        <DataTemplate>
            <WrapPanel>
                <ContentPresenter />
            </WrapPanel>
        </DataTemplate>
    </ListBox.ItemsPanel>
</ListBox>

Again a basic example.

I wrote all this code from memory into StackOverflow so apologies if there are a few typos or mis-remembered bits in there.

HTH.

Upvotes: 1

bouvierr
bouvierr

Reputation: 3781

Check out this 2 part "WPF ListView Styling Tutorial" article: http://blog.vascooliveira.com/wpf-listview-styling-tutorial-part-i/

Note: on my computer, the XML (XAML) code does not display correctly, the < and > signs appear as "&lt" and "&gt".

Upvotes: 1

Related Questions