UWP development entry (10)-extended ListView and uwplistview through inheritance

UWP development entry (10)-extended ListView and uwplistview through inheritance

The reason why this name is used in this article is that the focus is not on custom controls and does not involve the creation of Template and XAML concepts used by CustomControl and UserControl. Instead, an existing class is extended by means of inheritance, and attributes and extended behavior are added to the inherited subclass.

We mentioned the implementation idea of nested ScrollViewer in "UWP development entry (7) -- pull-down refresh". In this article, we will abandon nesting in the first extended behavior of ListView, instead, access the ScrollViewer control inside the ListView to listen to the ViewChanged event.

To access the ScrollViewer inside the ListView, you must use the following two methods in the VisualTreeHelper class:

public static DependencyObject GetChild(DependencyObject reference, System.Int32 childIndex);public static System.Int32 GetChildrenCount(DependencyObject reference);

The two methods can be further combined to obtain:

        static T FindFirstChild<T>(FrameworkElement element) where T : FrameworkElement        {            int childrenCount = VisualTreeHelper.GetChildrenCount(element);            var children = new FrameworkElement[childrenCount];            for (int i = 0; i < childrenCount; i++)            {                var child = VisualTreeHelper.GetChild(element, i) as FrameworkElement;                children[i] = child;                if (child is T)                    return (T)child;            }            for (int i = 0; i < childrenCount; i++)                if (children[i] != null)                {                    var subChild = FindFirstChild<T>(children[i]);                    if (subChild != null)                        return subChild;                }            return null;        }

This method recursively traverses the elements in FrameworkElement and returns the first element that conforms to the type. The first extension of ListViewEx is as follows:

    public class ListViewEx : ListView, INotifyPropertyChanged    {        private ScrollViewer _scrollViewer;        public event EventHandler LoadHistoryEvent;        public event PropertyChangedEventHandler PropertyChanged;        protected void OnProperyChanged([CallerMemberName] string name = null)        {            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));        }        public ListViewEx()        {            this.Loaded += ListViewEx_Loaded;            this.Unloaded += ListViewEx_Unloaded;        }        private void ListViewEx_Unloaded(object sender, RoutedEventArgs e)        {            this.Unloaded -= ListViewEx_Unloaded;            if (_scrollViewer != null)            {                _scrollViewer.ViewChanged -= Sv_ViewChanged;            }        }        private void ListViewEx_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)        {            this.Loaded -= ListViewEx_Loaded;            _scrollViewer = FindFirstChild<ScrollViewer>(this);            if (_scrollViewer != null)            {                _scrollViewer.ViewChanged += Sv_ViewChanged;            }        }        private async void Sv_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)        {            if (e.IsIntermediate == false && _scrollViewer.VerticalOffset < 1)            {                _scrollViewer.ChangeView(null, 50, null);                await Task.Delay(10);                LoadHistoryEvent?.Invoke(this, EventArgs.Empty);            }        }

Well, we can see the elegant-= event and the right null check, ah! I can't help but like it! After the ViewChanged event detects that the scroll bar has reached the top, it triggers the LoadHistoryEvent defined in ListViewEx to notify the updated data.

In this article, if only one LoadHistoryEvent is added, it will be criticized as completing the previous article. One article will be split into two articles to write ...... Well, let's add the second extended GoBottomVisiblity attribute to ListViewEx. As the name suggests, ListViewEx will display a GoBottom button after Scrolling up several screens.

In the ListViewEx class, define the GoBottomVisibility attribute, and then calculate whether to display the GoBottom button in the ViewChanged event.

        public Visibility GoBottomVisiblity        {            get { return _goBottomVisiblity; }            set            {                _goBottomVisiblity = value;                this.OnProperyChanged();            }        }        private void Sv_ViewChanged2(object sender, ScrollViewerViewChangedEventArgs e)        {            if (e.IsIntermediate == false)            {                CheckGoBottomVisibility();            }        }        private void CheckGoBottomVisibility()        {            if (_scrollViewer.VerticalOffset + _scrollViewer.ViewportHeight < _scrollViewer.ScrollableHeight)            {                GoBottomVisiblity = Visibility.Visible;            }            else            {                GoBottomVisiblity = Visibility.Collapsed;            }        }

The Code cannot be fully pasted. One is too long to appear long, and the other is to be deleted from the homepage by the Administrator ......

In general, this article expands the LoadHistoryEvent and GoBottomVisibility attributes for ListView. Finally, let's talk about how to use it. In XAML, use ListViewEx to replace the default ListView. We will find that there is an additional LoadHistoryEvent, and the data loading event will be OK. Draw a triangle arrow at the bottom of the list, and the Visibility is bound to the GoBottomVisibility attribute of ListViewEx.

　　

    <Grid>        <local:ListViewEx x:Name="listViewEx" ItemsSource="{x:Bind Items}" LoadHistoryEvent="ListViewEx_LoadHistoryEvent"></local:ListViewEx>        <Grid Margin="10" VerticalAlignment="Bottom" HorizontalAlignment="Center"               Tapped="Grid_Tapped" Visibility="{x:Bind listViewEx.GoBottomVisiblity,Mode=OneWay}">            <Ellipse Fill="LightGray" Width="30" Height="30"></Ellipse>            <Polyline Stroke="White" Points="10,10 15,20 20,10"></Polyline>        </Grid>    </Grid>

Complete code on GayHub address: https://github.com/manupstairs/UWPSamples

Thank you very much for your support. You can click here to see it. Thank you! Orz