CODEWITHSUNDEEP
xamllayoutwindows-phone-8
Coltin
Coltin

Reputation: 3794

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

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.

Upvotes: 5

Views: 1584

Answers (3)

Uma Shankar Pathak
Uma Shankar Pathak

Reputation: 41

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>

Upvotes: 0

JustinAngel
JustinAngel

Reputation: 16102

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.

Upvotes: 1

Joe Healy
Joe Healy

Reputation: 5817

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?

Upvotes: 0

Related Questions