tags:

views:

321

answers:

0

I have a complicated setup and I hope someone can shed some light on this problem. My apologies up front for its length. The essence of the problem is that a ListBox that uses two different DataTemplates for its ListBoxItems does not resize when Grid columns in those data templates collapse and are then made visible. One template inserts a horizontal ListBox into a ListBoxItem. Screen shots don't copy, so I can't show you what it looks like.

I have a ListBox that uses a template selector for the list items. There are two templates used. One looks like this:

            <DataTemplate x:Key="sTemplate" DataType="{x:Type cData:S1}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock Grid.Column="0" Width="30" 
                               Visibility="{Binding mVisibility}"
                               Text="{Binding mKm}"
                               TextWrapping="Wrap"
                               Margin="2,0,2,0"/>

                    <Line Grid.Column="1" Visibility="{Binding SeparatorVisibility}" 
                          SnapsToDevicePixels="True" 
                          Stroke="Black" Stretch="Fill" Y1="0" Y2="1"
                          Margin="2,0,2,0"/>

                    <TextBlock Grid.Column="2" Width="60" Text="{Binding Name}" 
                               Visibility="{Binding NameVisibility}" 
                               VerticalAlignment="Center" Margin="2,0,2,0"/>

                    <ListBox Grid.Column="3" 
                             SelectionMode="Extended" 
                             ItemTemplate="{StaticResource vvTemplate}" 
                             ItemsSource="{Binding}" SelectedIndex="-1" 
                             ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                         <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <DockPanel/>
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                    </ListBox>
                </Grid>
            </DataTemplate>

The vvTemplate used above looks like this:

     <DataTemplate x:Key="vvTemplate" DataType="{x:Type cData:Vv}"> 
       <Grid HorizontalAlignment="Stretch">
           <local:MyProgressBar Value="{Binding Path=PercentageUsed}" 
                                StructureType="{Binding StructureType}" />
       </Grid>
     </DataTemplate>

The other Template looks like this:

            <DataTemplate x:Key="bTemplate" DataType="{x:Type cData:S1}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock Grid.Column="0" Width="30" 
                               Visibility="{Binding mVisibility}" 
                               Text="{Binding mKm}" 
                               TextWrapping="Wrap" 
                               VerticalAlignment="Center" Margin="2,0,2,0"/>

                    <Line Grid.Column="1" Visibility="{Binding SeparatorVisibility }" 
                                       SnapsToDevicePixels="True" 
                                       Stroke="Black" Stretch="Fill" Y1="0" Y2="1" Margin="2,0,2,0"/>

                    <TextBlock Grid.Column="2" Width="60" Text="{Binding Name}" 
                               Visibility="{Binding NameVisibility}" 
                               TextWrapping="Wrap" 
                               VerticalAlignment="Center" Margin="2,0,2,0"/>

                    <local:MyProgressBar x:Name="xProgressBar"
                                         Grid.Column="3"     
                                         Value="{Binding PercentageUsed}" 
                                         Height="{Binding bw, 
                                         Converter={StaticResource HeightConverter}}"
                                         BorderBrush="Transparent" 
                                         BorderThickness="0" 
                                         Style="{StaticResource HoverStyle}" >
                     </local:MyProgressBar>
                </Grid>
            </DataTemplate>

It's basically identical to the first template, except it uses a ProgressBar in place of the ListBox in the last grid column.

The XAML that uses the templates above:

        <Grid>
           <Grid.Resources>
               ... templates in here
           </Grid.Resources>

           <Grid HorizontalAlignment="Stretch" 
                 SnapsToDevicePixels="True">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <DockPanel>
                    <Label Content="Name:"/>
                    <Label Content="{Binding Path=EntityName}"/>
                    <Label Content="Rate:"/>
                    <Label Content="{Binding Path=Rate, Converter={StaticResource DataRateConverter}}"/>
                    <Label Content="{Binding Path=RateName, 
                           Converter={StaticResource SurroundObjectWithMarksConverter}, 
                           ConverterParameter='['}"/>
                </DockPanel>


                <ListBox Grid.Row="1" 
                         ItemContainerStyle="{StaticResource SimpleListBoxItem}" 
                         ScrollViewer.VerticalScrollBarVisibility="Auto" 
                         IsSynchronizedWithCurrentItem="True"
                         SelectionMode="Extended"
                         SnapsToDevicePixels="True">

                    <ListBox.ItemTemplateSelector>
                        <local:StsTemplateSelector
                            BulkTemplate="{StaticResource SBTemplate}"
                            VtStructuredTemplate="{StaticResource sTemplate}"
                            PropertyToEvaluate="StructureType"
                            PropertyValueToCompareAgainst="Bulk"/>
                    </ListBox.ItemTemplateSelector>
                </ListBox>
             </Grid>
          </Grid>

Both of the templates above basically format the ListBoxItem with 4 columns. The first and third columns have descriptive text in them and they are being collapsed and uncollapsed. The second column is a line used to separate the first and third. The last column of the first template puts a horizontal ListBox in the ListBoxItem. The ListBoxItems of this embedded ListBox are styled ProgressBars of circles and/or squares.

The problem is when one column is collapsed, the ListBoxItems with ListBoxes in them move to the left and the ListBox does not resize (white space at the end of those rows), even if the LastChildFill=false in the DockPanel of the ItemsPanelTemplate in the sTemplate DataTemplate. It WILL resize if I move the vertical scroll bar. The ListBox will not resize after that upon further collapsing and uncollapsing of the columns. There is just white space at the end of those rows with the ListBoxes in them.

Any ideas are appreciated. Thanks if you made it this far.