Why is my ItemsControl truncated when its inside an ExpandView

Question

I have a WP7 project that has been giving me the runaround for too many days now. Any help in sorting this out would be hugely appreciated.

Basically, I have a ScrollViewer. Inside I have an ItemsControl. The ItemTemplate for the ItemsControl contains an Expander (adapted from the Silverlight 3 Toolkit). The Expander ContentTemplate has an ItemsControl.

Basically, what is happening is that when I expand one of the Expander items and that ItemsControl contains a larger amount of items (> 25), the "rendering" of the list appears to be truncated. There is a large empty space where the items should go, so there appears to be space reserved for them, but try as I might, they simply get truncated.

I've tried with three different types of Expander controls including the ExpanderView. Same results no matter what I try.

Here is a screenshot: http://www.IntuitiveWebDesigns.com/Photos/truncation.png

Here is a snippet from the XAML I am using.

     <ScrollViewer Grid.Row="1">
        <ItemsControl ItemsSource="{Binding Publishers}" Margin="0,10,0,0" Height="Auto">
           <ItemsControl.ItemTemplate>
              <DataTemplate>
                 <Border Background="Black" Opacity="60" OpacityMask="#8A000000" CornerRadius="10">
                    <controlToolkit:Expander ExpandDirection="Down" Header="{Binding}" Content="{Binding}" Height="Auto">
                       <controlToolkit:Expander.HeaderTemplate>
                          <DataTemplate>
                             <TextBlock Text="{Binding PublisherName}"  
                                           Foreground="{StaticResource PhoneAccentBrush}"
                                           FontSize="{StaticResource PhoneFontSizeExtraLarge}" 
                                           FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>
                          </DataTemplate>
                       </controlToolkit:Expander.HeaderTemplate>
                       <controlToolkit:Expander.ContentTemplate>
                          <DataTemplate>
                             <ItemsControl ItemsSource="{Binding Issues}">
                                <ItemsControl.ItemTemplate>
                                   <DataTemplate>
                                      <StackPanel>
                                         <TextBlock Text="{Binding TitleAndIssue}"
                                               Foreground="{StaticResource PhoneForegroundBrush}"
                                               FontSize="{StaticResource PhoneFontSizeNormal}" 
                                               FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>
                                         <TextBlock Text="{Binding StrAmount}"
                                               TextWrapping="Wrap"
                                               Margin="0,0,0,0"
                                               Foreground="{StaticResource PhoneAccentBrush}"
                                               FontSize="{StaticResource PhoneFontSizeNormal}" 
                                               FontFamily="{StaticResource PhoneFontFamilyNormal}"/>
                                      </StackPanel>
                                   </DataTemplate>
                                </ItemsControl.ItemTemplate>
                             </ItemsControl>
                          </DataTemplate>
                       </controlToolkit:Expander.ContentTemplate>
                    </controlToolkit:Expander>
                 </Border>
              </DataTemplate>
           </ItemsControl.ItemTemplate>
        </ItemsControl>
     </ScrollViewer>

Answer 1

You're hitting a limitation of the platform. Specifically that a UIElement can't be larger than 2048px in either dimension. This limitation exists for memory and performance reasons.

Rather than building your own control, try using one of the standard ones, or one from the phone version of the toolkit.

If you really want to use an expander style control, then reserve a smaller fixed size for the scrollable area and virtualize the list that is displayed.