RadListBox Visibility.Collapsed

[Robbe Morris]

Thoughts on what I'm doing wrong here?  If I collapse a ListBoxItem, why does the RadListBox control on partially collapse it?  It still has a height of a couple of pixels when the bound property for visiblity is set to Visibility.Collapsed.

<telerik:RadListBox Name="MainListControl" Grid.Row="3"
                       VerticalAlignment="Stretch"
                        VerticalContentAlignment="Stretch"
                        HorizontalAlignment="Stretch"
                        HorizontalContentAlignment="Stretch"
                        Background="White"
                        Margin="0,0,0,0"
                        ItemsSource="{Binding Path=HumanResources,Mode=TwoWay}" >
            <telerik:RadListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                </ItemsPanelTemplate>
            </telerik:RadListBox.ItemsPanel>
            <telerik:RadListBox.ItemTemplate>
                <DataTemplate>
                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  Visibility="{Binding Path=IsVisible, Mode=TwoWay,Converter={StaticResource localVisibilityConverter}}" >
                        <Grid.RowDefinitions>
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <StackPanel Name="ButtonPanel" Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Left" Margin="3,3,3,3">
                            <telerik:RadButton x:Name="EditButton" Margin="3,3,3,3" Click="Edit_Click" Tag="{Binding Path=HumanResourceID}"  Content="{Binding Edit, Source={StaticResource GeneralStrings}}"   />
                        </StackPanel>
                        <TextBlock Grid.Column="1" x:Name="expanderCaption" HorizontalAlignment="Stretch" VerticalAlignment="Center"  Text="{Binding Path=Description}" Margin="3,3,3,3"  />
                    </Grid>
                </DataTemplate>
            </telerik:RadListBox.ItemTemplate>
        </telerik:RadListBox>

[Dani]

Hi Robbe,

What you are doing is actually setting Visibility to the Content of the RadListBoxItem instead of the item itself. Collapsed visibility in the DataTemplate will only hide content of the listbox item, but the rest of the control template, like borders for mouse over and selected states, will remain visible. And this is just what happens in your scenario. That is why the item you expect to be hidden, shows thin borders only.

The native MS ListBox control behaves in the same way. Only, no Borders remain visible because the visual states of the item do not use borders at all. So there is no visual representation of the item. But it is still there and only its Content is hidden.

It is best if you simply add or remove items to the collection. But If your scenario does not allow that, I suggest you consider using a StyleSelector to provide a separate style for items you wish to be hidden. In that style, all borders and border thicknesses should be removed. You can leave the ContentPresenter only.

I hope this information will be helpful.

Regards,
Dani
the Telerik team

[Robbe Morris]

I had a feeling it was something like this.  Thanks for confirming it for me.  For anyone who comes along and finds this.  The easiest solution in my case was to implement binding the RadListBox to a CollectionViewSource and binding the listbox to its .View property.  I then used the Filter callback to filter on my .IsVisible property.

 

 

 

 

 

[n/a]

For anyone who comes across this post, i found a much more simple way to hide RadListBox Items. If the item just disappears after adding the style below AND you have verified the binding is working then check to make sure the style's BasedOn value is set to RadListBoxItemStyle (not ListBoxItemStyle) and the data trigger value (bool in my case) seems to be case sensitive, so setting it to "False" didnt work for me, i had to set it to "false". Hope this helps someone with this frustrating poorly documented issue. 

<telerik:RadListBox ItemsSource="{Binding OverrideLines}"
                                ItemTemplate="{StaticResource OverrideFileLineTemplate}">

                        <telerik:RadListBox.ItemContainerStyle>
                            <Style TargetType="{x:Type telerik:RadListBoxItem}" BasedOn="{StaticResource RadListBoxItemStyle}">
                                <Setter Property="Visibility" Value="Visible"/>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding IsVisible, UpdateSourceTrigger=PropertyChanged}" Value="false">
                                        <Setter Property="Visibility" Value="Collapsed"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </telerik:RadListBox.ItemContainerStyle>
                    </telerik:RadListBox>

[Dinko | Tech Support Engineer]

Hi Charles Huegi,

Thank you for sharing your approach to the community. 

I am sorry to hear that you haven't found this approach not described in our documentation. Basically, in the NoXAML scenario, implicit custom style targeting our controls needs to be based on the default style of the controls. Otherwise, the controls won't appear. This scenario is mentioned in the Overview article of RadListBox control. May I ask you to share which article were you referencing in your post, that does not contain this so we can consider it to be updated.

Regards,
Dinko
Progress Telerik

[n/a]

Hi Dinko,

My apologies for not being a little more clear on the documentation part of my post. Yes, you're absolutely correct that the overriding of styles is mentioned in the RadListBox documentation, however this post is referring to someones ability to completely hide/show rad list box items without modifying the number of items in the source collection. If you do some searching around the net you'll see this is not the easiest thing to find and modifying the number of items in the collection is what most people seem to be doing (i'm guessing because they cant find an easier way to do it). Anyway, i feel it should be mentioned in the "How To" section of the RadListBox documentation that someone does not need to remove/add items to the collection, they can just create a simple bool property on collection's object and toggle that back and forth. Of course if this not a Telerik approved method then i totally understand why it hasnt been mentioned.

Thanks,

Charlie

[Dinko | Tech Support Engineer]

Hi Charles Huegi,

Thank you for the additional details.

Hiding the items instead of deleting them from the bound collection is a way to optimize the process. But still, depending on the scenario, you will probably need to add additional logic that tracks down which items are removed (hide). This will add further complexity to the code. Still, it depends on the scenario. Generally speaking, I would suggest here to use the default approach by removing and adding items to the bound collection. If this approach is not suitable for you, you can consider using the one described in your previous post.

Regards,
Dinko
Progress Telerik