Telerik Forums
UI for WPF Forum
2 answers
44 views

I'm using a VirtualizingWrapPanel as the ItemsPanelTemplate of a RadListBox

<telerik:RadListBox x:Name="ItemControl"
                    Grid.Row="1"
                    VirtualizingPanel.ScrollUnit="Pixel"
                    ItemsSource="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:UserControl}}, Path=PathName}">

    <telerik:RadListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <telerik:VirtualizingWrapPanel HorizontalAlignment="Center" ItemWidth="200" ItemHeight="180"/>
        </ItemsPanelTemplate>
    </telerik:RadListBox.ItemsPanel>

The ItemsSource is a ListCollectionView which is Live updating 

 


ListCollectionView = new(Models);
ListCollectionView.IsLiveSorting = true;

ListCollectionView.SortDescriptions.Add(new SortDescription("Percentage", ListSortDirection.Ascending));

The collection seems to be updating and reaching the UI; however, every so often I get empty cells in the RadListBox after a sorting happens.


If I scroll away and come back the area is filled in. Is there something I can do manually so that this area is filled in? Should I try reloading something in some way?

 

I've tried invalidating things in the wrap panel but this hasn't worked:

wrapPanel?.InvalidateArrange();
wrapPanel?.InvalidateMeasure();
wrapPanel?.InvalidateVisual();
wrapPanel?.UpdateLayout();

 

Any help or suggestions are appreciated

Martin Ivanov
Telerik team
 answered on 26 Mar 2024
0 answers
112 views

Hi Team

We are facing frequent more bottom margin issue in RadTreeView with TreeVirtualizationMode="Hierarchical".

There is two level of grouping like parent, child and grandchild. With Hierarchical mode it is happening frequently. But with Recyling and Standard mode it is not happening but the performace is not good. So it is not helping right now.

Tried to adjuest the padding, margins of TreeViewPanel. Nothing helpped. And the number of grand child count is dynamic so cannot assign Height as well.

Need some suggestion. Thanks in advance!

Eg.

Parent A (Expander)

     Child A (Expander)

          Grandchild A (Content)

          Grandchild B (Content)

-----------------------------

----More Blank Space----

------------------------------

Parent B (Expander)

 

Code


<telerik:RadTreeView x:Name="SearchResultTreeView"
                                     BorderThickness="0"
                                     PreviewKeyDown="SearchResultTreeView_PreviewKeyDown"
                                     telerik:RadTreeViewItem.Selected="SearchResultTreeView_Selected"
                                     ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                     IsVirtualizing="True" 
                                     telerik:TreeViewPanel.TreeVirtualizationMode="Hierarchical"
                                     PreviewMouseLeftButtonDown="SearchResultTreeView_PreviewMouseLeftButtonDown" 
                                     Margin="0,-1,-1,0" ItemsSource="{Binding MyDummyCollectionView}"
                                     Background="{x:Null}" 
                                     BorderBrush="{x:Null}">

Uma
Top achievements
Rank 1
 asked on 11 Mar 2022
3 answers
292 views
Hi,

I want to use the VirtualizingWrapPanel for a thumbnail view (similar to the File explorer view) that I'm building. However the thumbnails that the panel holds will not all be of the same size. Now the problem I'm facing is that the VirtualizingWrapPanel requires me to specify the ItemWidth. I cannot provide the ItemWidth because the width of the thumbnails are not always the same.. Is there any way to provide something similar to "auto" for ItemWidth? Any suggestions?

Currently I'm using the WPF VirtualizingStackPanel and it seems to work great but I'm wasting a lot of UI space and therefore want to use VirtualizingWrapPanel instead.

Thank you,
Rajani.
Yoan
Telerik team
 answered on 29 Jun 2016
1 answer
485 views

Hi,telerik:
I want to show some images in the listbox with VirtualizingWrapPanel and some will not. It depends on the property(IsDefault) that i have defined.
here is the code:

<P><ListBox.ItemContainerStyle><BR>               
<Style TargetType="{x:Type
ListBoxItem}"><BR>                                     
<Style.Triggers><BR>                       
<DataTrigger Binding="{Binding IsDefault}"
Value="true"><BR>                           
<Setter Property="Visibility"
Value="Collapsed"/><BR>                       
</DataTrigger></P>
<P>                       </P>
<P>                   
</Style.Triggers><BR>               
</Style><BR>           
</ListBox.ItemContainerStyle><BR></P>

but even through the value of the "IsDefault" is set to "true",the listboxitem still display in the listbox ,and the item is blank.
How do I do before they can get the effect I want?
Thanks and Regards,
Bill.

Chuck
Top achievements
Rank 1
 answered on 29 Jun 2015
3 answers
145 views
I was pointed to the virtualised wrappanel by another developer but i've not managed to figure out if what I need is possible.

I want to have a wrappanel containing custom objects eg:

public class CO
{
    public int GroupA {get; set;}
   
    ... other properties not needed for this example
}

I've also got a group object like:

public class Group
{
    public int ID {get; set}
    public string Description {get; set}
}

I'm wanting a wrappanel where I can show the CO's. That's easy, WPF does this already.

What i'm wanting to do is trigger a "group by" so if I set to say A, then the wrappanel shows

GROUP 1 DESCRIPTION
   all CO's with GroupA = 1

GROUP 2 DESCRIPTION
  all CO's with GroupA = 2

This can be toggled on/off.

A further complication is where I may have different groups to group by eg: another GroupB member or, have a List<int> GroupMember and group if the desired ID is found in the list.

I have found a control by a telerik competitor which does do what i'm asking, but the price is over 10x Telerik and definately out of my price point.

Can this be done in the telerik suite ?

Ivan Ivanov
Telerik team
 answered on 05 Jun 2015
1 answer
127 views
I was testing out this panel but found that it does not support item container recycling. E.g., if I set:

VirtualizingPanel.VirtualizationMode="Recycling"

Item containers are still created new each and every time. Are there any plans to support this feature? WPF's default VirtualizingStackPanel supports it OOTB, so I was expecting it here as well.
Ivan Ivanov
Telerik team
 answered on 17 Jul 2014
1 answer
70 views
I'm using VirtualizingWrapPanel  inside a Listbox, I have a list of objects as ItemsSource, the list exists all the time but when an object is in the view I retrieve it's image and show it, when an item is not in the view I remove the image, to reduce memory usage.
  
1. when I'm selecting object X and using shift + down arrow I see that the list is trying to retrieve all objects from 0 to X even when it is showing only 12 items at that time.
2. when using Ctrl +A (to select all objects) I don't want the list to retrieve all objects but only the ones that currently on the view.

Can you please advise what can I do to retrieve only the items that in the view?

Thanks,
Yael.
Ivan Ivanov
Telerik team
 answered on 07 Jul 2014
2 answers
596 views
Hello,

I'm working on an app which needs to list many items (kind of 50 000 sometimes) with a custom items template.
Everything is working fine while controlling with the mouse, but it's buggy with a touch screen. In order to be able to click on a button or a checkbox inside any of the items, you need to swipe somewhere on the main list before.

Here is a part of my code : (scj: controls are derived from telerik: controls with only one or two more properties)

my XAML :
<scj:scjListBox Visibility="Visible" Grid.Column="2" x:Name="lstItemsSmall" ItemsSource="{Binding Path=Modeles}" Style="{DynamicResource ModelesStyleSmall}" Background="#FF525252">
                <scj:scjListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <scj:scjVirtualizingWrapPanel ItemWidth="300" ItemHeight="300"></scj:scjVirtualizingWrapPanel>
                    </ItemsPanelTemplate>
                </scj:scjListBox.ItemsPanel>
            </scj:scjListBox>

resource file - style :
<Style TargetType="scj:scjListBox" x:Key="ModelesStyleSmall">
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="telerik:RadListBoxItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    <Setter Property="VerticalContentAlignment" Value="Stretch" />
                    <Setter Property="Background" Value="Transparent" />
                    <Setter Property="BorderBrush" Value="Transparent" />
                    <Setter Property="BorderThickness" Value="0" />
                    <Setter Property="Foreground" Value="White" />
                    <Setter Property="FontSize" Value="12" />
                    <Setter Property="Padding" Value="0" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="telerik:RadListBoxItem">
                                <Border CornerRadius="5" BorderBrush="#FF565656" BorderThickness="1" Margin="5" Padding="5" Background="#FF606060">
                                    <Grid>
                                        <ContentPresenter x:Name="HeaderElement" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0"
                                            ContentTemplate="{StaticResource ProduitsDataTemplateSmall}"/>
                                    </Grid>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>

resource file - data template :
<DataTemplate x:Key="ProduitsDataTemplateSmall">
        <scj:scjGrid Height="280" Width="280">
            <scj:scjGrid.RowDefinitions>
                <RowDefinition Height="200"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="50"></RowDefinition>
            </scj:scjGrid.RowDefinitions>
            <scj:scjGrid.ColumnDefinitions>
                <ColumnDefinition Width="1*"></ColumnDefinition>
                <ColumnDefinition Width="1*"></ColumnDefinition>
                <ColumnDefinition Width="1*"></ColumnDefinition>
            </scj:scjGrid.ColumnDefinitions>
            <Image Grid.Row="0" Grid.ColumnSpan="3" Source="{Binding Path=ImagePhoto}"></Image>
            <scj:scjTextBlock Grid.Row="1" Grid.ColumnSpan="3" NoTranslate="True" Text="{Binding Path=DisplayCodeName}" TextWrapping="Wrap" HorizontalAlignment="Left"></scj:scjTextBlock>
            <scj:scjButton Grid.Row="2" Grid.Column="0" NoTranslate="True" Style="{StaticResource ButtonStyle}" Click="btnPanier_Click" Tag="{Binding Path=sIdModele, Mode=OneWay}">
                <Image Source="Images/panier_ajout.png" Width="32" Height="32"></Image>
            </scj:scjButton>
            <scj:scjButton Grid.Row="2" Grid.Column="1" NoTranslate="True" Style="{StaticResource ButtonStyle}" Click="btnLoupe_Click" Tag="{Binding Path=sIdModele, Mode=OneWay}">
                <Image Source="Images/loupe.png" Height="32" Width="32"></Image>
            </scj:scjButton>
            <scj:scjCheckBox Grid.Row="2" Grid.Column="2" x:Name="chkStatut" NoTranslate="True" BorderBrush="Black" BorderThickness="0.3" Checked="chkStatut_Checked" Unchecked="chkStatut_Checked" HorizontalAlignment="Center" VerticalAlignment="Center">
                <scj:scjCheckBox.LayoutTransform>
                    <ScaleTransform ScaleX="3" ScaleY="3"></ScaleTransform>
                </scj:scjCheckBox.LayoutTransform>
            </scj:scjCheckBox>
        </scj:scjGrid>
    </DataTemplate>

I have tried on a :
-Win7 with mouse, everything is OK (smooth scrolling, clicking on the buttons, on the checkbox...)
-Win7 with touch, impossible to click on any button nor checkbox of an item (button gets focused but no event raised, checkbox get focused but not checked, but smooth scolling the list works fine)
-Win8 with touch, I need to swipe before clicking, or checking a box on an item (but smooth scolling works fine)

I haven't modified any touch behavior  at all. I need virtualization because of the number of items to load (from 15 to 50 000), and I need the control to act like an android app with touch smooth scrolling.

The screencapture shows the final window. Each light gray item contains a picture, 2 buttons and a checkbox.

My question is, is there a way to make it work with a touch screen, and how ?

Thank you for reading :)
Nicolas
Top achievements
Rank 1
 answered on 26 Mar 2014
3 answers
393 views
Hello. I'm see differences in formatting using a VirtualizingWrapPanel vs using a standard WrapPanel.

Here is the xaml:

<Window x:Class="GalleryView3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" 
        Title="MainWindow" Height="350" Width="525" MinWidth="350">
    <Grid>
        <Border BorderThickness="3" MinWidth="100" MinHeight="100">
        <ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" Name="TabGalleryListView" ItemsSource="{Binding Source}" SelectionChanged="SelectionChanged">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                        <telerik:VirtualizingWrapPanel IsItemsHost="True" Orientation="Horizontal" />
                        <!--<WrapPanel IsItemsHost="True" Orientation="Horizontal" />-->
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="10,10,10,10" Orientation="Vertical">
                        <Border BorderThickness="3" BorderBrush="Black">
                            <Image Width="128" Height="128" Source="{Binding ImageSource}" Stretch="Uniform" />
                        </Border>
                        <StackPanel Orientation="Horizontal" Margin="0,10,0,0" >
                            <CheckBox Margin="0,0,5,0" VerticalAlignment="Center"/>
                            <TextBlock TextWrapping="Wrap" VerticalAlignment="Center" Text="{Binding DisplayText}" Foreground="Red"/>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        </Border>
    </Grid>
</Window>

You'll see where I've been commenting in/out the standard WrapPanel & the VirtualizingWrapPanel.

When I run with the WrapPanel enabled, and VWP commented out, I get the desired effect, a nice bunch of the same graphic with checkbox & text following. (first attached illustration)

When I run with the VWP enabled, and WrapPanel commented out, the image is not properly resized and the checkbox & text are clipped. (second attached illustration).

I'm thinking that they should both work the same! Hopefully you can tell me where I am going wrong.
My Telerik.Windows.Controls.dll version is 2012.2.607.40

Thanks!
Mark

mark
Top achievements
Rank 1
 answered on 06 Aug 2012
0 answers
41 views
VirtualizingWrapPanel as RadGallery.ItemsPane does not show any item.
Thanks
Deepak
deepak
Top achievements
Rank 1
 asked on 26 Jun 2012
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?