brookshi / llmlistview

super list view for uwp

LLMListView

super list view for uwp

Feature

1. left/right swipe with animation
2. pull to refresh
3. refresh button
4. load more
5. load more for group list view

Display

Nuget

PM> Install-Package LLMListView

License

Copyright 2015 Brook Shi

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. 

llmlistview's Issues

How to add Left side Fixed actions similar as Right side actions?

I want to use Swipe with Fixed and multiple actions. But I want to show 3 options on Left and 3 options on Right. Is it possible to do with this LLMListView control?

Group and swipe

Hi,

I'm trying to use the group feature and the swipe to delete items. Maybe i'm not doing it fine but when I'm deleting an item, i still have an empty space where the item was.

I have a test case with the demo "Load more for group list" with this code:

          <ctrl:LLMListView x:Name="MasterListView" 
                          ItemSwipeTriggerComplete="itemList_ItemSwipeTriggerComplete"  
                          ItemSwipeTriggerInTouch="itemList_ItemSwipeTriggerInTouch" 
                          ItemLeftSwipeMode="Expand" 
                          ItemLeftActionRateForSwipeLength="0.4"
                          ItemRightSwipeMode="Collapse"
                          ItemsSource="{x:Bind Group.View}"
                          ItemTemplate="{StaticResource ContactListViewTemplate}">
            <ctrl:LLMListView.GroupStyle>
                <GroupStyle HeaderTemplate="{StaticResource GroupHeader}"/>
            </ctrl:LLMListView.GroupStyle>
            <ctrl:LLMListView.ItemLeftSwipeContentTemplate>
                <DataTemplate>
                    <Grid Background="#1A6D36">
                        <StackPanel Orientation="Horizontal">
                            <SymbolIcon  Margin="10,0,0,0" Symbol="Accept" />
                            <TextBlock Margin="10,0,0,0" VerticalAlignment="Center" x:Name="LeftSwipeText" Text="Added"/>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ctrl:LLMListView.ItemLeftSwipeContentTemplate>
            <ctrl:LLMListView.ItemRightSwipeContentTemplate>
                <DataTemplate>
                    <Grid Background="Pink" HorizontalAlignment="Stretch">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <SymbolIcon Grid.Column="1" Margin="0,0,10,0" Symbol="Delete" />
                        <TextBlock Grid.Column="2" Margin="0,0,10,0" VerticalAlignment="Center" x:Name="RightSwipeText" Text="Remove"/>
                    </Grid>
                </DataTemplate>
            </ctrl:LLMListView.ItemRightSwipeContentTemplate>
        </ctrl:LLMListView>

And for the events:

        private void itemList_ItemSwipeTriggerComplete(object sender, LLM.SwipeCompleteEventArgs args)
        {
            var itemData = (sender as LLM.LLMListViewItem).Content as GroupInfoList;
            _contacts.Remove(itemData);
        }

        private void itemList_ItemSwipeTriggerInTouch(object sender, LLM.SwipeTriggerEventArgs args)
        {

        }

Where is my mistake ?

Stef

Is there anyway to bind a mvvm item property to enable/disable the item right swipe?

I can't set ItemContainerStyle

Hi,

I tried to set the ItemContainerStyle property with this style:

<Style x:Key="ItemContainerStyle" TargetType="llm:LLMListViewItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="llm:LLMListViewItem">
                        <ListViewItemPresenter 
                            ContentTransitions="{TemplateBinding ContentTransitions}"
          SelectionCheckMarkVisualEnabled="True"
          CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
          CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
          DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
          DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
          FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
          FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
          PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
          PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
          PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
          SelectedBackground="{ThemeResource SystemControlHighlightListAccentLowBrush}"
          SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
          SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}"
          PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
          SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}"
          DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
          DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
          ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
          ContentMargin="{TemplateBinding Padding}"
          CheckMode="Inline"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>

This is working for ListView. But with LLMListView, when the application is starting I have this error:
Message = "System.NullReferenceException: Object reference not set to an instance of an object.\r\n at LLM.LLMListViewItem.ResetSwipe()"

I'm using the last version of the control from nuget: 0.1.5.

Stef

Fixed Right Swip issue in RTL Direction Flow

I'm working on an English/Arabic based app and added Fixed right swipe it works fine when app direction flow is LTR but in RTL swipe is showing on right which is fine but swipe area should be Left not Right in this case so how can I solve it any idea ??

Pull to refresh is not working in Tablet or Surface

I downloaded the Sample LLMListview and trying to run with simulator with touch mode.when i pull grid. grid is moving down. but refresh function is not calling( MasterListView.Refresh) and refresh image is not showing.As i have seen Pulltorefresh is enabled for Mobile device family (i.e AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Mobile"). but i want to use this feature on the Windows tablet and windows Surface pro (may be Touch enable desktop also). Kindly help on this issue.
And how can i move the FloatButton to top of the listview and center of the grid instated of bottom .

EmptyDataTemplate

Hi! Can you provide ability to show custom template when ItemsSource is empty?

How to hide PullToRefreshIndicator and ProgressBarIndicator in LLMListView

Hi,

I have made a listView using LLMListView whose Visibility is Collapsed at initial.
When its Visibilty is set to Visible then PullToRefreshIndicator and ProgressBarIndicator indicators are showing on top on the list.
I don't want to show this indicators.
How could I hide these indicators.

Regards,
Abhishek

Grouping with ListView

This is not an issue, just a question. I want to display ListView with grouping, is it possible directly with this control?

How to add alternate row style

i am trying to add alternate row color but it i didn't find any way.please let me know how can i accomplish
this. i need list view like below attachment.

And Another issue how to fix the headers at the time of scrolling. here is my xaml design.

Thanks in advance

<ctrl:LLMListView x:Name="RequisitionListView" Grid.Row="1"
CanPullToRefresh="True"
FloatButtonIcon="Refresh"
FloatButtonVisibility="Visible"
IsItemClickEnabled="False"
ItemsSource="{Binding Requisitions,
Mode=TwoWay}"

                     HorizontalAlignment="Stretch"  HorizontalContentAlignment="Stretch" MinWidth="600" Margin="0,10,0,0" ScrollViewer.VerticalScrollBarVisibility="Visible">
        <ctrl:LLMListView.ItemTemplate>
            <DataTemplate>
                <Grid Name="grdTest" MinWidth="600">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"  ></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="6*" />
                        <ColumnDefinition Width="2*" />
                        <ColumnDefinition Width="2*" />
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="0" BorderBrush="Black" BorderThickness="0">
                        <TextBlock 
                       Margin="12,6,0,0"
                       Text="{Binding ZPOSITIONTITLE}" TextWrapping="Wrap" Style="{StaticResource ResourceKey=DashboardGridLabelStyle}"  />
                    </Border>
                    <Border Grid.Column="1" BorderBrush="Black" BorderThickness="0">
                        <TextBlock 
                       Margin="12,6,0,0"
                       Text="{Binding ZJOBREQUISITIONNUMBER}" TextWrapping="Wrap" Style="{StaticResource ResourceKey=DashboardGridLabelStyle}" >
                        </TextBlock>
                    </Border>
                    <Border Grid.Column="2" BorderBrush="Black" BorderThickness="0">
                        <RadioButton Name="radioSelect" GroupName="radioAction" IsChecked="{Binding Action,Mode=TwoWay}" Margin="30,0,0,0"></RadioButton>
                    </Border>
                </Grid>
            </DataTemplate>
        </ctrl:LLMListView.ItemTemplate>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.Header>
            <Style TargetType="ListViewHeaderItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
            </Style>
        </ListView.Header>
        <ListView.HeaderTemplate>
            <DataTemplate>
                <Grid Height="50" Background="DarkGray">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="6*" />
                        <ColumnDefinition Width="2*" />
                        <ColumnDefinition Width="2*" />
                    </Grid.ColumnDefinitions>
                    <TextBlock x:Uid="tbTitle" Text="Position Title" Grid.Column="0"  Style="{StaticResource ResourceKey=DashboardGridHeaderStyle}" />
                    <TextBlock x:Uid="tbRequistion" Text="Requisition Number" Grid.Column="1" Style="{StaticResource ResourceKey=DashboardGridHeaderStyle}" />
                    <TextBlock x:Uid="tbName"  Text="Action" Grid.Column="2" Style="{StaticResource ResourceKey=DashboardGridHeaderStyle}" />
                </Grid>
            </DataTemplate>
        </ListView.HeaderTemplate>
    </ctrl:LLMListView>

Pull to Refresh does not work if Listview is inside Scrollviewer

I'm trying to achieve Pull to Refresh it does not work if my Listview is inside a Scroll viewer can you check it, you can reproduce the issue with the below code I tried it in RefreshButtonPage

    <ScrollViewer Grid.Row="1" EntranceNavigationTransitionInfo.IsTargetElement="True" Margin="0,4,0,0" ScrollViewer.VerticalScrollBarVisibility="Hidden">
        <StackPanel x:Name="ContentContainer" Margin="0,0,0,0">
            <ctrl:LLMListView x:Name="MasterListView" 
                      ItemsSource="{Binding Contacts, Mode=OneWay}"
                      ItemTemplate="{StaticResource ContactListViewTemplate}" 
                      CanPullToRefresh="True"
                       ItemLeftSwipeMode="None"
                      ItemRightActionRateForSwipeLength="0.5"
                      ItemRightSwipeMaxLength="135"
                      ItemRightSwipeMode="Fix"
                      RefreshButtonVisibility="{x:Bind RefreshBtnVisibility}"
                      IsItemClickEnabled="True"
                      ItemClick="MasterListView_ItemClick">
            </ctrl:LLMListView>
        </StackPanel>
    </ScrollViewer>
</Grid>

ListView.ScrollToView() is not working

Hello I have this new issue.. I have this bunch of snippets:
` void ScrollToLast()
{
var selectedIndex = product_list_content.Items.Count - 1;
if (selectedIndex < 0)
return;

        product_list_content.SelectedIndex = selectedIndex;
        product_list_content.UpdateLayout();

        product_list_content.ScrollIntoView(product_list_content.SelectedItem);
    }`

where: product_list_content is an LLMListView

which is I want to scroll to the last item on the list but I found it not working on LLMListView..

Selection Changed event.

SelectionChanged event will also work even we have included swipe events right?

Item Right Swipe click on button "Done" to swipe back

I have create new button "Done" and "Delete" on ItemRightTemplate.
I want to click Done button to swipe back after I edit on this item ready.

Can you help me please ?

LLMListView is creating self header?

I have a this code

<swipe:LLMListView x:Name="product_list_content" Grid.Row="2" IsItemClickEnabled="True" ItemLeftSwipeMode="None" ItemRightActionRateForSwipeLength="0.5" ItemRightSwipeMaxLength="135" ItemRightSwipeMode="Fix" DataContext="{StaticResource OrderViewModel}" ItemsSource="{Binding}" SelectionMode="Single"> <swipe:LLMListView.ItemTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="200" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <TextBlock Grid.Column="0" Text="{Binding Item_name}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="20" /> <TextBlock Text="{Binding quantity}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="20" Grid.ColumnSpan="2" Margin="196,0,0,0"/> <TextBlock Grid.Column="2" Text="{Binding discount}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="20"/> <TextBlock Grid.Column="3" Text="{Binding sell_price}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="20"/> </Grid> </DataTemplate> </swipe:LLMListView.ItemTemplate> </swipe:LLMListView>

I can compile it successfully now my problem is
WHEN IT IS FROM COLLAPSE STATE WHEN I SHOW IT, IT CREATES ITS OWN HEADER, AN EMPTY HEADER

THE YELLOW ONE IS THE HEADER.
hOW CAN i REMOVE THAT ITS ANNOYING.

Full screen width item inside the LLMListView

Hi everyone! I am trying to create the LLMListView where the item template is a grid with some textblocks inside. And the grid must be full screen width. I write this code:

<DataTemplate>
    <Grid Height="60" Background="Aqua" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Text="{Binding Title}" Grid.Row="0" Grid.Column="0"/>
        <TextBlock Text="Some description" Grid.Row="1" Grid.Column="0"/>
        <TextBlock Text="ID010203" Grid.Row="0" Grid.Column="2" HorizontalAlignment="Right"/>
        <TextBlock Text="00/00/0000" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Right"/>
    </Grid>
</DataTemplate>

Here is photo how it looks now:

Actually for simple ListView this is working and every item is full screen width, but here I can not create needed visuals. How can I make the item full screen width?

Performance Issue with 200 contacts loaded?

Hi,

I am trying to load 200 contacts on the Normal Fix Swipe With Dynamic Template sample and when its scroll quickly the listitem goes dark grey, any idea why?

Kind Regards
Jennifer

Reordering conflict

Sometimes when you drag to reorder an item, the left or right swipe template partially shows and remains visible until you manually select the item.

How to use LLMListViewItem.RightSwipeMaxLength Property in MVVM usecase

Hi,

I want to use LLMListView for Swipe mode "Fix".
I have three buttons in ItemRightSwipeContentTemplate.

LLMListView ItemSource is binded to "MyCustomClass" list collection.

"MyCustomClass" has a boolean property "IsVisible".

If "IsVisible" is true
I show one button,
else
I show two button.

If i set LLMListView .ItemRightSwipeMaxLength="180" in xaml, and if user do right to left swipe.

In case of two button visible, If a user want to reset the LLMListViewItem by moving left to right on same listview item after following above step, this can be done from any visible part of LLMListViewItem.

But when only one button is visible, there a gap in between LLMListViewItem and Button from ItemRightSwipeContent due to LLMListView .ItemRightSwipeMaxLength value (180).

So I want to bind LLMListViewItem.RightSwipeLength property with "IsVisible" taking help of a IsVisibleToItemSwipeMaxLengthConverter which set different ItemRightSwipeMaxLength based on "IsVisible".

How can I do that??

Thanks in advance.

Disable swipe for some list items based on TemplateSelector

Is it possible if I want to disable swipe gesture for some specific elements because I'm using TemplateSelector so for some templates I don't need swipe

Load More

HI, I want to confirm whether Load More will help me or not. I have more than 4000 records in Database in UWP and I want to display about 10-15 records at a time and when user scrolls it should "Load more". Will your LLMListView Load More functionality help in this case?

System.UnauthorizedAccessException_80070005

should use Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Mobile"

Changing the background color of the item when selected

Hi here I am again. I found another issue on changing items background using blend gets an error.

How can I change items background when selected?

Is it supported in visual studio's blend?

Any response is a big help.

In SwipeMode Fix ResetSwipe after clicking on Edit

Hi,

I have Edit and Delete action buttons on left swipe, when I click on the Edit button the handler gets control however the item does not reset to normal. i.e. the Edit and Delete buttons still appear. Am I missing something here?