MarciaK

I have a ListView that contains a GridView. In the GridView, I am changing one of the columns to contain an Expander.

Code Block

<GridView x:Name ="GrdPerson">

<!--Details-->

<GridViewColumn Header="">

<GridViewColumn.CellTemplate>

<DataTemplate>

<Expander Expanded="expDetails_Resize" Collapsed="expDetails_Resize"

Tag="{Binding Path=PhotoID, Mode=OneWay}">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

<RowDefenition Height="Auto"/>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<Viewbox Grid.Row="0" Grid.Column="0" Grid.RowSpan="9">

<Image Name="imgPic1" Width="150" Height="120"

Source="{Binding Path=PhotoID, Converter={StaticResource ImgConvert}}">

</Image>

</Viewbox>

<!--** Row=0 DOB **-->

<TextBlock Grid.Row="0" Grid.Column="1" Margin="3"

Text="{x:Static cstrings:ContentStrings.DOBLbl}" FontWeight="DemiBold"/>

<TextBlock Grid.Row="0" Grid.Column="2" Margin="3" Name="tbDOBDetails"

Text="{Binding Path=DOB, Mode=OneWay,

Converter={StaticResource Formatter},ConverterParameter='date'}"/>

<!--** Row=1 SSN **-->

<TextBlock Grid.Row="1" Grid.Column="1" Margin="3"

Text="{x:Static cstrings:ContentStrings.SSNLbl}" FontWeight="DemiBold"/>

<TextBlock Grid.Row="1" Grid.Column="2" Margin="3" Name="tbSSNDetails"

Text="{Binding Path=SSNO, Mode=OneWay}"/>

<!--** Row=2 Height-->

<TextBlock Grid.Row="2" Grid.Column="1" Margin="3"

Text="{x:Static cstrings:ContentStrings.Height}" FontWeight="DemiBold"/>

<TextBlock Grid.Row="2" Grid.Column="2" Margin="3" Name="tbHeightDetails"

Text="{Binding Path=Height, Mode=OneWay,

Converter={StaticResource HeightConv}}"/>

<!--** Row=3 Weight-->

<TextBlock Grid.Row="3" Grid.Column="1" Margin="3"

Text="{x:Static cstrings:ContentStrings.WeightLbl}" FontWeight="DemiBold"/>

<TextBlock Grid.Row="3" Grid.Column="2" Margin="3" Name="tbWeightDetails"

Text="{Binding Path=Weight, Mode=OneWay}"/>

<!--** Row=4 Race-->

<TextBlock Grid.Row="4" Grid.Column="1" Margin="3"

Text="{x:Static cstrings:ContentStrings.RaceLbl}" FontWeight="DemiBold"/>

<TextBlock Grid.Row="4" Grid.Column="2" Margin="3" Name="tbRaceDetails"

Text="{Binding Path=Race, Mode=OneWay}"/>

<!--** Row=5 Eye Color-->

<TextBlock Grid.Row="5" Grid.Column="1" Margin="3"

Text="{x:Static cstrings:ContentStrings.EyeColorLbl}" FontWeight="DemiBold"/>

<TextBlock Grid.Row="5" Grid.Column="2" Margin="3" Name="tbEyeColorDetails"

Text="{Binding Path=EyeColor, Mode=OneWay}"/>

<!--** Row=6 Hair Color-->

<TextBlock Grid.Row="6" Grid.Column="1" Margin="3"

Text="{x:Static cstrings:ContentStrings.HairColorLbl}" FontWeight="DemiBold"/>

<TextBlock Grid.Row="6" Grid.Column="2" Margin="3" Name="tbHairColorDetails"

Text="{Binding Path=HairColor, Mode=OneWay}"/>

<!--** Row=7 First License No.-->

<TextBlock Grid.Row="7" Grid.Column="1" Margin="3"

Text="{x:Static cstrings:ContentStrings.LicenseNoLbl}" FontWeight="DemiBold"/>

<TextBlock Grid.Row="7" Grid.Column="2" Margin="3" Name="tbLicenseDetails"

Text="{Binding Path=LicenseNo, Mode=OneWay}"/>

<!--** Row=8-->

</Grid>

</Expander>

</DataTemplate>

</GridViewColumn.CellTemplate>

</GridViewColumn>

.

.

.

.

</GridView>

This works great, except that I have to load the photo with the list. The converter I have in there (ImgConvert) will retrieve the photo from the network and correctly places it in the Image control. I have tried retrieving the photo when the Expander is expanded, but couldn't get that to work. Is there another way to do that I don't want to have to load all the photos in the list unnecessarily, I just want to load them as needed.

Thanks,

MarciaK



Re: Windows Presentation Foundation (WPF) GridViewColumn CellTemplate

Dr. WPF

Assuming you are not changing the ItemsPanel of the ListView, you should be okay with your current approach.

The default items host of a ListView is a VirtualizingStackPanel. This provides UI virtualization, meaning only the UI elements that are visible within the current view will be created (plus a few trailing items that exist to support keyboard navigation).

Of course, since you do have an expander, you could optimize it further by changing your binding a little. Instead of a standard Binding, use a MultiBinding, like this:

Code Block

<Image Name="imgPic1" Width="150" Height="120">

<Image.Source>

<MultiBinding Converter="{StaticResource ImgConvert}">

<Binding RelativeSource="{RelativeSource FindAncestor,

AncestorType={x:Type Expander}}" Path="IsExpanded" />

<Binding Path="PhotoID" />

</MultiBinding>

</Image.Source>

</Image>

Then change the ImgConvert class to implement IMultiValueConverter. In your Convert function, check the first value and if its false, return null; otherwise, return the ImageSource.

Another optimization that I would recommend, if you're not already doing so, is to make sure your images are decoded to the Width and Height at which you display them. In your template, that is 150x120. If the actual images are larger than this, you can save a ton of memory by decoding them to the smaller size (assuming you don't zoom in on them at runtime, in which case you should decode to the maximum size at which they will be zoomed).






Re: Windows Presentation Foundation (WPF) GridViewColumn CellTemplate

MarciaK

Thank you, Dr. WPF!