Windows Phone 7 ListBox uncustomizable?

Question

I've just recently started development using Visual Studio 2010 Express for Windows Phone and I put in a ListBox. I can't seem to manipulate the formatting. No matter what I do, the background is black/gray, the selected items have a blue border, and there is padding between the items in the listbox (i'm using images). Here is my code:

Xaml:

<Grid x:Name="ContentGrid" Grid.Row="1">
    <Grid Name="gallery">
        <Grid.RowDefinitions>
            <RowDefinition Height="370" />
            <RowDefinition Height="150" />
        </Grid.RowDefinitions>
        <Border BorderBrush="Red" Width="450"  CornerRadius="4" BorderThickness="2" 
            Background="Red" Margin="10,30,20,10" Padding="6,6,6,6">
            <Image Grid.Row="0" Grid.Column="0" Height="360"  x:Name="imgPreview"/>
        </Border>
        <ListBox x:Name="lbScrollGallery" Grid.Row="1" Grid.Column="0" Padding="0"
              VerticalAlignment="Top" Width="450" SelectionChanged="ScrollerSelectionChanged" 
              d:LayoutOverrides="HorizontalAlignment" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Image Width="100" Height="100" Stretch="Fill" Name="imgSource" 
                       VerticalAlignment="Center"
                       Source="{Binding Path=Url}" />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Grid>

Is there some way I can customize the listbox? Like change the background to red or make the padding between different items 0?

Answer 1

You should first look at this MSDN article about templating and styling in Silverlight (and WPF). Every control is customizable, just provide your own Template and ItemsContainerStyle here.

Answer 2

Hi Roy,

Here is some demo xaml that shows setting a few display properties.

    <ListBox Height="640" HorizontalAlignment="Left" Margin="6,6,0,0" Name="listBox1" VerticalAlignment="Top" Width="468">
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="Padding" Value="-12" />
                <Setter Property="Background" Value="White"/>
                <Setter Property="Foreground" Value="Black"/>
            </Style>

        </ListBox.ItemContainerStyle>
    </ListBox>

Note that inbuilt formatting is applying some padding which can be worked around with a value of -12. I also understand from Eric Fleck's post here that this may be a result of metro styling. The post offers an example of how to bypass this formatting alltogether on a button control. This may be an approach worth considering.