Problem with Height of Injected View

Topics: Prism v2 - WPF 3.5
Dec 9, 2009 at 11:44 AM

I have my first application using WPF & Prism, running fairly well.  More I use it, more I like it.  However, I have a problem I don't know how to solve.  My problem is a listview that is being cutoff at the bottom of the region.

The outter shell xaml is

<Window x:Class="WebSiteMon.Shell"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:cal="http://www.codeplex.com/CompositeWPF"
    xmlns:Controls="clr-namespace:WebSiteMon.Controls"
    xmlns:Infrastructure="clr-namespace:WebSiteMon.Infrastructure;assembly=WebSiteMon.Infrastructure"

    Title="Web Site Monitoring Utility" Height="600" Width="800"  WindowStartupLocation="CenterScreen" Background="{DynamicResource WindowBackgroundBrush}" >
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*"/>
            <RowDefinition Height="10px" />
            <RowDefinition MaxHeight="250" OverridesDefaultStyle="True" Height="Auto" />
            <RowDefinition Height="10px" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="10px"/>
            <ColumnDefinition />
            <ColumnDefinition Width="10px" />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition Width="10px"/>
        </Grid.ColumnDefinitions>
        <Controls:RoundedBox Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1"></Controls:RoundedBox>
        <Controls:RoundedBox Grid.Column="3" Grid.ColumnSpan="3" Grid.Row="1" Grid.RowSpan="1"></Controls:RoundedBox>
        <Controls:RoundedBox Grid.Column="1" Grid.ColumnSpan="5" Grid.Row="3" Grid.RowSpan="1"></Controls:RoundedBox>
        <ItemsControl x:Name="MenunRegion"  Margin="0,0,0,7"
                Grid.Column="0" Grid.ColumnSpan="7" Grid.Row="0" Grid.RowSpan="1"
                cal:RegionManager.RegionName="{x:Static Infrastructure:RegionNames.MENUREGION}"/>
        <ItemsControl x:Name="ActionRegion"  Margin="7"
                Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1"
                cal:RegionManager.RegionName="{x:Static Infrastructure:RegionNames.ACTIONREGION}"/>
        <ItemsControl x:Name="ResultsRegion"  Margin="7"
                Grid.Column="3" Grid.ColumnSpan="3" Grid.Row="1" Grid.RowSpan="1"
                cal:RegionManager.RegionName="{x:Static Infrastructure:RegionNames.RESULTSREGION}"/>
        <ItemsControl x:Name="MainRegion"  Margin="7"
                Grid.Column="1" Grid.ColumnSpan="5" Grid.Row="3" Grid.RowSpan="1"
                cal:RegionManager.RegionName="{x:Static Infrastructure:RegionNames.LISTREGION}"/>

    </Grid>

</Window>

When I insert a ListView into the LISTREGION, it expands to correct size (at least for 3 items).  My problem is with the RESULTREGION. 
A simplified XAML code that is inserted is -
<UserControl x:Class="WebSiteMon.Results.Views.NormalResults"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:CustomNumberFormat="clr-namespace:WebSiteMon.Infrastructure.Converters;assembly=WebSiteMon.Infrastructure"
>

<UserControl.Resources>
<CustomNumberFormat:FormattingConverter x:Key="FormattingConverter"/>
</UserControl.Resources>
<Grid>
<TabControl >
<TabItem Header="Raw Data">
<ListView Name="RawData" AlternationCount="1" ItemsSource="{Binding}" >
<ListView.View>
<GridView>
<GridViewColumn Header="Date" DisplayMemberBinding="{Binding Path=ListResults.GetDate}" />
<GridViewColumn Header="Time" DisplayMemberBinding="{Binding Path=ListResults.GetTime}" />
<GridViewColumn Header="Scan Time" DisplayMemberBinding="{Binding Path=ListResults.ScanTimeSec}" />
</GridView>
</ListView.View>
</ListView>
</TabItem>
</TabControl>
</Grid>
</UserControl>
When I add 100+ items to the listview, the view displays like it is in a window that is tall enough to display all the items and 
the items outside of the region are clipped. Rather than displaying just the number
that will find in the region with a vertical scroll bar.


 

Dec 9, 2009 at 1:20 PM

Hi

Some time ago, I blogged about a similar issue that could be reproduced with the UIComposition QS, and provided a fix for it. You might find it useful.

Please let me know if this helps.

Damian Schenkelman
http://blogs.southworks.net/dschenkelman

Dec 9, 2009 at 4:20 PM

Your suggestions partially solves the problems.  If I set the Height to a value, the ListView displays as expected.  And per your blog, renders much faster.  Thanks for that tip.

But it doesn't solve my real problem.  I don't believe I made this clear enough in my first post.  This ListView is in a region that resizes as the main window is resized.  What I want the ListView to do is to fill the region and automatically resize as the region is resized.  What happens is that the ListView acts like it is in a window of infinite height and gets clipped off at the bottom of the region.

Any suggestions for a novice?

Dec 11, 2009 at 1:10 PM

I found a solution.  As I was not getting the size correct, I went looking for a way to bind the <tabcontrol> height to it's parent object.

What I did was change the following line

 

       
       <TabControl  >

 

I changed it to

        <TabControl Height="{Binding RelativeSource={RelativeSource FindAncestor,
            AncestorType={x:Type ItemsControl}}, Path=ActualHeight}">

Works extremely well. 

<rant>After I found this solution in a blog, I went looking in MSDN help files and really could not find good documenation on this option.  From the code it is obvious what the binding is doing, but lack of good documentation on really neat features like this that are deep in WPF, makes it hard for newbies like myself to fully learn WPF.</rant>