Search code examples
silverlightwindows-phone-7xamlexpression-blendlistboxitem

Multiple text lines in a ListBox Item template?


I need to have two line listbox items for my WP7 app one line which is the heading and then a smaller subheading with some details. How can I do this in WP7?

I am using VS2010 and expression blend to make my app and currently I have a custom style and item template for a single listbox item (text).

This is my code so far

<phone:PhoneApplicationPage.Resources>
        <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
            <StackPanel Margin="0,20" HorizontalAlignment="Center">
                <StackPanel.Resources>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="HorizontalContentAlignment" Value="Center"/>
                    </Style>
                </StackPanel.Resources>
            </StackPanel>
        </ItemsPanelTemplate>
        <Style x:Key="ListBoxStyle1" TargetType="ListBox">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBox">
                        <ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="#FF82C12E" Padding="{TemplateBinding Padding}" HorizontalAlignment="Center" FontSize="48">
                            <ItemsPresenter HorizontalAlignment="Center"/>
                        </ScrollViewer>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>

Thanks for your help!


Solution

  • You can have an ItemTemplate:

      <DataTemplate x:Key="MyItemTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0"/>
                <TextBlock Grid.Row="1"/>
            </Grid>
        </DataTemplate>
    

    And in your ListBox bind the property:

    <ListBox ItemTemplate="{StaticResource MyItemTemplate}"/>