windowsphone 瀑布流&ui虚拟化

瀑布流已经有点年代了吧，不过wp上还真是挺少资料的。今天抽空把自己之前搞过的东西写出来，避免大家重复劳动。

一、简单的瀑布流排版加入ui虚拟化。

最近看了段博琼 ui虚拟化的一篇博文，链接：http://www.cnblogs.com/hebeiDGL/p/3410575.html

觉得还不错，于是下载了他的demo稍微改了一下瀑布流效果。

demo截图如下：

主要改动：

1：自定义WaterFallPanel继承Panel，用于实现瀑布流排版，并保持容器children距离顶部高度的信息：

public class WaterFallPanel : Panel

    {

        public WaterFallPanel()

        {

            /**默认2列**/

            ColumnCount = ;

            ColumnHeight = new double[ColumnCount];

            childwidth =  / ColumnCount;

        }

        double childwidth;

        static double[] ColumnHeight;

        /// <summary>

        /// 列数

        /// </summary>

        public int ColumnCount

        {

            get { return (int)this.GetValue(ColumnCountProperty); }

            set { this.SetValue(ColumnCountProperty, value); }

        }

        public static DependencyProperty ColumnCountProperty = DependencyProperty.Register("WaterFallPanel", typeof(int), typeof(WaterFallPanel), new PropertyMetadata(new PropertyChangedCallback((o, e) =>

        {

            ColumnHeight = new double[(int)e.NewValue];

            if (o == null || e.NewValue == e.OldValue)

                return;

            o.SetValue(ColumnCountProperty, e.NewValue);

        })));

        protected override Size MeasureOverride(Size availableSize)

        {

            Size resultSize = new Size(, );

            //List<DependencyObject> Children = this.GetVisualChildren().ToList();

            for (int i = ; i < Children.Count; i++)

            {

                Children[i].Measure(availableSize);

            }

            #region 测量值

            for (int i = ; i < ColumnHeight.Count(); i++)

            {

                ColumnHeight[i] = ;

            }

            heightlist.Clear();

            for (int i = ; i < Children.Count; i++)

            {

                double miniheight = ColumnHeight.Min();

                int h = ;

                for (; h < ColumnHeight.Length; h++)

                {

                    if (ColumnHeight[h] == miniheight)

                    {

                        break;

                    }

                }

                ColumnHeight[h] += Children[i].DesiredSize.Height;

                heightlist.Add(ColumnHeight.Min());

            }

            #endregion

            resultSize.Height = ColumnHeight.Max();

            if (Children.Count == )

            {

                resultSize.Height = ;

                resultSize.Width = ;

            }

            else

            {

                resultSize.Width = (Children.Count + ) * Children[].DesiredSize.Width;

            }

            return resultSize;

        }

        protected override Size ArrangeOverride(Size finalSize)

        {

            for (int i = ; i < ColumnHeight.Count(); i++)

            {

                ColumnHeight[i] = ;

            }

            #region 排列值

            heightlist.Clear();

            for (int i = ; i < Children.Count; i++)

            {

                double miniheight = ColumnHeight.Min();

                int h = ;

                for (; h < ColumnHeight.Length; h++)

                {

                    if (ColumnHeight[h] == miniheight)

                    {

                        break;

                    }

                }

                Children[i].Arrange(new Rect(new Point(Children[i].DesiredSize.Width * h, ColumnHeight[h]), Children[i].DesiredSize));

                ColumnHeight[h] += Children[i].DesiredSize.Height;

                if (h == )

                {

                    if (Children[i].DesiredSize.Width > childwidth)

                    {

                        ColumnHeight[h + ] += Children[i].DesiredSize.Height;

                    }

                }

                heightlist.Add(ColumnHeight.Min());

            }

            if (Children.Count < ColumnCount)

                finalSize.Width = childwidth * (Children.Count + );

            else

                finalSize.Width = childwidth * (ColumnCount + );

            #endregion

            return finalSize;

        }

        private List<double> heightlist = new List<double>();

        public double GetItemHeight(int item)

        {

            if (item >=  && item < heightlist.Count)

            {

                return heightlist[item];

            }

            else

            {

                return ;

            }

        }

    }

2：MainPage.xaml中修改itemspanl

<ItemsControl.ItemsPanel>

    <ItemsPanelTemplate>

        <LocalControl:WaterFallPanel x:Name="test" Loaded="test_Loaded"/>

    </ItemsPanelTemplate>

</ItemsControl.ItemsPanel>

3：MainPage.cs中修改虚拟化的计算方式：

 void Visualizition()

        {

            // 自定义一个“字典”，用来保存每项的 Y坐标 和它“本身”的引用

            Dictionary<double, StackPanel> dic = new Dictionary<double, StackPanel>();

            double height_sum = 0;

            for (int i = 0; i < listbox.Items.Count; i++)

            {

                // 因为 ListBox 是通过数据绑定生成的列表，所以需要通过 ItemContainerGenerator 获得

                // 每一项的 StackPanel 这个父控件

                FrameworkElement fe = listbox.ItemContainerGenerator.ContainerFromIndex(i) as FrameworkElement;

                StackPanel sp = FindFirstElementInVisualTree<StackPanel>(fe);

                dic.Add(height_sum, sp);

                // 累加 Y高度

                if (height_sum <= waterpanel.GetItemHeight(i))

                {

                    height_sum = waterpanel.GetItemHeight(i)+1;

                }

                else

                {

                    height_sum = waterpanel.GetItemHeight(i);

                }

                // 设置它的高度为自己的实际高度

                sp.Height = sp.ActualHeight;

            }

            // 每0.5秒钟，循环检查一次列表中，哪些项在屏幕内，如果在屏幕内，则显示，如果

            // 在屏幕外，则隐藏

            Observable.Interval(TimeSpan.FromSeconds(.5)).ObserveOnDispatcher().Subscribe((_) =>

                {

                    foreach (var keyValue in dic)

                    {

                        if (((scrollViewer.VerticalOffset - 700) > keyValue.Key || keyValue.Key > (scrollViewer.VerticalOffset + 900)))

                        {

                            keyValue.Value.Children[0].Visibility = System.Windows.Visibility.Collapsed;

                            keyValue.Value.Children[1].Visibility = System.Windows.Visibility.Collapsed;

                        }

                        else

                        {

                            keyValue.Value.Children[0].Visibility = System.Windows.Visibility.Visible;

                            keyValue.Value.Children[1].Visibility = System.Windows.Visibility.Visible;

                        }

                    }

                });

        }

其中WaterFallPanel的获取用了比较奇葩的一个方式。

这样做的好处是代码简单明了，适合新手了解ui虚拟化。不好的地方则是每次想实现瀑布流排版，都得手动写入虚拟化计算代码。代码耦合过高。

二、通过自定义listbox实现瀑布流&虚拟化。降低代码耦合度。

demo截图：

1、自定义PowerListBox继承listbox

 public class PowerListBox:ListBox

    {

        // 自定义一个“字典”，用来保存每项的 Y坐标 和它“本身”的引用

        Dictionary<double, Border> dic = new Dictionary<double, Border>();

        public PowerListBox()

        {

            DefaultStyleKey = typeof(PowerListBox);

            Loaded += PowerListBox_Loaded;

            Unloaded += PowerListBox_Unloaded;

        }

        private ScrollViewer _scrollView;

        private bool _isScrolling;

        void PowerListBox_Loaded(object sender, System.Windows.RoutedEventArgs e)

        {

            if (DesignerProperties.GetIsInDesignMode(this))

                return;

            ApplyTemplate();

            _scrollView.ScrollToVerticalOffset(_scrollView.VerticalOffset);

            var border = _scrollView.Descendants<Border>().FirstOrDefault();

            Debug.Assert(border != null);

            var vsGroup = VisualStateManager.GetVisualStateGroups(border).OfType<VisualStateGroup>().FirstOrDefault(s => s.Name == "ScrollStates");

            Debug.Assert(vsGroup != null);

            vsGroup.CurrentStateChanging += vsGroup_CurrentStateChanging;

            if (ItemsRootPanel != null && ItemsRootPanel.Children != null)

            {

                double height_sum=;

                dic.Clear();

                for (int i = ; i < ItemsRootPanel.Children.Count; i++)

                {

                    // 因为 ListBox 是通过数据绑定生成的列表，所以需要通过 ItemContainerGenerator 获得

                    // 每一项的 StackPanel 这个父控件

                    Border fe = VisualTreeHelper.GetChild(ItemsRootPanel.Children[i], ) as Border;

                    dic.Add(height_sum, fe);

                    // 累加 Y高度

                    //var height = .GetItemHeight(i);

                    if (height_sum <= (ItemsRootPanel as WaterFallPanel).GetItemHeight(i))

                    {

                        height_sum = (ItemsRootPanel as WaterFallPanel).GetItemHeight(i) + ;

                    }

                    else

                    {

                        height_sum = (ItemsRootPanel as WaterFallPanel).GetItemHeight(i);

                    }

                    // 设置它的高度为自己的实际高度

                    fe.Height = fe.ActualHeight;

                }

            }

        }

        void PowerListBox_Unloaded(object sender, System.Windows.RoutedEventArgs e)

        {

            var border = _scrollView.Descendants<Border>().FirstOrDefault();

            Debug.Assert(border != null);

            var vsGroup = VisualStateManager.GetVisualStateGroups(border).OfType<VisualStateGroup>().FirstOrDefault(s => s.Name == "ScrollStates");

            Debug.Assert(vsGroup != null);

            vsGroup.CurrentStateChanging -= vsGroup_CurrentStateChanging;

        }

        public override void OnApplyTemplate()

        {

            base.OnApplyTemplate();

            _scrollView = GetTemplateChild("ScrollViewer") as ScrollViewer;

            Debug.Assert(_scrollView != null);

        }

        void vsGroup_CurrentStateChanging(object sender, VisualStateChangedEventArgs e)

        {

            if (e.NewState.Name == "NotScrolling")

            {

                _isScrolling = false;

                CompositionTarget.Rendering -= CompositionTarget_Rendering;

            }

            else

            {

                _isScrolling = true;

                CompositionTarget.Rendering += CompositionTarget_Rendering;

            }

        }

        void CompositionTarget_Rendering(object sender, EventArgs e)

        {

            RefreshDisplayArea();

        }

        void RefreshDisplayArea()

        {

            foreach (var keyValue in dic)

            {

                if (((_scrollView.VerticalOffset - ) > keyValue.Key || keyValue.Key > (_scrollView.VerticalOffset + )))

                {

                    keyValue.Value.Child.Visibility = Visibility.Collapsed;

                }

                else

                {

                    keyValue.Value.Child.Visibility = Visibility.Visible;

                }

            }

            //for (int i = 0; i < ItemsRootPanel.Children.Count; i++)

            //{

            //    var item = GetItem(i);

            //    var height = (ItemsRootPanel as WaterFallPanel).GetItemHeight(i) ;

            //    if (((_scrollView.VerticalOffset - 20) > height || height > (_scrollView.VerticalOffset + 607)))

            //    {

            //        FrameworkElement fe = VisualTreeHelper.GetChild(item, 0) as FrameworkElement;

            //        fe.Visibility = Visibility.Collapsed;

            //        //keyValue.Value.Children[0].Visibility = System.Windows.Visibility.Collapsed;

            //        //keyValue.Value.Children[1].Visibility = System.Windows.Visibility.Collapsed;

            //    }

            //    else

            //    {

            //        FrameworkElement fe = VisualTreeHelper.GetChild(item, 0) as FrameworkElement;

            //        fe.Visibility = Visibility.Visible;

            //        //keyValue.Value.Children[0].Visibility = System.Windows.Visibility.Visible;

            //        //keyValue.Value.Children[1].Visibility = System.Windows.Visibility.Visible;

            //    }

            //}

        }

        private ListBoxItem GetItem(int index)

        {

            if (index <  || index >= Items.Count)

                return null;

            if (ItemsSource != null)

            {

                var isVirtualizing = VirtualizingStackPanel.GetIsVirtualizing(this);

                if (!isVirtualizing)

                {

                    Debug.Assert(ItemsRootPanel != null);

                    return ItemsRootPanel.Children[index] as ListBoxItem;

                }

                Debug.Assert(ItemContainerGenerator != null);

                return ItemContainerGenerator.ContainerFromIndex(index) as ListBoxItem;

            }

            return Items[index] as ListBoxItem;

        }

        #region FirstVisibleIndex

        public static readonly DependencyProperty FirstVisibleIndexProperty =

            DependencyProperty.Register("FirstVisibleIndex", typeof(int), typeof(PowerListBox), new PropertyMetadata());

        public int FirstVisibleIndex

        {

            get { return (int)GetValue(FirstVisibleIndexProperty); }

            private set { SetValue(FirstVisibleIndexProperty, value); }

        }

        #endregion

        #region LastVisibleIndex

        public static readonly DependencyProperty LastVisibleIndexProperty =

            DependencyProperty.Register("LastVisibleIndex", typeof(int), typeof(PowerListBox), new PropertyMetadata());

        public int LastVisibleIndex

        {

            get { return (int)GetValue(LastVisibleIndexProperty); }

            private set { SetValue(LastVisibleIndexProperty, value); }

        }

        #endregion

        private Panel _itemsRootPanel;

        private Panel ItemsRootPanel

        {

            get

            {

                if (_itemsRootPanel == null && ItemsPresenter != null)

                {

                    _itemsRootPanel = ItemsPresenter.ChildrenEx().FirstOrDefault() as Panel;

                }

                return _itemsRootPanel;

            }

        }

        private ItemsPresenter _itemsPresenter;

        private ItemsPresenter ItemsPresenter

        {

            get { return _itemsPresenter ?? (_itemsPresenter = _scrollView.Descendants<ItemsPresenter>().FirstOrDefault()); }

        }

    }

其他见demo。

备注：

1、虚拟化过程中：注意容器的高度为自己的实际高度

// 设置它的高度为自己的实际高度
// 很重要，如果不为父容器指定固定高度，当子元素隐藏后，父容器高度变为0px

sp.Height = sp.ActualHeight;

2、计算虚拟化区域有很多种方法，demo中只是简单粗暴的计算，有很多可以进行优化。

3、瀑布流排版只是见当实现两行的，需要多行的话请自行改动，详见附加链接，当然林政的瀑布流排版有点问题，改改更健康。

4、demo2中 Dictionary<double, Border> dic的表只是在加载过程中进行一次初始化，在listbox动态加载过程中并没有修改，为此listbox可将虚拟化计算改为

 void RefreshDisplayArea()

        {

            for (int i = ; i < ItemsRootPanel.Children.Count; i++)

            {

                var item = GetItem(i);

                Border fe = VisualTreeHelper.GetChild(item, ) as Border;

                fe.Height = fe.ActualHeight;

                var height = (ItemsRootPanel as WaterFallPanel).GetItemHeight(i);

                if (((_scrollView.VerticalOffset - fe.Height ) > height || height > (_scrollView.VerticalOffset + )))

                {

                    fe.Child.Visibility = Visibility.Collapsed;

                }

                else

                {

                    fe.Child.Visibility = Visibility.Visible;

                }

            }

        }

其他代码敬请发挥。

demo链接：

1：http://files.cnblogs.com/fatlin/VirtualizationListBoxDemo.rar

2：http://files.cnblogs.com/fatlin/TextListbox.rar

巴特西

windowsphone 瀑布流&ui虚拟化

最新文章

热门文章