C# WPF後臺動態添加控件實戰教程

Posted on by

概述

在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：點擊後顯示圖片的名稱.

源碼

點擊這裡下載

總結

到此這篇關於C# WPF後臺動態添加控件的文章就介紹到這瞭,更多相關C# WPF後臺動態加控件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：