本此內容
本文首先介紹了該程序所能用到的WPF容器，然后布局界面提取圖片。最后展示成果和提出下一步將要研究的問題。
1 WPF容器
2 布局界面
3 取文件夾圖片
4 成果展示
5 總結和提問
1 WPF容器
容器是裝對象的東西，本次講解一類型可以排列對象的容器。WPF的Panel可以用來排列對象，我們把對象放入其中，WPF就能自動為之排列位置。System.Windows.Control.Panel是一個抽象類，所以我們不能直接使用<Panel/>的Xaml格式。其中Panel.Children是一個UIElementCollection，包含需要排列的各Item。Panel有不少派生類，我們可以使用這些Panel的派生類達到想要的排列效果。
StackPanel:Panel表示按照橫向或縱向從左到右或從右到左的排列Item：任何Item都有一個排列的方式，如果沒有特別指定，一般來說就是StackPanel的從上到下的壓縮排列方式。若Item的長寬沒有特別指定，則每個Item的高度將盡量的小，寬度將盡量的大，以占滿整個Stack的寬度。若此時Stack的高度沒有指定，則將盡量壓縮。
WrapPanel:Panel排列Item從左到右，排列滿了，然后換行，繼續這樣排列。WrapPanel可以根據Panel的寬度自動排列Item。
Grid:Panel是一種表格，功能強大。首先需要使用Grid.ColumnDefinitions, Grid.RowDefinitions定義表格的列屬性和行屬性。然后對其中的Item使用Grid.Row, Grid.Column定義其在該Grid中的第幾行第幾列，數值從0開始，即0行0列，就是實際上的1行1列。如果不指定幾行幾列則默認0行0列。下面是示例：
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image Source="Images\1.jpg"/>
<Image Grid.Column="1" Source="Images\1.jpg"/>
<Image Grid.Row="1" Source="Images\1.jpg"/>
<Image Grid.Row="1" Grid.Column="1" Source="Images\1.jpg"/>
</Grid>
效果如下，一個田字格，如果沒有設置行列則4張圖將重疊在一起。
2 布局界面
我們使用Gird布局，上部是一個Button，此Button取得圖片文件，然后顯示在下部。下部使用WrapPanel。就像這樣
代碼如下：
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button>取圖片</Button>
<WrapPanel Grid.Row="1" ItemHeight="50" ItemWidth="50">
<Image Source="Images\1.jpg"/>
<Image Source="Images\2.jpg"/>
<Image Source="Images\3.jpg"/>
<Image Source="Images\4.jpg"/>
</WrapPanel>
</Grid>
| Note：
|
3 取得一文件夾圖片
流程圖：
取文件名集合
WPF可以響應Windows消息，我們在Button中添加Click消息：
<Button Click="Buton_Click1">取圖片</Button>
產生事件處理函數：
void Button_Click1(object sender,RoutedEventArgs e){…}
使用FolderBrowserDialog選擇文件夾。需要注意的是WPF並不提供此對話框。我們使用System.Windows.Forms中的組件。在使用之前做下面兩件事情：
- 對此工程添加System.Windows.Forms引用
- 在用到的cs文件頭寫上using System.Windows.Forms
首先取得文件夾下的所有文件名，並剔除非圖像文件。
var fileList = Directory.EnumerateFiles ( folderName );
string[ ] tokenList = { ".jpg", ".png", ".bmp", ".jpeg", "gif" };
var imageList = fileList.Where ( x => tokenList.Any ( x1 => x.EndsWith ( x1, StringComparison.InvariantCultureIgnoreCase ) ) );
var images1 = imageList.Select ( x => new Image { Source = new BitmapImage ( new Uri ( x ) ) } );
return images1.ToList ( );
Image類System.Windows.Controls空間中，在Xaml中表示為<Image>標簽。然后我們把產生的Image加入Panel中。使用Panel.Children.Add方法。
internal void AddRange(IAddChild panel, IEnumerable itemList)
{
foreach (var item in itemList)
{
panel.AddChild(item);
}
}
響應按鈕事件中添加此代碼，用以顯示圖片組：
在Xaml中<WrapPanel Name="wrapPanel1">，然后程序會實例一個wrapPanel1供開發者使用。
void Button_Click1 ( object sender, RoutedEventArgs e )
{
FolderBrowserDialog dlg = new FolderBrowserDialog ( );
if ( dlg.ShowDialog ( ) == System.Windows.Forms.DialogResult.OK )
{
var imgs = new ImageGetter().GetList(dlg.SelectedPath);
wrapPanel1.Children.Clear();
new PanelManage().AddRange(wrapPanel1,imgs);
}
}
4 成果展示
圖片的文件夾顯示功能就完成了。
5 總結和提問
現在我們已經可以做出程序原型了。下一步我們將進行一些優化，並介紹新的控件。
PS1：其實此程序有兩個隱患，大家拿回去編碼運行試試。看能發現和修正不？
PS2：這也是我將進行優化的原因