C# WPF後台動態添加控制項(經典)

2022 年 5 月 15 日
筆記
c#, WPF

概述

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

源碼

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

提取碼：6666

技術群：添加小編微信並備註進群
小編微信：mm1552923 公眾號：dotNet編程大全

Tags: c# WPF