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

6 posts, 0 answers
  1. ThiefRiver
    ThiefRiver avatar
    12 posts
    Member since:
    Mar 2014

    Posted 25 Apr 2014 Link to this post

    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?
  2. Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 30 Apr 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
  4. ThiefRiver
    ThiefRiver avatar
    12 posts
    Member since:
    Mar 2014

    Posted 30 Apr 2014 in reply to Deyan Link to this post

    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?

  5. Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 30 Apr 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. ThiefRiver
    ThiefRiver avatar
    12 posts
    Member since:
    Mar 2014

    Posted 30 Apr 2014 in reply to Deyan Link to this post

    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>
  7. ThiefRiver
    ThiefRiver avatar
    12 posts
    Member since:
    Mar 2014

    Posted 30 Apr 2014 in reply to ThiefRiver Link to this post

    Solved it by setting:
    IsAsyncBalanceEnabled="True" 
    AsyncBalanceMode="FillViewportFirst" 
    RealizedItemsBufferScale="4"
Back to Top
DevCraft banner