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