wpf 客戶端【JDAgent桌面助手】開發詳解（三） 瀑布流效果實現與UI虛擬化優化大數據顯示

目錄區域：

業餘開發的wpf 客戶端終於完工了。。曬曬截圖

wpf 客戶端【JDAgent桌面助手】開發詳解-開篇

wpf 客戶端【JDAgent桌面助手】詳解（一）主窗口 圓形菜單。。。

wpf 客戶端【JDAgent桌面助手】開發詳解（二）桌面寵物製做詳解

---

 

由於前段時候有不少的事情 比較忙，自從上次寫完博客以後好久沒有更新了。

用WPF製做的京東桌面助手。這個做品是參加比賽的，本身花費了不少心思和時間在裏面，最終的做品效果和比賽的結果仍是使人滿意的。

做品感受不說很fashion，也足夠細緻了。比賽最終沒有獲得京東宙斯杯的一等獎（一等獎讓拍拍網出來創業的一家公司拿去了），得了個第二名。這樣也不錯了。

畢竟參數人員不少，不少都是以公司爲團隊參加的，獎金也比較豐厚，房貸壓力能夠減輕一點了。

--------------------------------------------------------------------------------------------------------------------------------------

最近受一位上海朋友邀請到上海創業，工資、期權、生活問題老闆都安排的妥妥的，來這邊已經1個月了，感受都還挺靠譜的，公司如今正在飛速發展中，指望有想換工做的C# 或者WPF 程序員來聊聊。下面簡單介紹下公司狀況：

1.地理位置：上海 徐彙區 上海師範大學附近奧。。。美女萌萌噠不少。

2.硬件設施:PC 都是1920 高清大屏幕+迷你靜音機箱+微軟無線鍵鼠套裝。有ps四、xbox360、50寸電視。辦公樓有食堂：10元一次（2葷2素+1個水果或者果汁或者酸奶） 周邊生活方便。公司冰箱有加多寶和無糖可樂等飲料和食品

3.公司狀況：

       A.產品初版本已經發布，正在進行第二版本開發過程當中，需求大量開發人員，快到碗裏來吧萌萌噠們。

       B.沒必要擔憂穩定性親，已經有收到投資了，穩定性你放心，不穩定我也不從北京放棄不少來這邊的。如今帳面資金持續個2年以上絕對沒問題（話說不到2年，指不定你就跳槽          跑路了。。嘿嘿），二期融資即將開始。

       C.工資水平：工做4年多了，仍是比較瞭解一線城市開發人員的薪資水平的，只要你靠譜，確定是比市場平均水平高的。放心給你少了你乾的不開森，不開森寫不出好代碼咋辦        額。

       D.技術水平：萌萌噠們。。。這個你放心仍是比較前沿的morden、fashion的。。。咱們寫的代碼追求代碼質量、用戶體驗，不追求速度。這是個優雅的團體，不是土包子、碼農。

       E.項目狀況：C++服務端 ； C# WPF客戶端；業務方向是客廳娛樂，具體內容您來了咋細聊額；

3.團隊氛圍：沒的說額。。。時不時聚餐，老闆請吃飯。同事都很萌萌噠。。。

4.技術要求：面試者C#技術良好，有PC客戶端開發經營，熟悉WPF，wpf 的style、控件模板、動畫、繪圖、文檔處理、雙向綁定、隧道事件冒泡事件、命令、依賴屬性、附加屬性等等一坨一坨的基本功能的會用奧親。。

最後有意向的朋友是請發送簡歷到老闆 chenhuaAt1975@163.com.....期待你的來信....面試時間咱們能夠不須要工做日，畢竟各位程序員工資都很高，平均1天工資的幾百塊吧。。。咱們頗有誠意等你。。週一到週五 晚上您說時間。。。週六週末全天等您。。。咱們如飢似渴額。。。

------------------------------------------------------------------------------------------------------------------------------------------------

閒話不說了。。。上次還差幾個點沒有寫從今天開始繼續寫：

開發詳解（三） 瀑布流效果實現與UI虛擬化優化大數據顯示 ！

 咱們在作web開發時候，好比新浪微博、騰訊QQ空間、還有不少fashion 的圖片和購物網站都有瀑布流效果。用戶體驗很好，也很美觀。在PC客戶端怎麼作呢。

 那wpf裏面怎麼作到呢。

 這裏分幾種狀況來說：

1.低級的方法：

作瀑布流這種效果時候，不作性能上的特殊處理。

只作數據綁定和監控滾動條是否到最後一個item來自動加載下一頁數據。

基本思路是：第一次加載前1頁數據，代碼監視滾動條的位置是否已經到達最後一個item了，若是已經到達了就開一個線程訪問服務讀取第二頁數據加載。

 

void SrcScroll_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
        if ((e.ExtentHeight - e.VerticalOffset) <= 100 + SearchListBox.ActualHeight )
        {
            //do load           
        }
}

 

這樣一直循環往復。缺點是當到達第1000頁的時候，整個UI界面上的item數量可能就是PageSize*1000.假如PageSize是30個吧，那就是3萬個item。整個時候

拖動滾動條會發現十分卡頓。

2.初級的方法：

上面方法講到了界面item增多後界面會卡頓，解決方式怎麼辦呢。

wpf 的開發人員已經考慮到了這個問題，VirtualizingPanel 這個類就是爲了解決這個問題。VirtualizingStackPanel

用法很簡單例如：

<ComboBox Name="lstFast" Grid.Row="1" Grid.Column="1" Margin="5">
            <ComboBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel></VirtualizingStackPanel>
                </ItemsPanelTemplate>
            </ComboBox.ItemsPanel>
</ComboBox>

或者

<ListBox> 
    <ListBox.ItemsPanel>                
        <ItemsPanelTemplate>                    
            <VirtualizingStackPanel Orientation="Horizontal"></VirtualizingStackPanel> 
        </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
    <ListBoxItem>item 1</ListBoxItem> 
    <ListBoxItem>item 2</ListBoxItem> 
    <ListBoxItem>item 3</ListBoxItem> 
</ListBox>

或者相似這種風格

<Grid>
<ScrollViewer>
<VirtualizingStackPanel IsItemsHost="True"  />
</ScrollViewer>
</Grid>

具體應用中出現的問題這就不細說了，各位能夠百度。

注：這裏只介紹了UI虛擬化的方法，後臺的數據Model 其實也是須要虛擬化的，這裏篇幅緣由先暫時不寫了。

3.靈活運用的方法

當咱們用內置的VirtualizingStackPanel作應用效果時候，會發現一個問題。

就是VirtualizingStackPanel 缺點就是 item 只能橫向展現 或者豎向展現。以下圖

                                 

那我要實現WrapPanel效果怎麼辦呢？

 

沒有提供，那就只有本身繼承 VirtualizingPanel，實現自定義虛擬容器。

在codeproject.com 上面也有些國外人寫的開源的VirtualizingWrapPanel 能夠借鑑參考。