WPF中Image控件綁定到自定義類屬性

本文轉載自查看原文 2013-08-16 21:39 3150

首先我們定義一個Student類，有ID，Name，Photo(保存圖片路徑).

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace BindingImage
{
    public class Student
    {
        public int Id { get; set; }

        public string Name { get; set; }

        public string Photo { get; set; }
    }
}

然后我們寫兩個有關數據庫操作的類，SqlHelper，StudentDAL，因為我們不希望在UI層后台的代碼中出現有關數據庫的操作，我們定義了這兩個類。

上代碼：

SqlHelper:

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Configuration;
 4 using System.Data;
 5 using System.Data.SqlClient;
 6 using System.Linq;
 7 using System.Text;
 8 using System.Threading.Tasks;
 9 
10 namespace BindingImage
11 {
12     public static  class SqlHelper
13     {
14         //讀取保存在APP.config的鏈接字符串
15         public static readonly string connstr =
16             ConfigurationManager.ConnectionStrings["connstr"].ConnectionString;
17 
18         //執行ExcuteNonQuery方法，返回受影響的行數
19         public static int ExecuteNonQuery(string sql,
20            params SqlParameter[] parameters)
21         {
22             using (SqlConnection conn = new SqlConnection(connstr))
23             {
24                 conn.Open();
25                 using (SqlCommand cmd = conn.CreateCommand())
26                 {
27                     cmd.CommandText = sql;
28                     cmd.Parameters.AddRange(parameters);
29                     return cmd.ExecuteNonQuery();
30                 }
31             }
32         }
33         //返回DataTable結果集
34         public static DataTable ExecuteDataTable(string sql,
35           params SqlParameter[] parameters)
36         {
37             using (SqlConnection conn = new SqlConnection(connstr))
38             {
39                 conn.Open();
40                 using (SqlCommand cmd = conn.CreateCommand())
41                 {
42                     cmd.CommandText = sql;
43                     cmd.Parameters.AddRange(parameters);
44 
45                     DataSet dataset = new DataSet();
46                     SqlDataAdapter adapter = new SqlDataAdapter(cmd);
47                     adapter.Fill(dataset);
48                     return dataset.Tables[0];
49                 }
50             }
51         }
52         //若數據庫中的字段值為Null
53         public static object FromDbValue(object value)
54         {
55             if (value == DBNull.Value)
56             {
57                 return null;
58             }
59             else
60             {
61                 return value;
62             }
63         }
64 
65         //若實體類重的屬性值為null
66         public static object ToDbValue(object value)
67         {
68             if (value == null)
69             {
70                 return DBNull.Value;
71             }
72             else
73             {
74                 return value;
75             }
76         }
77     }
78 
79 
80 }

StudentDAL：

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Data;
 4 using System.Data.SqlClient;
 5 using System.Linq;
 6 using System.Text;
 7 using System.Threading.Tasks;
 8 
 9 namespace BindingImage
10 {
11     public static  class StudentDAL
12     {
13 
14         public static Student GetById(int id)
15         {
16             DataTable table = SqlHelper.ExecuteDataTable("select * from  T_Student2 where Id=@Id",
17                 new SqlParameter("@Id", id));
18             if (table.Rows.Count <= 0)
19             {
20                 return null;
21             }
22             else if (table.Rows.Count > 1)
23             {
24                 throw new Exception("存在Id重復用戶！");
25             }
26             else
27             {
28                 return ToStudent(table.Rows[0]);
29             }
30         }
31 
32         public static void Update(Student st)
33         {
34             SqlHelper.ExecuteNonQuery("update T_Student2 set Name=@Name,Photo=@Photo where Id=@Id",
35                        new SqlParameter("@Name", SqlHelper.ToDbValue( st.Name)),
36                        new SqlParameter("@Photo", SqlHelper.ToDbValue( st.Photo)),                   
37                        new SqlParameter("@Id",st.Id));
38 
39         }
40 
41         private static Student ToStudent(DataRow row)
42         {
43             Student st = new Student();
44             st.Id = (int)row["Id"];
45             st.Name =(string)SqlHelper.FromDbValue(row["Name"]);
46             st.Photo = (string)SqlHelper.FromDbValue(row["Photo"]);
47             return st;
48         }
49     }
50 }

UI層:

在學生ID文本框中輸入Id，然后顯示在此界面中，我們將學生姓名學生頭像保定到相應控件元素上，XAML代碼如下

 1 <Window x:Class="BindingImage.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         xmlns:local="clr-namespace:BindingImage"
 5         Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded" WindowStartupLocation="CenterScreen">
 6     <Window.Resources>
 7         <local:Converter x:Key="con"/>
 8     </Window.Resources>
 9     <Grid Name="gridstudent">
10         <TextBox x:Name="txtId" HorizontalAlignment="Left" Height="23" Margin="66,33,0,0" TextWrapping="Wrap"  VerticalAlignment="Top" Width="120"/>
11         <TextBox x:Name="txtName" HorizontalAlignment="Left" Height="23" Margin="66,105,0,0" TextWrapping="Wrap" Text="{Binding Name}" VerticalAlignment="Top" Width="120"/>
12         <Image x:Name="imgPhoto"  Source="{Binding Photo,Converter={StaticResource con}}"  HorizontalAlignment="Left" Height="100" Margin="271,105,0,0" VerticalAlignment="Top" Width="100"/>
13         <Button Content="Save" HorizontalAlignment="Left" Margin="126,259,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>
14         <Button Content="LoadPhoto" HorizontalAlignment="Left" Margin="405,186,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
15         <Button Content="Cancel" HorizontalAlignment="Left" Margin="282,259,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_2"/>
16         <TextBlock HorizontalAlignment="Left" Margin="11,41,0,0" TextWrapping="Wrap" Text="學生ID:" VerticalAlignment="Top" RenderTransformOrigin="-0.159,1.145"/>
17         <TextBlock HorizontalAlignment="Left" Margin="15,113,0,0" TextWrapping="Wrap" Text="學生姓名:" VerticalAlignment="Top" RenderTransformOrigin="-0.159,1.145"/>
18         <TextBlock HorizontalAlignment="Left" Margin="204,113,0,0" TextWrapping="Wrap" Text="學生頭像:" VerticalAlignment="Top" RenderTransformOrigin="-0.159,1.145"/>
19         <Button Content="顯示" HorizontalAlignment="Left" Margin="204,33,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_3"/>
20     </Grid>
21 </Window>

然后做最為關鍵的一步，對數據類型的轉換，我們需要把Student類中的Photo屬性也就是圖片路徑轉換為BitmapImage類型，才能顯示在UI上。

Converter：

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using System.Threading.Tasks;
 6 using System.Windows.Data;
 7 using System.Windows.Media;
 8 using System.Windows.Media.Imaging;
 9 
10 namespace BindingImage
11 {
12     public class Converter:IValueConverter
13     {
14         public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
15         {
16             //若數據庫中字段為空,返回默認值
17             if (value == null)
18             {
19                 return new BitmapImage(new Uri(@"D:\1.jpg"));
20             }
21             return new BitmapImage(new Uri(value.ToString()));
22 
23         }
24 
25         public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
26         {
27 
28             //圖片是不能編輯的，這里就沒有必要支持反向轉換
29             throw new NotImplementedException();
30         }
31     }
32 }

剩下的是操作的一些邏輯代碼

 1 using Microsoft.Win32;
 2 using System;
 3 using System.Collections.Generic;
 4 using System.Linq;
 5 using System.Text;
 6 using System.Threading.Tasks;
 7 using System.Windows;
 8 using System.Windows.Controls;
 9 using System.Windows.Data;
10 using System.Windows.Documents;
11 using System.Windows.Input;
12 using System.Windows.Media;
13 using System.Windows.Media.Imaging;
14 using System.Windows.Navigation;
15 using System.Windows.Shapes;
16 
17 namespace BindingImage
18 {
19     /// <summary>
20     /// Interaction logic for MainWindow.xaml
21     /// </summary>
22     public partial class MainWindow : Window
23     {
24         public MainWindow()
25         {
26             InitializeComponent();
27         }
28 
29         private void Window_Loaded(object sender, RoutedEventArgs e)
30         {
31 
32         }
33         private void LoadData()
34         {
35         
36             this.gridstudent.DataContext = StudentDAL.GetById(Convert.ToInt32(txtId.Text));
37                        
38         }
39 
40         private void Button_Click(object sender, RoutedEventArgs e)
41         {
42             OpenFileDialog ofd = new OpenFileDialog();
43             ofd.Filter = "JPG圖片|*.jpg|PNGt圖片|*.png";
44             if (ofd.ShowDialog() == true)
45             {
46 
47                 string filename = ofd.FileName;
48                 imgPhoto.Source = new BitmapImage(new Uri(filename));
49                 Student student = (Student)this.gridstudent.DataContext;
50                 student.Photo = filename;
51             }
52         }
53 
54         private void Button_Click_1(object sender, RoutedEventArgs e)
55         {
56             Student student = (Student)this.gridstudent.DataContext;
57             StudentDAL.Update(student);
58             if (MessageBox.Show("保存完畢", "提示", MessageBoxButton.OKCancel) == MessageBoxResult.OK)
59             {
60 
61                 this.Close();
62             }
63         }
64 
65         private void Button_Click_2(object sender, RoutedEventArgs e)
66         {
67             this.Close();
68         }
69 
70         private void Button_Click_3(object sender, RoutedEventArgs e)
71         {
72             if (txtId.Text == "")
73             {
74                 return;
75             }
76             LoadData();
77             
78         }
79 
80     }
81 }

希望對大家對WPF中的綁定知識有所啟迪，尤其是數據轉換這方面，因為常規的一些數據轉換,.NET已經報我們做好，就是這些類似於圖片Source屬性，CheckBox控件IsChecked屬性和我們定義的類屬性的轉換等等.

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 WPF自定義控件顏色屬性綁定傳遞 wpf自定義控件綁定依賴屬性 WPF 綁定自定義控件的依賴屬性到ViewModel 如何在雙向綁定的Image控件上繪制自定義標記（wpf） WPF整理-為控件添加自定義附加屬性 WPF整理-為控件添加自定義附加屬性 wpf自定義控件之依賴屬性 wpf 自定義控件(包含依賴屬性以及事件) WPF Image控件的綁定 WPF中Image控件的Source屬性的設置