Windows Phone ListBox Item Background Changing Color Even Though It's Set Explicitely

5
votes

I am looking for 1) what is going on, and 2) how to fix the issue.

Issue

If a ListBox Item height is above 2521, it seems to change the background to black even when the background is explicitly set to something else.

How To Reproduce

Take the sample XAML file I have below, and in your xaml.cs file add the following:

DataContext = new List<int>() { 1 };

Change the height of the TextBlock to 2522 or higher.

The sample code is not where I encountered the issue, however it is a simple example to demonstrate the bug. I am not planning on having a TextBlock that is 2522+ in size :)

Sample XAML file

    <Grid x:Name="LayoutRoot" Background="Brown">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <phone:Pivot x:Name="pivot" Title="{Binding name}" Grid.Row="1" Foreground="White" Margin="10,0,0,0">
            <phone:PivotItem x:Name="mainPivot" Header="menu" Margin="0,0,20,0">
                <ListBox ItemsSource="{Binding}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid Background="White">
                                <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
                                    <TextBlock Height="2521" Text="some data" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontSize="22" Foreground="Purple"/>
                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </phone:PivotItem>

        </phone:Pivot>

    </Grid>
</phone:PhoneApplicationPage>

Remarks

A few people have raised concerns about my UI. The above code is a sample and not my actual UI. There are no performance issues and the ListBox is not sluggish. Everything works as expected except the background changes color.

3
xamllayoutwindows-phone-8
Not trying to be offensive, but I have a feeling you don't really understand ListBoxes and DataTemplates, unless you really want each ListBoxItem to contain over 100 TextBlocks, in which case you should rethink how you're visualizing the data. I wouldn't be surprised to learn you've run into some sort of implementation limit by adding these many UIElements to the DataTemplate. Windows Phone 7 had a limitation that each UIElement could be at most 2048 (or some number close to that) pixels tall, this might be something similar. I advice you to look into ListBoxes and how to populate them. – Praetorian
I have a very complex UI that I have distilled to this simple example for the sake of brevity. I initially thought it was because my UI has a lot of depth (in XAML), but it turns out it might be the number of elements; or perhaps as you've mentioned the height limitation. I will do some experimentation to see if the height is the culprit. – Coltin
I will modify my question to clarify that the sample code demonstrates the bug in a simple way, and that it does not reflect my actual code at all. – Coltin
@Coltin rethink your UI. That many TextBlocks for a single item would have terrible performance. I have no idea what you're trying to create, but this isn't the approach you should be using if you're trying to make some sort of reader.. or whatever is going on here. – William Melani
As I said before, I don't have that many TextBlocks in my actual UI. This was a simple EXAMPLE to demonstrate the issue. My UI is implemented fully and there are no performance issues, it just displays a black background and I'm looking for the cause. – Coltin

3 Answers

1
votes

In WP7 TextBlocks had a height limit of 2048x2048. I'm not sure if that was fixed in WP8 or not, but it seems like the same issue you're hitting right now. Consider splitting up text to chunks smaller than 2048 pixels or using something that does that for you like ScrollableTextBlock.

0
votes

Not sure of the "why" but on the "what" it appears that the grid was the one running the black background. I take the grid out and it behaves...

    <phone:Pivot x:Name="pivot" Title="{Binding name}" Grid.Row="1" Foreground="White" Margin="10,0,0,0">
        <phone:PivotItem x:Name="mainPivot" Header="menu" Margin="0,0,20,0" >
            <ListBox ItemsSource="{Binding}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28" Background="White">
                            <TextBlock Height="2530" Text="some data" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontSize="22" Foreground="Purple"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </phone:PivotItem>

Does that work for you?

0
votes

you can set minWidth to the listbox. this might help you.

 <Grid x:Name="LayoutRoot" Background="Brown">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <phone:Pivot x:Name="pivot" Title="{Binding name}" Grid.Row="1" Foreground="White" Margin="10,0,0,0">
        <phone:PivotItem x:Name="mainPivot" Header="menu" Margin="0,0,20,0">
            <ListBox ItemsSource="{Binding}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid Background="White">
                            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
                                <TextBlock Height="2521" Text="some data" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontSize="22" Foreground="Purple"/>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </phone:PivotItem>

    </phone:Pivot>

</Grid>