手把手教你寫移動端瀑布流控件布局篇

1.了解每個平台的基礎的布局控件：

Android：FrameLayout,LinearLayout,AbsoluteLayout(已廢棄) （http://developer.android.com/guide/topics/ui/declaring-layout.html）以及強大的ViewGroup。

Windows Phone：Grid,StackPanel,Canvas （http://msdn.microsoft.com/zh-cn/library/windowsphone/develop/jj207042(v=vs.105).aspx）

iOS：強大的UIView給開發者自己夠構造布局的空間。

2.思路設計圖

3.思路剖析

這里先給兩個圖起個名字：第一個叫LinearLayout,第二個叫CanvasLayout 。這是現在比較流行的布局方式，Android有些人的博客寫是采用第一中方式寫的。我不做評判，先簡單介紹下。

LinearLayout 是按照列數來構造列數個垂直排列的容器控件,然后當數據來的時候，先拿到高度最低的列，根據計算好的列寬，把圖片等比例縮放，然后把數據插入到相應的列中，維護多個容器。

CanvasLayout是按照列數和控件的寬度，計算出每列的寬度，然后根據計算好的列寬，對圖片進行等比例縮放得到每個Item的寬高，然后計算Item的坐標，有了Point和Size就可以放入布局中。維護坐標系統。

我個人更傾向於第二種方式。（其實我也沒試過第一種，有興趣者可以跟帖討論）

猜測原因：

LinearLayout要維護多個Container對象，在后面會提到的deleteItem，SelectItem或者在ItemAnimation時，都要找相應的Item進行位置變化或者UI 重新渲染等,而這些又是對相應的Container進行的，這樣就要不斷維持和判斷Item和Container的關系，項目久了之后可能就出現混亂和難以維護的情況。

CanvasLayout維護的就是一個值類型或者一個結構體，相應的操作也是在一個容器中進行的，再加上有自己的坐標系統，操作起來也比較方便。

4.代碼部分

好了，說了這么多，看看具體代碼是怎么來寫吧。

iOS:

UIPinterestView.h

#import <UIKit/UIKit.h>

@class UIPinterestViewCell;
@class UIPinterestView;
@protocol UIPinterestViewDataSource;

@protocol UIPinterestViewDelegate <NSObject,UIScrollViewDelegate>

@required
- (CGFloat)pinterestView:(UIPinterestView *)pinterestView heightForItemAtIndex:(NSUInteger)index;
@optional
- (void)pinterestView:(UIPinterestView *)pinterestView didSelectItemAtIndex:(NSUInteger)index;

@end

@interface UIPinterestView : UIScrollView
{
    NSMutableArray *_columnHeightRecoder;
    NSUInteger _oldItemsCount;
    BOOL _needLayout;
}

@property(nonatomic,assign) id<UIPinterestViewDelegate> delegate;
@property(nonatomic,assign) id<UIPinterestViewDataSource> dataSource;
@property(nonatomic,assign) CGFloat itemWidth;

- (id)dequeueReusableCellWithIdentifier:(NSString *)identifier;
- (void)reloadData;

@end

@protocol UIPinterestViewDataSource <NSObject>

@required
- (NSUInteger)numberOfItemsInGridView:(UIPinterestView *)pinterestView;
- (NSUInteger)columnsNumPerRow:(UIPinterestView *)pinterestView;
- (CGFloat)marginPerCell:(UIPinterestView *)pinterestView;
- (UIPinterestViewCell *)pinterestView:(UIPinterestView *)pinterestView cellForItemAtIndex:(NSUInteger)index;

@end

UIPinterestView.m

#import "UIPinterestView.h"
#import "UIPinterestViewCell.h"
#import "UIView+UITappedBlocks.h"

@implementation UIPinterestView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self shareInit];
    }
    return self;
}

- (void)dealloc
{
    if (_columnHeightRecoder != nil) {
        [_columnHeightRecoder release];
        _columnHeightRecoder = nil;
    }
    [super dealloc];
}

- (void)shareInit
{
    if(_columnHeightRecoder == nil) {
        _columnHeightRecoder = [[NSMutableArray alloc] init];
    } else {
        [_columnHeightRecoder release];
        _columnHeightRecoder = nil;
        [self shareInit];
    }
    _oldItemsCount = 0;
    _needLayout = YES;
}

-(void)layoutSubviews
{
    [super layoutSubviews];
    if(!_needLayout) {
        return;
    }
    [self layoutCells];
    _needLayout = NO;
}

- (void)layoutCells
{
    NSUInteger itemCount = [self.dataSource numberOfItemsInGridView:self];
    NSUInteger columnCount = [self columnCount];
    CGFloat columnMargin = [self columnMargin];
    self.itemWidth = (self.frame.size.width - (columnCount + 1) * columnMargin) / columnCount;
    
    for (int i = _oldItemsCount; i < itemCount; i++) {
        
        UIPinterestViewCell *cell = [self.dataSource pinterestView:self cellForItemAtIndex:i];
        [cell whenTapped:^{
            if([self.delegate respondsToSelector:@selector(pinterestView:didSelectItemAtIndex:)]) {
                [self.delegate pinterestView:self didSelectItemAtIndex:i];
            }
        }];
        CGFloat itemHeight = [self.delegate pinterestView:self heightForItemAtIndex:i];
        int minYColumnNum = [self getMinHeightColumnNum:columnCount];//獲取最小列的列號
        CGFloat minYHeight = [[_columnHeightRecoder objectAtIndex:minYColumnNum] floatValue];
        CGFloat x = minYColumnNum * (self.itemWidth + columnMargin) + columnMargin;
        CGFloat y = minYHeight + columnMargin;
        cell.frame = CGRectMake(x, y, self.itemWidth, itemHeight);
        [self addSubview:cell];
        _columnHeightRecoder[minYColumnNum] = [NSNumber numberWithFloat:(y + itemHeight)];
        
    }
    int maxYColumnNum = [self getMaxHeightColumnNum:columnCount];
    CGFloat maxHeight = [[_columnHeightRecoder objectAtIndex:maxYColumnNum] floatValue];
    CGSize gridSize = CGSizeMake(self.contentSize.width, maxHeight);
    [self updateContentSize:gridSize];
}

- (void)updateContentSize:(CGSize)gridSize
{
    self.contentSize = gridSize;
}

- (int)columnCount
{
    return [self.dataSource columnsNumPerRow:self];
}

- (CGFloat)columnMargin
{
    return [self.dataSource marginPerCell:self];
}


- (int)getMinHeightColumnNum:(NSUInteger)columnCount
{
    if(_columnHeightRecoder.count == 0) {
        for (int i=0; i<columnCount; i++) {
            [_columnHeightRecoder insertObject:[NSNumber numberWithFloat:0.0f] atIndex:i];
        }
    }
    int num = 0;
    for (int i=0; i<columnCount; i++) {
        CGFloat minY = [[_columnHeightRecoder objectAtIndex:num] floatValue];
        CGFloat y = [[_columnHeightRecoder objectAtIndex:i] floatValue];
        if(minY > y) {
            num = i;
        }
    }
    return num;
}

- (int)getMaxHeightColumnNum:(NSUInteger)columnCount
{
    int num = 0;
    for (int i=0; i<columnCount; i++) {
        CGFloat maxY = [[_columnHeightRecoder objectAtIndex:num] floatValue];
        CGFloat y = [[_columnHeightRecoder objectAtIndex:i] floatValue];
        if(maxY < y) {
            num = i;
        }
    }
    return num;
}

- (id)dequeueReusableCellWithIdentifier:(NSString *)identifier
{
    return nil;
}


- (void)reloadData
{
    _needLayout = YES;
    [self setNeedsLayout];
}

@end

UIPinterestViewCell.h

#import <UIKit/UIKit.h>

@interface UIPinterestViewCell : UIView

@property(nonatomic,retain) NSString *identifier;

- (id)initWithReuseIndentifier:(NSString *)identifier;

@end

UIPinterestViewCell.m

#import "UIPinterestViewCell.h"

@implementation UIPinterestViewCell

- (void)dealloc
{
    self.identifier = nil;
    [super dealloc];
}

- (id)initWithReuseIndentifier:(NSString *)identifier
{
    if (self = [super init]) {
        self.identifier = identifier;
    }
    return self;
}

@end

MainViewController.h

#import <UIKit/UIKit.h>
#import "UIPinterestView.h"

@interface MainViewController : UIViewController<UIPinterestViewDelegate,UIPinterestViewDataSource>
{
    UIPinterestView *_pinterestView;
    NSMutableArray *_itemsArray;
}


@end

MainViewController.m

#import "MainViewController.h"
#import "UIPinterestViewCell.h"
#import "ItemModel.h"

@interface MainViewController ()

@end

@implementation MainViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self setUpViews];
    [self initData];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)dealloc
{
    if(_pinterestView != nil) {
        [_pinterestView release];
        _pinterestView = nil;
    }
    if(_itemsArray != nil) {
        [_itemsArray release];
        _itemsArray = nil;
    }
    [super dealloc];
}

#pragma mark - View
- (void)setUpViews
{
    _pinterestView = [[UIPinterestView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
    _pinterestView.dataSource = self;
    _pinterestView.delegate = self;
    [self.view addSubview:_pinterestView];
}

#pragma mark - Delegate

- (CGFloat)pinterestView:(UIPinterestView *)pinterestView heightForItemAtIndex:(NSUInteger)index
{
    ItemModel *model = (ItemModel *)[_itemsArray objectAtIndex:index];
    if (model == nil) {
        return 0.0f;
    } else {
        return model.ratio * pinterestView.itemWidth;
    }
}

- (NSUInteger)numberOfItemsInGridView:(UIPinterestView *)pinterestView
{
    return _itemsArray.count;
}

- (NSUInteger)columnsNumPerRow:(UIPinterestView *)pinterestView
{
    return 3;
}

- (CGFloat)marginPerCell:(UIPinterestView *)pinterestView
{
    return 5.0f;
}

- (UIPinterestViewCell *)pinterestView:(UIPinterestView *)pinterestView cellForItemAtIndex:(NSUInteger)index
{
    NSString *cellIdentifier = @"cell";
    UIPinterestViewCell *cell = [pinterestView dequeueReusableCellWithIdentifier:cellIdentifier];
    if (cell == nil) {
        cell = [[UIPinterestViewCell alloc] init];
        cell.backgroundColor = [UIColor greenColor];
    }
    return cell;
}
    
#pragma mark - Data
- (void)initData
{
    _itemsArray = [[NSMutableArray alloc] init];
    
    for (int i=0; i<2; i++) {
        ItemModel *model = [[ItemModel alloc] init];
        model.name = @"Test1";
        model.ratio = 0.5f;
        [_itemsArray addObject:model];
        [model release];
        
        model = [[ItemModel alloc] init];
        model.name = @"Test2";
        model.ratio = 0.8f;
        [_itemsArray addObject:model];
        [model release];
        
        model = [[ItemModel alloc] init];
        model.name = @"Test3";
        model.ratio = 1.2f;
        [_itemsArray addObject:model];
        [model release];
        
        model = [[ItemModel alloc] init];
        model.name = @"Test4";
        model.ratio = 1.5f;
        [_itemsArray addObject:model];
        [model release];
        
        model = [[ItemModel alloc] init];
        model.name = @"Test5";
        model.ratio = 1.2f;
        [_itemsArray addObject:model];
        [model release];
    }
}

@end

這部分代碼是我已經實現過的一個版本的簡略版，基本上只是表達出布局的概念。

效果圖：

===================================屌絲的分割線====================================

Android:

首先，類似ListView一樣構造PinterestView繼承自ViewGroup,由於我的android水平還是小白級別，所以寫的比較簡單，對onMeasure和onLayout的處理可能也不完善，但是畢竟是實現了，歡迎拍磚。代碼：

PinterestView.java

public class PinterestView extends ViewGroup {
    
    private static String PinterestViewLog = "PinterestViewLog";
    
    //datasource
    private int _columnCount = 3;
    private int _columnMargin = 5;
    private PinterestBaseAdapter _adapter = null;
    private int _columnRecorder[] =  new int[_columnCount];
    
    //flag
    private boolean _isLayouting = false;
    private boolean _needsLayout = true;

    public PinterestView(Context context) {
        super(context);
    }
    
    public PinterestView(Context context,AttributeSet attrs) {
        super(context,attrs);
    }
    
    public PinterestView(Context context,AttributeSet attrs,int defStyle) {
        super(context,attrs,defStyle);
    }
    
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        
        if (_adapter != null) {
//            Log.i(PinterestViewLog,"widthMode:" + widthMode + "heightMode:" + heightMode + "widthSize:" + widthSize + "heightSize:" + heightSize);
//            Log.i(PinterestViewLog,"onMeasure");
        }
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        _isLayouting = true;
        if (_needsLayout) {
            Log.i(PinterestViewLog,"onLayout");
            layoutChildren();
            _needsLayout = false;
        }
        _isLayouting = false;
    }
    
    public void setAdapter(PinterestBaseAdapter adapter) {
        Log.i(PinterestViewLog,"setAdapter");
        _adapter = adapter;
    }
    
    public PinterestBaseAdapter getAdapter() {
        return _adapter;
    }
    
    private void layoutChildren() {
        
        int itemCount = _adapter.getCount();
        int totalWidth = this.getWidth();
        int itemWidth = (totalWidth - _columnMargin * (_columnCount + 1)) / _columnCount;
        for(int i=0; i<itemCount; i++) {
            View childView = this.obtainView(i);
            this.addViewInLayout(childView, 0, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT));
//            this.addView(childView);            
            int minColumnIndex = this.getMinHeightColumn();
            int itemHeight = _adapter.getItemHeight(i,itemWidth);
            int left = itemWidth * minColumnIndex + _columnMargin * (minColumnIndex + 1);
            int top = _columnRecorder[minColumnIndex] + _columnMargin;
            int right = left + itemWidth;
            int bottom = top + itemHeight;
//            Log.i(PinterestViewLog,"left:" + left + "top:" + top + "right:" + right + "bottom:" + bottom);
            childView.measure(itemWidth, itemHeight);//設置view 寬高
            childView.layout(left, top, right, bottom); //設置view 位置
            _columnRecorder[minColumnIndex] = bottom;
        }
    }
    
    private View obtainView(int position) {
        return _adapter.getView(position, null, this);
    }
    
    private int getMinHeightColumn() {
        int minIndex = 0;
        for (int i = 0; i < _columnRecorder.length; i++) {
            int minHeight = _columnRecorder[minIndex];
            int newHeight = _columnRecorder[i];
            if(minHeight > newHeight) {
                minIndex = i;
            }
        }
        return minIndex;
    }

需要一個Adapter.

PinterestAdapter.java：

public class PinterestBaseAdapter implements Adapter{

    private Context _context = null;
    private LayoutInflater _inflater = null;
    private ArrayList _models = null;
    
    public PinterestBaseAdapter(Context context,ArrayList models) {
        _context = context;
        _inflater = LayoutInflater.from(context);
        _models = models;
    }
    
    @Override
    public int getCount() {
        return _models.size();
    }

    @Override
    public Object getItem(int position) {
        return _models.get(position);
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public int getItemViewType(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        //這里的ConvertView是在PinterestView中獲取的，目前全部是null，等到后面講道virtualize的時候會有改變
        //由於這里先不考慮性能，所以也沒有使用placehoder等機制
        if (convertView == null) {
            convertView = _inflater.inflate(R.layout.item_pinterest, null);
        }
        ItemModel model = (ItemModel) this.getItem(position);
        TextView nameTv = (TextView) convertView.findViewById(R.id.name_tv);
//        nameTv.setText(model.getName());
        return convertView;
    }
    
    public int getItemHeight(int position,int itemWidth) {
        ItemModel model = (ItemModel) this.getItem(position);
        return (int)(itemWidth * model.getRatio());
    }

    @Override
    public int getViewTypeCount() {
        return 0;
    }

    @Override
    public boolean hasStableIds() {
        return false;
    }

    @Override
    public boolean isEmpty() {
        return false;
    }

    @Override
    public void registerDataSetObserver(DataSetObserver observer) {
        
    }

    @Override
    public void unregisterDataSetObserver(DataSetObserver observer) {
        
    }

}

item_pinterest.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FF00FF00"
    android:orientation="vertical" >
    
    <TextView android:id="@+id/name_tv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:textSize="18sp"/>

</LinearLayout>

最后Activity和main.xml:

Activity_Pinterest.java和Activity_Pinterest.xml

public class PinterestActivity extends Activity {

    private ArrayList<ItemModel> _models = new ArrayList<ItemModel>();

    private PinterestView _pinterestView = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.activity_pinterest);
        for (int i = 0; i < 2; i++) {
            initData();
        }
        initView();

    }

    private void initView() {
        _pinterestView = (PinterestView) this.findViewById(R.id.pinterest_list);
        PinterestBaseAdapter adapter = new PinterestBaseAdapter(this, _models);
        _pinterestView.setAdapter(adapter);
    }

    private void initData() {

        ItemModel model1 = new ItemModel();
        model1.setName("Test1");
        model1.setRatio(0.5);
        _models.add(model1);

        model1 = new ItemModel();
        model1.setName("Test2");
        model1.setRatio(0.8);
        _models.add(model1);

        model1 = new ItemModel();
        model1.setName("Test3");
        model1.setRatio(1.2);
        _models.add(model1);

        model1 = new ItemModel();
        model1.setName("Test4");
        model1.setRatio(1.5);
        _models.add(model1);

        model1 = new ItemModel();
        model1.setName("Test5");
        model1.setRatio(1.2);
        _models.add(model1);

    }
}

<?xml version="1.0" encoding="utf-8"?>
 <com.nextstep.pinterestview.controls.PinterestView
         xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pinterest_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

效果圖：

這只是個簡單的demo，有很多需要注意的地方在后續我的學習伴隨着我的文章中會慢慢優化的。謝謝大家指點。

===================================屌絲的分割線====================================

Windows Phone:

關於windows phone我更喜歡用MVVM,以及微軟的一套控件綁定機制，如果喜歡把Android的MVC硬套過來的同學，可以對比下我前面Android實現模式，俗話說，入鄉隨俗，是吧。

PinterestView.cs

using System;
using System.Collections;
using System.Collections.Generic;
using System.Diagnostics;
using System.Reflection;
using System.Windows;
using System.Windows.Controls;
namespace Pinterest.Controls
{
    public class PinterestView : Control
    {

        #region Fields

        private List<object> _items = new List<object>();
        private DataTemplate _itemTemplate = null;
        private int _columnCount = 0;
        private double _columnMargin = 0.0;
        private List<double> _columnRecorder = new List<double>();
        private double _showWidth = 480;//need changed more good????
        
        private Canvas _itemContainer;
        
        #endregion

        #region Constructor
        public PinterestView()
        {
            base.DefaultStyleKey = typeof(PinterestView);
            ShareInitData();
        }

        #endregion

        #region Override

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            GetViews();
            LoadView();
        }

        #endregion

        #region Method

        private void GetViews()
        {
            _itemContainer = (Canvas)base.GetTemplateChild("PART_ItemsContainer");
        }

        private void ShareInitData()
        {
            InitColumnRecorder();
        }

        private void InitColumnRecorder()
        {
            //Init ColumnRecorder
            for (int i = 0; i < _columnCount; i++)
            {
                _columnRecorder.Add(0.0);
            }
        }

        private void LoadView()
        {
            double totalWidth = this.Width;
            double itemWidth = (_showWidth - _columnMargin * (_columnCount + 1)) / _columnCount;
            
            for (int i = 0; i < _items.Count; i++)
            {
                object obj = _items[i];
                double ratio = this.GetModelRatio(obj);
                double itemHeight = itemWidth * ratio;
                int minColumnIndex = GetMinColumnIndex();
                double x = minColumnIndex * itemWidth + (minColumnIndex + 1) * _columnMargin;
                double y = _columnRecorder[minColumnIndex] + _columnMargin;

                Debug.WriteLine("x:" + x + "y:" + y + "width:" + itemWidth + "height:" + itemHeight);

                //Make ItemView
                PinterestViewItem itemView = GenerateItemView();
                //Bind To Model
                BindToModel(itemView,obj);
                //Set ItemViewSize
                SetItemSize(itemView, new Rect(x, y, itemWidth, itemHeight));
                //Add To Container
                _itemContainer.Children.Add(itemView);
                _columnRecorder[minColumnIndex] = y + itemHeight;
            }
        }

        private PinterestViewItem GenerateItemView()
        {
            return new PinterestViewItem();//no virtualize
        }

        private void BindToModel(PinterestViewItem itemView,object model) 
        {
            if(model == null) return;
            itemView.SetValue(FrameworkElement.DataContextProperty,model);
            if (_itemTemplate != null)
            {
                itemView.Content = model;
                itemView.ContentTemplate = _itemTemplate;
            }
        }

        private void SetItemSize(FrameworkElement element,Rect rect)
        {
            element.SetValue(FrameworkElement.WidthProperty, rect.Width);
            element.SetValue(FrameworkElement.HeightProperty, rect.Height);
            Canvas.SetLeft(element, rect.X);
            Canvas.SetTop(element, rect.Y);
        }

        private int GetMinColumnIndex()
        {
            int min = 0;
            for (int i = 0; i < _columnCount; i++)
            {
                double minHeight = _columnRecorder[min];
                double newHeight = _columnRecorder[i];
                if (newHeight < minHeight)
                {
                    min = i;
                }
            }
            return min;
        }

        private double GetModelRatio(object obj)
        {
            double ratio = 1.0;
            PropertyInfo property = obj.GetType().GetProperty("Ratio");
            if (property != null && property.CanRead)
            {
                ratio = (double)property.GetValue(obj);
            }
            else
            {
                throw new InvalidOperationException("The model must has the Ratio property.");
            }
            return ratio;
        }

        private void AddItems(IEnumerable dataSource)
        {
            if (dataSource != null)
            {
                IEnumerator enumerator = dataSource.GetEnumerator();
                try
                {
                    while (enumerator.MoveNext())
                    {
                        object current = enumerator.Current;
                        _items.Add(current);
                    }
                }
                finally
                {
                    IDisposable disposable = enumerator as IDisposable;
                    if (disposable != null)
                    {
                        disposable.Dispose();
                    }
                }
               
            }
        }

        #endregion

        #region DependencyProperites

        #region ItemsSource DependencyProperty
        public IEnumerable ItemsSource
        {
            get { return (IEnumerable)GetValue(ItemsSourceProperty); }
            set { SetValue(ItemsSourceProperty, value); }
        }

        public static readonly DependencyProperty ItemsSourceProperty =
            DependencyProperty.Register("ItemsSource", typeof(IEnumerable), typeof(PinterestView), new PropertyMetadata(null, OnItemsSourceChanged));

        private static void OnItemsSourceChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            PinterestView view = (PinterestView)sender;
            view.OnItemsSourceChanged(e);
        }

        private void OnItemsSourceChanged(DependencyPropertyChangedEventArgs e)
        {
            IEnumerable dataSource = e.NewValue as IEnumerable;
            this.AddItems(dataSource);
        }
        #endregion
       

        #region ItemTemplate DependencyProperty
        
        #endregion
        public DataTemplate ItemTemplate
        {
            get { return (DataTemplate)GetValue(ItemTemplateProperty); }
            set { SetValue(ItemTemplateProperty, value); }
        }

        public static readonly DependencyProperty ItemTemplateProperty =
            DependencyProperty.Register("ItemTemplate", typeof(DataTemplate), typeof(PinterestView), new PropertyMetadata(null,OnItemTemplateChanged));

        private static void OnItemTemplateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            PinterestView view = (PinterestView)d;
            view.OnItemTemplateChanged(e);
        }

        private void OnItemTemplateChanged(DependencyPropertyChangedEventArgs e)
        {
             _itemTemplate = (DataTemplate)e.NewValue;
        }

        #region ColumnMargin DependencyProperty

        public double ColumnMargin
        {
            get { return (double)GetValue(ColumnMarginProperty); }
            set { SetValue(ColumnMarginProperty, value); }
        }

        public static readonly DependencyProperty ColumnMarginProperty =
            DependencyProperty.Register("ColumnMargin", typeof(double), typeof(PinterestView), new PropertyMetadata(-1.0,OnColumnMarginChanged));

        private static void OnColumnMarginChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            ((PinterestView)d).OnColumnMarginChanged(e);
        }

        private void OnColumnMarginChanged(DependencyPropertyChangedEventArgs e)
        {
            _columnMargin = (double)e.NewValue;
        }

        #endregion

        #region ColumnCount DependecyProperty

        public int ColumnCount
        {
            get { return (int)GetValue(ColumnCountProperty); }
            set { SetValue(ColumnCountProperty, value); }
        }

        public static readonly DependencyProperty ColumnCountProperty =
            DependencyProperty.Register("ColumnCount", typeof(int), typeof(PinterestView), new PropertyMetadata(-1,OnColumnCountChanged));

        private static void OnColumnCountChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            PinterestView view = (PinterestView)d;
            view.OnColumnCountChanged(e);
        }

        private void OnColumnCountChanged(DependencyPropertyChangedEventArgs e)
        {
            _columnCount = (int)e.NewValue;
            InitColumnRecorder();
        }

        #endregion
        
        #endregion



    }
}

PinterestView.xaml

<Style TargetType="Controls:PinterestView">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Controls:PinterestView">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <Canvas x:Name="PART_ItemsContainer" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

PinterestViewItem.cs

using System.Windows.Controls;

namespace Pinterest.Controls
{
    public class PinterestViewItem : ContentControl
    {
        public PinterestViewItem()
        {
            base.DefaultStyleKey = typeof(PinterestViewItem);
        }
    }
}

PinterestViewItem.xaml

<Style TargetType="Controls:PinterestViewItem">
        <Setter Property="Background"
                Value="Transparent" />
        <Setter Property="BorderThickness"
                Value="0" />
        <Setter Property="BorderBrush"
                Value="Transparent" />
        <Setter Property="Padding"
                Value="0" />
        <Setter Property="HorizontalContentAlignment"
                Value="Stretch" />
        <Setter Property="VerticalContentAlignment"
                Value="Stretch" />
        <Setter Property="CacheMode"
                Value="BitmapCache" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Controls:PinterestViewItem">
                    <Grid x:Name="PART_ContainerLayout"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Stretch">
                        <ContentControl x:Name="PART_ContainerHolder"
                                        Margin="{TemplateBinding Margin}"
                                        HorizontalAlignment="Stretch"
                                        VerticalAlignment="Stretch"
                                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                        Content="{TemplateBinding Content}"
                                        ContentTemplate="{TemplateBinding ContentTemplate}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

    </Style>

MainPage.xaml

<phone:PhoneApplicationPage x:Class="Pinterest.MainPage"
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            mc:Ignorable="d"
                            FontFamily="{StaticResource PhoneFontFamilyNormal}"
                            FontSize="{StaticResource PhoneFontSizeNormal}"
                            Foreground="{StaticResource PhoneForegroundBrush}"
                            SupportedOrientations="Portrait"
                            xmlns:CT="clr-namespace:Pinterest.Controls"
                            Orientation="Portrait"
                            shell:SystemTray.IsVisible="True"
                            DataContext="{Binding MainVm, Mode=OneWay, Source={StaticResource Locator}}">
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- LOCALIZATION NOTE:
            To localize the displayed strings copy their values to appropriately named
            keys in the app's neutral language resource file (AppResources.resx) then
            replace the hard-coded text value between the attributes' quotation marks
            with the binding clause whose path points to that string name.

            For example:

                Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"

            This binding points to the template's string resource named "ApplicationTitle".

            Adding supported languages in the Project Properties tab will create a
            new resx file per language that can carry the translated values of your
            UI strings. The binding in these examples will cause the value of the
            attributes to be drawn from the .resx file that matches the
            CurrentUICulture of the app at run time.
         -->

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel"
                    Grid.Row="0"
                    Margin="12,17,0,28">
            <TextBlock Text="MY APPLICATION"
                       Style="{StaticResource PhoneTextNormalStyle}"
                       Margin="12,0" />
            <TextBlock Text="page name"
                       Margin="9,-7,0,0"
                       Style="{StaticResource PhoneTextTitle1Style}" />
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel"
              Grid.Row="1">
            <CT:PinterestView x:Name="PinterestView"
                              ItemsSource="{Binding Items}"
                              ColumnCount="3"
                              ColumnMargin="5.0">
                <CT:PinterestView.ItemTemplate>
                    <DataTemplate>
                        <Grid Background="Green" />
                    </DataTemplate>
                </CT:PinterestView.ItemTemplate>
            </CT:PinterestView>
        </Grid>
        <!--Uncomment to see an alignment grid to help ensure your controls are
            aligned on common boundaries.  The image has a top margin of -32px to
            account for the System Tray. Set this to 0 (or remove the margin altogether)
            if the System Tray is hidden.

            Before shipping remove this XAML and the image itself.-->
        <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
    </Grid>

</phone:PhoneApplicationPage>

MainPage.xaml.cs 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using Pinterest.Resources;
using Pinterest.ViewModels;

namespace Pinterest
{
    public partial class MainPage : PhoneApplicationPage
    {
        private MainViewModel _mainViewModel;

        // Constructor
        public MainPage()
        {
            InitializeComponent();
            _mainViewModel = (MainViewModel)this.DataContext;
            // Sample code to localize the ApplicationBar
            //BuildLocalizedApplicationBar();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
            _mainViewModel.NavigateTo(this, e);
        }

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            _mainViewModel.NavigateFrom(this, e);
            base.OnNavigatedFrom(e);
        }

        // Sample code for building a localized ApplicationBar
        //private void BuildLocalizedApplicationBar()
        //{
        //    // Set the page's ApplicationBar to a new instance of ApplicationBar.
        //    ApplicationBar = new ApplicationBar();

        //    // Create a new button and set the text value to the localized string from AppResources.
        //    ApplicationBarIconButton appBarButton = new ApplicationBarIconButton(new Uri("/Assets/AppBar/appbar.add.rest.png", UriKind.Relative));
        //    appBarButton.Text = AppResources.AppBarButtonText;
        //    ApplicationBar.Buttons.Add(appBarButton);

        //    // Create a new menu item with the localized string from AppResources.
        //    ApplicationBarMenuItem appBarMenuItem = new ApplicationBarMenuItem(AppResources.AppBarMenuItemText);
        //    ApplicationBar.MenuItems.Add(appBarMenuItem);
        //}
    }
}

MainViewModel: 

using Microsoft.Phone.Controls;
using Pinterest.Helpers;
using Pinterest.Models;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Windows.Navigation;

namespace Pinterest.ViewModels
{
    public class MainViewModel : ViewModelBase
    {

        #region Fields

        private ObservableCollection<ItemModel> _items = new ObservableCollection<ItemModel>();

        #endregion

        #region Constructor
        public MainViewModel()
        {

        }

        #endregion

        #region Properties
        

        public ObservableCollection<ItemModel> Items
        {
            get { return _items; }
            set
            {
                if (value != _items)
                {
                    _items = value;
                    this.NotifyOfPropertyChange(()=>this.Items);
                }
            }
        }
        
        #endregion

        #region Method

        private void InitData()
        {
            List<ItemModel> list = new List<ItemModel>();

            for (int i = 0; i < 2; i++)
            {
                ItemModel model1 = new ItemModel { Name = "Test1", Ratio = 0.5 };
                ItemModel model2 = new ItemModel { Name = "Test1", Ratio = 0.8 };
                ItemModel model3 = new ItemModel { Name = "Test1", Ratio = 1.2 };
                ItemModel model4 = new ItemModel { Name = "Test1", Ratio = 1.5 };
                ItemModel model5 = new ItemModel { Name = "Test1", Ratio = 1.2 };
                list.Add(model1);
                list.Add(model2);
                list.Add(model3);
                list.Add(model4);
                list.Add(model5);
            }

            list.ToObservable<ItemModel>(this.Items);
        }

        #endregion

        #region Override

        public override void NavigateTo(PhoneApplicationPage page, NavigationEventArgs e)
        {
            InitData();
        }


        public override void NavigateFrom(PhoneApplicationPage page, NavigationEventArgs e)
        {

        }

        #endregion

    }
}

效果圖

 

5.代碼下載地址:

http://pan.baidu.com/s/1AB4TT(百度網盤)