Question

I have a simple listbox with more items than fit on the screen. If you scroll to the last item it is shown but then drops back off the screen – I can’t leave it in view. After an hour of Googling it seems to be a known issue in early versions of the Listbox but it still seems to be the case in the latest tools. There also seems to be a problem with fixed heights and virtualization, but setting the height at item level or listbox level makes no difference. I see the Listbox in the WindowsPhoneDataBound app template works fine with scrolling and no heights.

I would also like a solution without fixed heights so that it does not require a new state for Landscape orientation.

Any suggestions please?

My listbox is in a usercontrol that is in a PivotItem:

        <controls:PivotItem x:Name="pivotItemSetup" Header="setup">
            <local:listBoxBlindsControl Margin="0,0,-12,0"/>
        </controls:PivotItem>

and the user control:

 <Grid x:Name="LayoutRoot" Background="Transparent">
        <ListBox x:Name="listBoxBlinds" ItemsSource="{Binding BlindSet.Blinds}" SelectionChanged="MainListBox_SelectionChanged" Height="500">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Height="80" Margin="0,0,0,17" Width="103">
                        <StackPanel Orientation="Horizontal"  Visibility="{Binding IsBreak, ConverterParameter=true, Converter={StaticResource boolToVisibility}}" VerticalAlignment="Top" d:LayoutOverrides="Width">
                            <TextBlock Text="{Binding LevelNumber, ConverterParameter='level \{0\} - ', Converter={StaticResource stringTextConverter}}" TextWrapping="NoWrap" Margin="0" Style="{StaticResource PhoneTextExtraLargeStyle}" d:LayoutOverrides="Width"/>
                            <TextBlock Text="{Binding SmallBlind, ConverterParameter=\{0\}/, Converter={StaticResource stringTextConverter}}" TextWrapping="NoWrap" Margin="0" Style="{StaticResource PhoneTextExtraLargeStyle}" d:LayoutOverrides="Width"/>
                            <TextBlock Text="{Binding BigBlind}" TextWrapping="NoWrap" Margin="0" Style="{StaticResource PhoneTextExtraLargeStyle}" d:LayoutOverrides="Width"/>
                        </StackPanel>
                        <TextBlock x:Name="txtbreak" Text="break" TextWrapping="NoWrap" Margin="0,0,0,23" Style="{StaticResource PhoneTextExtraLargeStyle}" d:LayoutOverrides="Width, Height" Visibility="{Binding IsBreak, ConverterParameter=false, Converter={StaticResource boolToVisibility}}" Foreground="{StaticResource PhoneAccentBrush}" />
                        <StackPanel Orientation="Horizontal" Margin="0,0,0,23" VerticalAlignment="Bottom" d:LayoutOverrides="Width">
                            <TextBlock Text="{Binding MinutesPerBlind, ConverterParameter=\{0\} minutes, Converter={StaticResource stringTextConverter}}" TextWrapping="NoWrap" Margin="0" Style="{StaticResource PhoneTextSubtleStyle}" d:LayoutOverrides="Width"/>
                            <TextBlock Text="{Binding Ante, ConverterParameter=\, \{0\} ante, Converter={StaticResource stringTextConverter}}" TextWrapping="NoWrap" Margin="0" Style="{StaticResource PhoneTextSubtleStyle}" d:LayoutOverrides="Width" Visibility="{Binding Ante, ConverterParameter=0, Converter={StaticResource valueToVisibility}}"/>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

Some more info: I copied and pasted the exact XAML from the WindowsPhoneDataBoundApp (which works) into my usercontrol so that it now looks like this:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ListBox x:Name="listBoxBlinds" Margin="0,0,-12,0" ItemsSource="{Binding BlindSet.Blinds}" SelectionChanged="MainListBox_SelectionChanged">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Margin="0,0,0,17" Width="432">
                    <TextBlock Text="{Binding LevelNumber}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                    <TextBlock Text="{Binding SmallBlind}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

and it does not work… so is it something to do with the PivotItem?
Update: I took this code out of the PivotItem and it works fine.. so any ideas how to get it working in a pivotitem?

Answer 1

I needed this exact thing and ended up just binding the HEIGHT of the listbox to the ACTUALHEIGHT of the stackpanel that contains it.

So you might have

<controls:PivotItem Header="Destinations" Margin="0,0,12,0" Name="pvtItemDestinations">
    <StackPanel Name="stkDestinations">
        <ListBox Name="lstDestinations" 
                 HorizontalContentAlignment="Stretch" 
                 Height="{Binding ElementName=stkDestinations, Path=ActualHeight, Mode=OneWay}">
            <ListBox.ItemTemplate>
                ...
                xaml continues
                ...
            </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>
</controls:PivotItem>

Then, make sure the stackpanel is set to automatically fill whatever space it’s in and presto, the listbox will resize to the size of it’s stackpanel container, and the scrolling logic will kick in properly.

Note that this mainly applies when your itemtemplate ends up defining items that can vary in height. If they’re all the same height, it’s usually not a problem.