0

I'm creating a simple file browser where it's display will mimic that of the Windows (7) Explorer "Content" display mode. I envision a ListView control whose ItemsSource will be bound to a collection of FileSystemInfo objects. Each of the ListViewItems will show filename, last modified date/time, etc. However, I also want them to have an Expander which, when a user clicks it, will expand vertically to show the file's contents.

Below is my XAML code that I created with Expression Blend. This is the general template of what I want the ListViewItem to be. However, the Expander won't cause the Border's vertical height to expand out to match the additional space required by the Expander's Grid content (in this example a ScrollViewer that has a height of 500 -- obviously each file may have different dimensions depending on content -- image, plain text, etc).

So, what am I doing wrong here? Furthermore, I'm wondering if the ListView control will even behave properly by having its Item elements vertically expand/contract.

This is the ControlTemplate I wish to use for the ListItemView:

<Border BorderBrush="Black" BorderThickness="1" Background="Beige">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.5*"/>
                <RowDefinition Height="0.5*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.25*"/>
                <ColumnDefinition Width="0.50*"/>
                <ColumnDefinition Width="0.25*"/>
            </Grid.ColumnDefinitions>
            <Image Grid.RowSpan="2"/>
            <TextBlock Grid.Column="1" HorizontalAlignment="Left" TextWrapping="Wrap" Text="FileName" d:LayoutOverrides="Height" VerticalAlignment="Center"/>
            <TextBlock Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" Text="FileType" d:LayoutOverrides="Width, Height" VerticalAlignment="Center"/>
            <TextBlock Grid.Column="2" TextWrapping="Wrap" Text="DateTime Last Modified" VerticalAlignment="Center" d:LayoutOverrides="Width" Grid.RowSpan="2" HorizontalAlignment="Center"/>
            <Expander Header="Expander" d:LayoutOverrides="Width" Grid.ColumnSpan="3" Grid.Row="2">
                <Grid>
                    <ScrollViewer Content="File Contents" Height="500"/>
                </Grid>
            </Expander>
        </Grid>
    </Border>
H.B.
  • 166,899
  • 29
  • 327
  • 400
Jake Shakesworth
  • 3,335
  • 4
  • 29
  • 43
  • I don't understand, I copied your XAML and pasted it in a sample application, and the expander works just fine. What exactly is your problem? – Federico Berasategui Nov 11 '12 at 02:39
  • I'm expecting the Expander to expand downward, increasing the total height of the entire control to accommodate the ScrollViewer. For example, say a ListViewItem has a height of 200. The Expander might have a JPEG image in the ScrollViewer that has a height of 500. When I click the Expander, I expect the ListViewItem to expand to a height of 700 (200+500). My code does not do that. The ListViewItem stays at 200 and the Expander simply covers up the control's other elements. – Jake Shakesworth Nov 11 '12 at 04:02
  • http://stackoverflow.com/a/533046/1379664 – Blachshma Nov 11 '12 at 11:24

0 Answers0