在日常開發中，有些布局非常具有規律性，比如相同的列寬，行高，均勻的排列等，為了簡化開發，WPF提供了UniformGrid布局和ItemsControl容器，本文以一個簡單的小例子，簡述 如何在WPF開發中套用UniformGrid和ItemsControl實作動態均勻的布局 ，僅供學習分享使用，如有不足之處，還請指正。
什麽是UniformGrid?
在WPF開發中，提供了一種Grid網格布局，此布局套用靈活，形式多樣，在使用之前，需要定義行，列，設定高度，寬度等內容，使用相對復雜。為了簡化布局，針對具有等寬，等高的布局，提供了一種更加簡化的布局容器UniformGrid。
UniformGrid【統一布局】，提供一種在網格(網格中的所有單元格都具有相同的大小)中排列內容的方法 。
UniformGrid常用內容
UniformGird同一行，列等寬；同一列，行等高。常用內容為：
Margin：獲取或設定元素的外邊距。
Name：元素的標識名稱；
Opacity：透明度
Width/Height：寬度和高度；
Visibility：該元素可見性；
Rows ： 獲取或設定網格中的行數 ；
Columns ： 獲取或設定網格中的列數 ；
FirstColumn 獲取或設定網格第一行中前導空白單元格的數量，必須小於內容的值 Columns；
註意：UniformGrid相當於簡化版的Gird，但並不是Grid的子類別，而是和Grid同級，都繼承於Panel類。
UniformGrid範例
UniformGrid中如果不設定子元素的控制項大小，會根據容器的大小和行列數自動填充 。如下所示：
<UniformGridColumns="4"Margin="5"><ButtonContent="按鈕1"Margin="2"></Button><ButtonContent="按鈕2"Margin="2"></Button><ButtonContent="按鈕3"Margin="2"></Button><ButtonContent="按鈕4"Margin="2"></Button><ButtonContent="按鈕5"Margin="2"></Button><ButtonContent="按鈕6"Margin="2"></Button></UniformGrid>
關於UniformGrid，有以下幾點需要註意：
如果設定了Columns，沒有設定Rows，則會根據元素個數和列數自動計算行數。
如果設定了Rows，沒有設定Columns，則會根據元素個數和行數自動計算列數。
如果 Rows，Columns 都沒有設定，則會根據元素個數自動匹配， 建議至少設定一個，否則可能與預期的布局不符 。
如果沒有設定容器中元素的大小，則自動填充；如果設定了容器中元素的大小，且小於容器為該元素分配的平均大小，則以元素為準，其他以空白填充；如果設定了元素大小，且元素的大小大於容器為該元素分配的平均大小，則多余部份會隱藏，只顯示能夠顯示的那部份。
什麽是ItemsControl?
ItemsControl條目控制項，用於顯示數據項集合，它允許按照自訂方式呈現任何型別的物件 ，可以在其中使用不同的布局和面板來展示數據。ItemsControl非常靈活，可以滿足各種需求。
ItemsControl涉及知識點
ItemsControl的常用知識點如下：
ItemTemplate ，是DataTemplate型別，可以透過ItemTemplate設定條目項的呈現方式。
ItemsPanel ，是ItemsPanelTemplate型別，可以透過ItemsPanel設定容器中各個條目項的布局方式。
ItemsSource，可以透過繫結資料來源為ItemsControl設定內容。
Items，條目列表，如果設定了ItemsSource，則此內容不生效 。
ItemsControl範例
以下範例以文本的形式，展示了每一個條目項，且預設元素以橫向排列。如下所示：
<ItemsControlItemsSource="{Binding Customers}"><ItemsControl.ItemTemplate><DataTemplate><TextBlockText="{Binding Name}" /></DataTemplate></ItemsControl.ItemTemplate><ItemsControl.ItemsPanel><ItemsPanelTemplate><StackPanel /></ItemsPanelTemplate></ItemsControl.ItemsPanel></ItemsControl>
ItemsControl和UniformGrid結合
結合ItemsControl【數據繫結，條目項自訂設定】和UniformGrid【等高，等寬】各自的優點 ，建立一個圖片列表 。具體步驟如下：
自動辨識資料夾中的圖片，然後將資料來源繫結到ItemsControl中進行呈現。
ItemsControl中的條目項中展示圖片縮圖和名稱，且條目項中的圖片等比縮放。
條目布局采用UniformGrid，且每行顯示5張圖。
圖片較多時，要有捲軸，所以需要設定ScrollViewer。
在Xaml中，頁面布局如下所示：
<ScrollViewerVerticalScrollBarVisibility="Auto"><ItemsControlItemsSource="{Binding ImageItems}"Background="#eeeeee"><ItemsControl.ItemsPanel><ItemsPanelTemplate><UniformGridColumns="5"></UniformGrid></ItemsPanelTemplate></ItemsControl.ItemsPanel><ItemsControl.ItemTemplate><DataTemplate><StackPanelOrientation="Vertical"Margin="3"><ImageSource="{Binding ImagePath}"Stretch="Uniform"></Image><TextBlockText="{Binding ImageName}"HorizontalAlignment="Center"VerticalAlignment="Bottom"></TextBlock></StackPanel></DataTemplate></ItemsControl.ItemTemplate></ItemsControl></ScrollViewer>
其中ItemsSource內容用於繫結資料來源 ，在ViewModel層進行構造 ，如下所示：
public classMainWindowViewModel{public ObservableCollection<ImageItem> ImageItems { get; set; }publicMainWindowViewModel() { ImageItems = new ObservableCollection<ImageItem>();for(int i = 0; i < 8; i++) {for(int j = 0; j < 5; j++) {var imageName = $"{i+1}.{j+1}.jpg";var imagePath = Path.Combine(Environment.CurrentDirectory, "imgs", imageName); ImageItems.Add(new ImageItem(){ImageName = imageName,ImagePath = imagePath}); } } }}
執行範例如下所示：
以上就是【淺談WPF之UniformGrid和ItemsControl】的全部內容 ，關於更多詳細內容，可參考官方文件。 希望能夠一起學習，共同進步。
學習編程，從關註【老碼識途】開始，為大家分享更多文章！！！
