开发者

Remove additional vertical whitespace from WPF

    <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:

Remove additional vertical whitespace from WPF

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;
    }


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.


By default, controls will expand to fill all the space its container will give it. That's what you're seeing, and it's expected, since you didn't tell it to do anything else (i.e., you didn't set any alignment properties on the ListBox).

If you'd rather have the ListBox take up only as much height as necessary to show its items, then set its VerticalAlignment property to something other than the default value of Stretch. For example:

<ListBox Name="personListBoxTest" 
         VerticalAlignment="Top"
         ...

Or you could use Bottom or Center if you prefer -- whatever makes the most sense for your layout.

Assuming you use Top, then if the listbox only has enough items to fill half of the space given by the ListBox's parent, then the whole ListBox will only take up that much space, and the remainder of the parent will be empty. But if there get to be so many ListBox items (or the parent gets so small) that the items won't all fit, the ListBox will fill all the space and show a scrollbar, just like you'd want it to.


If i understand your question correctly, you can use Height="Auto" for your listbox (or other controls) and if you want to keep your window's height updated according to the listbox, you can bind your windows height to the listbox with the below code:

Height="{Binding ActualHeight, ElementName=personListBoxTest}"

i hope it can be useful for you.


Perhaps...

<StackPanel LastChildFill="False">


You need to make the container that contains the ListBox to have a height of AUTO

ListBox1 is in a row of height AUTO

ListBox2 is in a row span of height *

This'll allow you to have the correct height on the listbox as the size of the values in the container up until the max height of the container that is holding it... kind of confusing but hope it makes sense.

Hope that helps!

See this sample code

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <ListBox Grid.Column="0" Grid.Row="0" Background="blue">
        <ListBoxItem>I'm an item in listbox1</ListBoxItem>
        <ListBoxItem>I'm an item in listbox1</ListBoxItem>
        <ListBoxItem>I'm an item in listbox1</ListBoxItem>
        <ListBoxItem>I'm an item in listbox1</ListBoxItem>
        <ListBoxItem>I'm an item in listbox1</ListBoxItem>
        <ListBoxItem>I'm an item in listbox1</ListBoxItem>
    </ListBox>

    <ListBox Grid.Column="1" Grid.RowSpan="2" Grid.Row="0"  Background="red">
        <ListBoxItem>I'm an item in listbox2</ListBoxItem>
        <ListBoxItem>I'm an item in listbox2</ListBoxItem>
        <ListBoxItem>I'm an item in listbox2</ListBoxItem>
        <ListBoxItem>I'm an item in listbox2</ListBoxItem>
        <ListBoxItem>I'm an item in listbox2</ListBoxItem>
        <ListBoxItem>I'm an item in listbox2</ListBoxItem>
        <ListBoxItem>I'm an item in listbox2</ListBoxItem>
    </ListBox>
</Grid>


Wrap your ListBox in a Grid and set it's VerticalAlignment="Top"

It sounds like your ListBox control is inside another element such as a Grid or DockPanel, which by default stretches it's children to fill all available space.

<Grid>
    <ListBox VerticalAlignment="Top" ... />
</Grid>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜