WPF 平移ListBox翻頁


  因為需要做個類似的東西,在版面的移動以及布局上需要學習的東西還是很多的。普通的Panel已經不能滿足我的需求了,所以需要重新來自定義一個Panel來放入ListBox中,我做了一個DEMO,首先弄一個ListBox,把他的Template、ItemSource、Detetemplate等東西都先設置一下,這個我以前都寫過學習過了,然后建一個類,這個類我們用來滑動以及設計模板,首先設置它的MeasureOverride和ArrangeOverride,這兩個方法是WPF的Layout系統提供給用戶的自定義接口,一個是測量范圍給出所需要的范圍,一個是安排Child的位置。這個玩意還是比較搞的,可以參考一下:

http://www.cnblogs.com/powertoolsteam/archive/2011/01/10/1932036.htmlhttp://www.cnblogs.com/powertoolsteam/archive/2011/01/11/1932923.html

來先大致了解一下這兩個方法。其中還是有許多可以研究的東西的。

  我設置了ListBoxItem的大小為一個200的正方形,隨便弄了18個Item,我把這些Item分成2排根據窗口的大小來自動設置應該放幾個Item在窗口中,然后多余的空白平均分布在兩側。Measure和Arrange的方法如下所示:

View Code
protected override Size MeasureOverride(Size constraint) {
            double dWidth = Math.Floor(constraint.Width / 200.00);
            double dHeight = Math.Floor(constraint.Height / 200.00);
            Size s = new Size(Math.Ceiling(InternalChildren.Count / (dWidth * dHeight)) * constraint.Width, constraint.Height);

            Size extentTmp = new Size(s.Width * this.InternalChildren.Count, constraint.Height);
            foreach (UIElement each in InternalChildren) {
                each.Measure(new Size(200, 200));
            }
            if (extentTmp != extent) {
                extent = s;
            }
            if (viewport != constraint) {
                viewport = constraint;
            }
            return s;
        }
View Code
protected override Size ArrangeOverride(Size arrangeSize) {
            int count = (int)Math.Floor(viewport.Width / 200.00);
            page = (int)Math.Ceiling((decimal)InternalChildren.Count / (count * 2));
            int temp = 0;
            int n = 2;
            int countView = 0;
            try {
                for (int i = 0; i < InternalChildren.Count; i++) {
                    this.InternalChildren[i].Arrange(new Rect((200 * (i - countView * 2 * count)) + (viewport.Width * countView) + ((viewport.Width - count * 200) / 2), 50, 200, 200));
                    temp++;
                    if (temp > count) {
                        for (int j = i; j < n * count; j++) {
                            this.InternalChildren[j].Arrange(new Rect(200 * (j - count - countView * 2 * count) + (viewport.Width * countView) + ((viewport.Width - count * 200) / 2), 250, 200, 200));
                            i = j;
                        }
                        countView++;
                        n += 2;
                        temp = 0;
                    }
                }
            } catch (ArgumentOutOfRangeException) { }
            return arrangeSize;
        }

  這樣就布局出了一個根據Item大小及多少所來弄出適當的Panel,同時在拉框體的時候還能夠自適應Panel,這樣比原來的Panel更加的靈活。

  接下來就是要拖拉的效果。同樣在這個類中,首先當鼠標按下的時候,先要CaptureMouse,這樣就不會因為拉出窗口而失去鼠標的坐標,因為我只是左右拉,所以只需要獲取到的X坐標。然后在MouseUp的時候再獲取X的坐標然后判斷,只要超出一定范圍就能夠判斷是否拖拉,這樣再執行一個的動畫,因為設置了Measure,然后移動你的窗口的大小的范圍就能夠做到拖拉效果。其中知道自己有多少頁就能夠判斷在第零頁以及最后一頁不能拖拉。

下面給出我做的小DEMO:http://files.cnblogs.com/socialdk/SliderTest.zip


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM