Question

    <Border CornerRadius="2,2,2,2" BorderThickness="1" BorderBrush="LightSkyBlue" Margin="5,2,2,2" x:Name="PersonBorder" Visibility="Collapsed">
            <StackPanel Orientation="Vertical">

 <ListBox Name="personListBoxTest" 
          BorderThickness="0"
          ScrollViewer.HorizontalScrollBarVisibility="Hidden"
          ScrollViewer.VerticalScrollBarVisibility="Auto"
          HorizontalContentAlignment="Stretch"
          Background="LemonChiffon"
          >
    <ListBox.ItemTemplate >
        <DataTemplate>
            <StackPanel>
                <StackPanel Orientation="Horizontal" Background="Pink">
                    <StackPanel Orientation="Horizontal" Visibility="{Binding ElementName=Involvement, Path=Text, Converter={StaticResource cIsVisibleOrCollapsed}}" Margin="0,0,5,0">
                        <TextBlock Text="Involvement:"/>
                        <TextBlock Margin="5,0,0,0" Text="{Binding Path=NameInvolvementType}" Foreground="Blue" x:Name="Involvement"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock  Text="Name:"/>
                        <TextBlock Margin="3,0,0,0" Text="{Binding Path=FirstName}" Foreground="Blue" />
                        <TextBlock Margin="3,0,0,0" Text="{Binding Path=MiddleName}" Foreground="Blue" />
                        <TextBlock Margin="3,0,0,0" Text="{Binding Path=LastName}" Foreground="Blue" />
                        <TextBlock Margin="3,0,0,0" Text="{Binding Path=NameSuffix}" Foreground="Blue" />
                        <TextBlock Margin="5,0,0,0" Text="DOB:"/>
                        <TextBlock Margin="3,0,0,0" Text="{Binding Path=BirthDate, StringFormat=MM/dd/yyyy}" Foreground="Blue" />
                    </StackPanel>
                </StackPanel>
                <StackPanel  Visibility="{Binding ElementName=myEventAddress,Path=Visibility, Converter={StaticResource cVisibilityMirror}}" Orientation="Horizontal" >
                    <TextBlock Text="Address:" />
                    <EventDet:EventAddress Margin="5,0,0,0" x:Name="myEventAddress" Foreground="Blue" CityTextBlockOrientation="Horizontal" />
                </StackPanel>

                <StackPanel Visibility="{Binding ElementName=Phone1, Path=Text, Converter={StaticResource cIsVisibleOrCollapsed}}" Orientation="Horizontal">
                    <TextBlock Text="Home:" />
                    <TextBlock Margin="5,0,0,0" Text="{Binding Path=Phone1}" Foreground="Blue" x:Name="Phone1"/>
                </StackPanel>
                <StackPanel Visibility="{Binding ElementName=Phone2, Path=Text, Converter={StaticResource cIsVisibleOrCollapsed}}" Orientation="Horizontal">
                    <TextBlock Text="Mobile:" />
                    <TextBlock Margin="5,0,0,0" Text="{Binding Path=Phone2}" Foreground="Blue" x:Name="Phone2"/>
                </StackPanel>
                <StackPanel Visibility="{Binding ElementName=Phone3, Path=Text, Converter={StaticResource cIsVisibleOrCollapsed}}" Orientation="Horizontal">
                    <TextBlock Text="Work:" />
                    <TextBlock Margin="5,0,0,0" Text="{Binding Path=Phone3}" Foreground="Blue" x:Name="Phone3"/>
                </StackPanel>


                <StackPanel x:Name="PersonAlertSP" Visibility="Collapsed" Background="WhiteSmoke">
                    <TextBlock Text="Alerts:" />
                    <ListBox ItemsSource="{Binding Path=PersonAlertList}" x:Name="PersonAlertListBox"  BorderThickness="1" >
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Path=AlertType}" Margin="0,0,5,0" Foreground="Blue" Width="150"/>
                                    <TextBlock Text="{Binding Path=Description}" Margin="0,0,5,0" Foreground="Blue"/>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </StackPanel>


            </StackPanel>

        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

</StackPanel>
</Border>

code behind:

//this is a little unweidly, but its test code until this works
MobileWPF.singleton.EventDetailsTabControl.myEventDetailControl.personListBoxTest.ItemsSource =
    dc.SessionEvent.SessionPersons.ToList();

Here’s an image of the result with 6 items, all the data is nonsense test data:

EDIT 2:

After playing around with it a bit, I guess this is what’s happening… First the ListBox is greedy and takes the maximum amount of vertical space, then some IValueConverter computations are done, and some elements are collapsed. However, once this is done, the ListBox height is not being updated.

EDIT 3:

I tried converting PersonListBoxTest into an ItemsControl, instead of a ListBox, with teh only difference in code being that and the <ItemsControl.ItemTemplate > declaration… And now it works as expected, no extra whitespace.

So somehow the ItemsControl respects the fact that some of my elements are collapsed through the IValueConverters, and the ListBox doesn’t. I played around with the VirtualizingStackPanel attribute in ListBox, setting IsVirtualizing to both true and false (no change), before testing the ItemsControl.

I’ll give the points to anyone who can explain why it works how I observed it.
Thanks for your answers everyone, you never know what’s going to make the difference.

Here’s an example of an IValueConverter, which is being used, they are all about the same.

[ValueConversion(typeof(object), typeof(System.Windows.Visibility))]
public class NullToVisibleOrCollapsed : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null) return System.Windows.Visibility.Collapsed;

        if (value is Image)
        {
            if (((Image)value).Source == null) return System.Windows.Visibility.Collapsed;
            return System.Windows.Visibility.Visible;
        }

        if (value is string)
        {
            string myString = (string)value;
            if (string.IsNullOrEmpty(myString) == true)
                return System.Windows.Visibility.Collapsed;
        }

        if (value is int)
        {
            int myInt = (int)value;
            if (myInt == 0)
                return System.Windows.Visibility.Collapsed;
        }

        return System.Windows.Visibility.Visible;
    }

Answer 1

The reason this is happening is because ListBox overrides the default ItemsPanelTemplate settings to use a VirtualizingStackPanel. It does this because VirtualizingStackPanel supports UI virtualization, meaning that only the visible controls are evaluated and created, which can improve performance over large sets of data.

During UI virtualization, a control checks the visibility of a child element, then measures it and its descendants. This order of evaluation is the key reason you are seeing extra space. You are using the bound value of a child element to set your parent element’s Visibility.

<StackPanel 
    ...
    Visibility="{Binding 
                    ElementName=Phone1,
                    Path=Text,
                    Converter={StaticResource cIsVisibleOrCollapsed}}">
    <TextBlock
        x:Name="Phone1"
        Text="{Binding Path=Phone1}" />
</StackPanel>

When the framework evaluates your StackPanel, Visibility is not yet set, so it defaults to Visible. You can fix this if you changed the Visibility binding to use the same binding path as the child property instead.

<StackPanel 
    ...
    Visibility="{Binding Phone1, 
                    Converter={StaticResource cIsVisibleOrCollapsed}}">
    <TextBlock
        x:Name="Phone1"
        Text="{Binding Path=Phone1}" />
</StackPanel>

You could also specify a FallbackValue of Collapsed, which tells the engine to use Visibility.Collapsed in the event it cannot resolve the binding. However, I’d be cautious about doing that because it seems like this would screw up the UI measurements, which might have other unwanted effects.

Finally, the normal ItemsControl template doesn’t need to pre-measure because it doesn’t support UI virtualization. In other words, the controls are generated and then hidden and the size is adjusted accordingly.