概述

? ? ??在Winform中從后臺添加控件相對比較容易，但是在WPF中，我們知道界面是通過XAML編寫的，如何把后臺寫好的控件動態添加到前臺呢？本節舉例介紹這個問題。

? ? ?? 這里要用到UniformGrid布局，UniformGrid 是一種橫向的網格分割、縱向的網格分割分別是均等的分割的布局類型.

項目介紹

? ? ??-. 這里界面添加一個ComboBox用來下拉選擇圖片數量；

? ? ? -. 添加一個button用來執行圖片顯示；

dispaly下方是圖片顯示區域

代碼設計

-.前臺XAML代碼：

<Grid><dxlc:LayoutControl Orientation="Vertical"><dxlc:LayoutGroup Orientation="Horizontal" View="GroupBox"><dxlc:LayoutGroup.Header><dxlc:LayoutItem Label="Action" Background="#FF004486" Foreground="White"/></dxlc:LayoutGroup.Header><dxlc:LayoutItem Label="Image Count" ><ComboBox SelectedIndex="{Binding ComSelectedIndex}"><ComboBoxItem>2</ComboBoxItem><ComboBoxItem>4</ComboBoxItem><ComboBoxItem>6</ComboBoxItem></ComboBox></dxlc:LayoutItem><dxlc:LayoutItem Width="110"><dx:SimpleButton Content="Image Dispaly" Background="LightGray" cal:Message.Attach="[Event Click]=[btnAdd_Click($source,$eventArgs)]" /></dxlc:LayoutItem></dxlc:LayoutGroup><dxlc:LayoutGroup Orientation="Horizontal" View="GroupBox"><dxlc:LayoutGroup.Header><dxlc:LayoutItem Label="Dispaly" Background="#FF004486" Foreground="White"/></dxlc:LayoutGroup.Header><UniformGrid cal:Message.Attach="[Event Loaded]=[UniformGrid_Loaded($source,$eventArgs)]" /></dxlc:LayoutGroup></dxlc:LayoutControl></Grid>

前臺代碼比較簡單，只要關注下UniformGrid控件，綁定了Loaded事件。

-.后臺代碼:

[AddINotifyPropertyChangedInterface]public class UniformGridViewModel : Screen, IViewModel{public int ComSelectedIndex { get; set; }public UniformGrid UniformGrid;public string[] ImageFullPath;public void btnAdd_Click(object sender, RoutedEventArgs e){UniformGrid.Children.Clear();UniformGrid.Columns = 2;var count = 0;switch(ComSelectedIndex){case 0:count = 2;break;case 1:count = 4; break;case 2:count = 6; break;default: break;}for (int i = 0; i < count; i++){Image image = new Image();image.Source = LoadImageFreeze(ImageFullPath[i]);image.MouseLeftButtonUp += ImageClick;image.Name = Path.GetFileNameWithoutExtension(ImageFullPath[i]);image.Margin = new Thickness(5);UniformGrid.Children.Add(image);}}public void ImageClick(object sender, MouseButtonEventArgs e){var name = (sender as Image).Name;MessageBox.Show($"當前選擇的圖片名稱：{name}");}public void UniformGrid_Loaded(object sender, RoutedEventArgs e){UniformGrid = (UniformGrid)sender;}public UniformGridViewModel(){DisplayName = "UniformGrid";string imagePath =Path.Combine( AppDomain.CurrentDomain.BaseDirectory, "Images");ImageFullPath = Directory.GetFiles(imagePath, "*.png");}public static BitmapImage LoadImageFreeze(string imagePath){try{var bitmap = new BitmapImage();if (File.Exists(imagePath)){bitmap.BeginInit();bitmap.CacheOption = BitmapCacheOption.OnLoad;using (Stream ms = new MemoryStream(File.ReadAllBytes(imagePath))){bitmap.StreamSource = ms;bitmap.EndInit();bitmap.Freeze();}}return bitmap;}catch (Exception){return null;}}}

介紹：

①LoadImageFreeze：從路徑下加載圖片并轉換為BitmapImage；

②UniformGrid_Loaded；獲取UniformGrid對象；

③ImageFullPath：從項目bin下獲取圖片文件并讀取到這個數組；

④btnAdd_Click：界面button點擊事件，這里是核心的代碼，主要就是申城圖片，然后設定好 ?UniformGrid的行列以及其他屬性后添加到控件里面， ?UniformGrid.Children.Add(image);

⑤ImageClick：點擊后顯示圖片的名稱.

運行演示

源碼

百度網盤鏈接：https://pan.baidu.com/s/1iu2MovTGDoUd_HsTnI7mAA

提取碼：6666

技術群：添加小編微信并備注進群

小編微信：mm1552923 ??

公眾號：dotNet編程大全? ??