How to generically repeat the style of a listboxitem in Silverlight / Windows phone 7

Question

I have a ListBox and I need to repeat the styles to be the same for all the listbox items. Only the placeholders are going to change. For example, the following listbox item has three elements - An Image, a header text and a description text. I have styled it. Now I need to apply the same style for the listboxitems that I follow. Currently I am doing a copy paste for all the items which is not the right way.

I can do this via ListBoxTemplate and DataTemplate but I need to write the code in .cs file which I don't want to. Help me how to achieve the template effect ?

Here is the code for the above listboxitem.

<ListBoxItem>
    <Grid Height="80">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Image Grid.Column="0" Source="/Images/dark/appbar.magnify.png"/>
        <StackPanel Grid.Column="1">
            <TextBlock Text="Item heading" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
            <TextBlock Text="item description" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}"/>
        </StackPanel>
    </Grid>
</ListBoxItem>

I need place holder for the image, header text and content text in all the listboxitems that I add. How to achieve this?

Answer 1

This is how you can achieve it :

<Page.Resources>
    <DataTemplate  x:Key="ListTemplate">
        <Grid Height="80">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="80"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image Grid.Column="0" Source="/Images/dark/appbar.magnify.png"/>
            <StackPanel Grid.Column="1">
                <TextBlock Text="{Binding ItemHeading}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                <TextBlock Text="{Binding ItemDescription}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}"/>
            </StackPanel>
        </Grid>
    </DataTemplate>
</Page.Resources>
<Grid>
    <ListBox ItemTemplate="{StaticResource ListTemplate}" ItemsSource="{Binding YourList}">


    </ListBox>
</Grid>

You can put the Resource in App.XAML so it can be accessed by all pages, and you can use it on all ListBoxes in your Application. Note that elements in your YourList should have ItemHeader and ItemDescription properties

Answer 2

创建/使用ListItem ItemTemplate

Answer 3

You can create a dataitem template like this

<DataTemplate x:Key="DataTemplate1">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition Width="auto"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Source="{Binding Image}" Width="10" Height="10"/>
                <TextBlock Grid.Column="1" Text="{Binding ID}"/>
                <TextBlock Grid.Column="2" Text="{Binding content}"/>
            </Grid>
        </DataTemplate>

and then bind this data template to the list and then bind the item to the list.. :) u can bind collection of list with class

You can create a class with three variables image,id and content so that u can make a list of that class and bind to the list