I have a GridView with groups that contain children and want to add a transition when adding children.
The GridView looks like this at the moment:
My ItemsPanel:
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid GroupPadding="0,0,70,0">
<ItemsWrapGrid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition />
</TransitionCollection>
</ItemsWrapGrid.ChildrenTransitions>
</ItemsWrapGrid>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
The DataSource has IsSourceGrouped enabled.
But I cannot get the items to transition, they just pop up instantly.
I've tried adding ItemsWrapGrid.Transitions instead, but then only the group headers are animated, not the items themselves.
I've also tried adding transitions to the GridView itself, but still no item transition.
How do I enable transitions for children of groups in a GridView?
I'm not sure this is relevant, but I mention it regardless:
The Items are loaded from the internet and added into the ItemsSource of the GridView (a ObservableCollection).
Some items are loaded together and added at the same time:
Some items load like this:
A group object gets created and added to the ItemsSource
one item gets loaded from the internet
the item is being added to the group object as child (it pops up instantly in the GridView)
repeat from 2 until all items are loaded
Some other items:
A group object gets created and added to the ItemsSource
multiple items get loaded from the internet
the items get added to the group as children all at once (all pop up instantly in the GridView)
I am not using the ViewModel approach like in the Visual Studio grid template, I set the ItemsSource manually.
Check this tutorial in MSDN: Animating list item changes (XAML). You can do it via defining storyboard.
Related
I have a ListView which ItemSource is bind to an ObservableCollection. This collection stores a list of some user's chat messages. Now I want to shift that item on top whenever that user receives a new chat message. Likewise in WhatsApp and slack app. So I want to know what is the correct way of doing this. Right now I am removing an item from the list and then adding it to the 0th index but this way sometimes I am getting parameter incorrect issues. So is there any way so that I can directly shift any chat to the top without removing it.
Xaml code for listview is below:
<ListView MaxHeight="{x:Bind ViewModel.OpenedChatMaxHeight, Mode=OneWay}"
Margin="0,10,0,0"
CanDragItems="True"
Loaded="{x:Bind ViewModel.OpenedChatDataLoaded}"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
SelectedIndex="{x:Bind ViewModel.OpenChatListSeletedItem,Mode=TwoWay}"
ItemsSource="{x:Bind ViewModel.OpenChatList,Mode=TwoWay}"
SelectionChanged="{x:Bind ViewModel.ChatSelected}"
IsItemClickEnabled="True"
ItemClick="{x:Bind ViewModel.OpenPinnedChatListItemClick}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel ItemsUpdatingScrollMode="KeepItemsInView" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
The ObservableCollection<T> class has a Move method that you can use to move an item from one index to another:
OpenedChatMaxHeight.Move(oldIndex, 0);
This is more convenient than manually removing and adding the item back at index 0.
I have tried the Move method but in that case, I always get index out of range error my view just gets out of focus.
Move method will moves the item at the specified index to a new location in the collection. Please add debug point to check if the oldIndex is correct. Above problem looks you have not get correct oldindex.
Is there a feature to shift item on top in a listview
For fixing the chart item in the top, we often make a separate top list. When you want to fix the chart item, you could remove it from the previous chart list, and add it into top list.
For this way, it is easy to make a istop style, but not make datatemplete selector for previous list. And you could also store the istop chart items in local storage to improve rendering performance.
I have been struggling for the last week trying to implement a FlipView in the like of the Microsoft News UWP app.
I tried the following: a FlipView With an ItemTemplate and an ObservableCollection with my items.
However this caused the whole lot of items within my ObservableCollection to be pre-loaded, which is not what I want.
Has anyone got any tip allowing me to change this behaviour of the FlipView to be as follows: Only the first item is loaded, then when I click the arrow, the next item gets loaded.
Thanks in advance :)
UPDATE:
I can confirm that the behaviour is as #Sunteen Wu - MSFT said.
I also tried using a similar logic to the one on fund the demo by #Martin Zikmund, however, it was not clearing the previous item
My goal is to load 1 single item at a time. The behaviour like so:
1) I see 1 item
2) If I click the > (next) arrow:
* this item is unloaded from the flipview
* the next item is loaded
3) if I click the < (previous) arrow:
* this item is unloaded from the flipview
* the previous item is re-loaded
Hope someone can help, I really want to give that feature to my users ^^.
However this caused the whole lot of items within my ObservableCollection to be pre-loaded
FlipView control's ItemsPanelTemplate contains VirtualizingStackPanel. So the FlipView control supports virtualization at default. You can check the visual tree when you debugging the app, you may find no matter how many items you bind to the FlipView, it only load three FlipViewItem at default.
So in my opinion, the FlipView will not pre-loaded the whole items of your ObservableCollection , by default it may load the previous one, current one and the next one, unless you change the ItemPanel to StackPanel which doesn't support virtualization.
<FlipView x:Name="flipView1" Width="480" Height="270"
BorderBrush="Black" BorderThickness="1">
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
<FlipView.ItemTemplate>
...
</FlipView.ItemTemplate>
</FlipView>
Only the first item is loaded, then when I click the arrow, the next item gets loaded.
As FlipView using virtualization so that I guess you don't still need this feature. If you still want it, you can try to bind source to the FlipView with instance data is empty and every time the selection changed, force load the content manually. For this you may reference this similar thread that #Martin Zikmund provides a demo for single loading.
Additionally, according to Do's and don'ts remarks of FlipView:
Avoid using a flip view control for larger collections, as the repetitive motion of flipping through each item can be tedious.
If you do have a larger collection for binding, avoid using a flip view but consider a List view or grid view.
I have a list view that I want to scroll to the bottom as I add items into the "Items" list.
As I add items they appear in the ListView, but when I reach the limit of the screen, the list remains showing the top section and new items are added to the bottom. If I scroll down I can see the new items. I'd like it to auto scroll to the bottom so that I can always see the latest items in the list.
<ListView
x:Name="lvBasketContent"
Grid.Row="1"
ItemsSource="{Binding Items}"
ItemContainerStyle="{StaticResource ListViewItemStyle1}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Bottom"
SelectionMode="None"
IsSwipeEnabled="False"
VerticalAlignment="Top"
>
Can anyone help me out please?
You need to create a custom behavior or derived implementation of ListView.
This class should monitor the ItemsSource collection for changes and call ListViewBase.ScrollIntoView(Object), passing in the item that you want to show. In your case, this may be the last one added.
I recommended the behavior as it keeps your code modular as you can use it on any listview in your solution by changing the xaml only.
I'm not going to write the code for you as behaviors are a very useful technique to learn first hand. The first link should give you all you need to get cracking.
Do you can try put this in your code ? Each time you add an item to your listbox , try call it
//Add an item in the listbox
lvBasketContent.Items.Add(...);
//...
//Scroll to bottom
lvBasketContent.SelectedIndex = lvBasketContent.Items.Count -1
lvBasketContent.ScrollIntoView(lvBasketContent.SelectedItem)
I have a GridView with a custom template. I want the user to be able to drop some of items on another items. I enabled the drag & drop and added the drop handler to the Grid which is used for item's template:
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="250" AllowDrop="True" Drop="content_Drop">
With the code above, I'm able to handle which Grid the user has dropped the item onto. However, I'm not able to get the object for this Grid. A trick (using an invisible control and lookup) comes to my mind but I'm looking for a better way.
The DataContext property of the Grid will be set to the item bound to that ItemTemplate.
I have a collection of my custom entity that is bound to the listpicker using the ItemsSource property. I also have selection mode set to Multiple so I have a checkbox with each item in the FullMode picker. This picking works, fine, and I can easily access all objects that were picked thru code. What I'm having troubles with is the DisplayMemberPath. I want to display something more friendly than the namespace of the object that is selected. Perhaps a count of selected items, or a comma separated list of the values selected.
Unfortunately, 'AccountId' doesn't work when I set the SelectionMode="Multiple". Single mode is fine. Any ideas?
<toolkit:ListPicker
x:Name="accountlistpicker"
Grid.Row="0" Header="accounts"
SelectionMode="Multiple"
DisplayMemberPath="AccountId"
ItemsSource="{Binding AllAccounts}"
FullModeItemTemplate="{StaticResource AccountsListPickerFullItemTemplate}" />
You need to assign function to SummaryForSelectedItemsDelegate that will process how summary string will looks like.
Check this for learn more