If the first item in the DBLB is collapsed, it is still shown

[ThiefRiver]

I have an app which loads items into the DBLB through a ViewModel binding.

If the following structure is used:
Shown
Hidden
Hidden
Shown

The two elements will be shown in the ListBox, and the Hidden items, will stay hidden as expected.

However, if the structure is something like this:
Hidden
Shown
Hidden
Shown

The ListBox will show element 1,2 and 4 respectively.

How do I get around this issue?

[Deyan]

Hello Lars,

Thanks for writing.

I would not recommend collapsing visual containers in DBLB as this will mess with the UI virtualization mechanism that reuses containers. Why don't you simply use RadJumpList and apply filtering with a given condition that will eliminate the corresponding items from the list and bring them back when needed?

I hope this helps.

Regards,
Deyan
Telerik

 

 

[ThiefRiver]

Hi Deyan, and thank you for your reply.

The reason for why I've ended up with the DBLB and not the JumpList is the ability to use a WrapPanel as the main container. This allows me to change the layout of the DBLB items at runtime with minimal fuss while still maintaining a consistent design.

IE:
IMAGEIMAGEIMAGEIMAGE
IMAGEIMAGEIMAGEIMAGE
IMAGEIMAGEIMAGEIMAGE

IMAGEIMAGEIMAGEIMAGE
IMAGEIMAGEIMAGEIMAGE
IMAGEIMAGEIMAGEIMAGE

IMAGEIMAGEIMAGEIMAGE
IMAGEIMAGEIMAGEIMAGE
IMAGEIMAGEIMAGEIMAGE

Can be changed to:
IMAGE IMAGE IMAGE
IMAGE IMAGE IMAGE
IMAGE IMAGE IMAGE

Just by swapping out the ItemTemplate. Afaik this is not possible in the JumpList?

[Deyan]

Hi Lars,

Thanks for writing back.

RadJumpList directly inherits RadDataBoundListBox and builds on-top of it. Every single feature from RadDataBoundListBox is available in RadJumpList with few exceptions (like item reorder).

So your scenario should be working with RadJumpList as well.

If you experience any difficulties, let us know and we will help.

Regards,
Deyan
Telerik

 

 

[ThiefRiver]

Neat! Works exactly the same, plus the boon of being able to filter the items without resulting to Visibility Visible/Collapsed trickery.

One issue though, the 5th items background image in the JumpList is never loaded on the application initialization. Swapping between two ItemTemplates fixes the issue, but this seems to be a bug in the JumpList.

Item template 1: 
<DataTemplate x:Name="ThreeRows">
            <Grid Width="432" Height="210" Margin="0,0,0,12" 
                  HorizontalAlignment="Left" VerticalAlignment="Top">
                <toolkit:ContextMenuService.ContextMenu>
                    <toolkit:ContextMenu IsZoomEnabled="True" IsFadeEnabled="True">
                        <toolkit:MenuItem Header="Pin to start" Tag="{Binding Name}" Tap="ContextPin" />
                        <toolkit:MenuItem Header="Delete" Tag="{Binding Name}" Tap="ContextDelete" />
                    </toolkit:ContextMenu>
                </toolkit:ContextMenuService.ContextMenu>
                <Border BorderThickness="{Binding NsfwBorder}" BorderBrush="{StaticResource RivetPhoneAccentBrush}">
                    <Image Source="{Binding Image}" Width="Auto" Height="Auto" Stretch="UniformToFill" />
                </Border>
                <Rectangle Fill="{StaticResource RivetPhoneBackgroundBrush}" Opacity="0.4" HorizontalAlignment="Left" Height="60" Margin="0,140,0,0"
                           Stroke="{StaticResource TransparentBrush}" VerticalAlignment="Bottom" Width="432"
                           StrokeThickness="0" />
                <TextBlock Text="{Binding Name}" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Margin="6"
                           TextAlignment="Left" Style="{StaticResource PhoneTextNormalStyle}" FontSize="42"
                           FontFamily="Segoe WP Light" Foreground="{StaticResource RivetPhoneForegroundBrush}" />
            </Grid>
        </DataTemplate>

Item template 2:
        <DataTemplate x:Name="SixRows">
            <Grid Height="210" Margin="0,0,12,12" Width="210">
                <toolkit:ContextMenuService.ContextMenu>
                    <toolkit:ContextMenu IsZoomEnabled="True" IsFadeEnabled="False">
                        <toolkit:MenuItem Header="Pin to start" Tag="{Binding Name}" Tap="ContextPin" />
                        <toolkit:MenuItem Header="Delete" Tag="{Binding Name}" Tap="ContextDelete" />
                    </toolkit:ContextMenu>
                </toolkit:ContextMenuService.ContextMenu>
                <Border BorderThickness="{Binding NsfwBorder}" BorderBrush="{StaticResource RivetPhoneAccentBrush}">
                    <Image Source="{Binding SmallImage}" Stretch="UniformToFill" />
                </Border>
                <Grid VerticalAlignment="Bottom">
                    <Grid.Background>
                        <SolidColorBrush Color="{StaticResource RivetPhoneAccentColor}" Opacity="0.5" />
                    </Grid.Background>
                    <TextBlock Text="{Binding Name}" VerticalAlignment="Bottom" Margin="12,12,12,12"
                               TextAlignment="Left" Style="{StaticResource PhoneTextNormalStyle}" FontWeight="Medium" Foreground="{StaticResource RivetPhoneForegroundBrush}" />
                </Grid>
            </Grid>
        </DataTemplate>

[ThiefRiver]

Solved it by setting:
IsAsyncBalanceEnabled="True" 
AsyncBalanceMode="FillViewportFirst" 
RealizedItemsBufferScale="4"