Datagrid image TemplateColumn source binding wpf

Question

i'm using a Datagrid to display users information, every thing is working fine for text columns ,except the column I want to display user image, here is the Datagrid in xaml

 <DataGrid Name="UserListDataGrid" Margin="10,50,10,10"  
                                                  AutoGenerateColumns="False" 
                                                  EnableRowVirtualization="False"  
                                                  ItemsSource="{Binding convUsrList}"
                                                  CellStyle="{StaticResource Body_Content_DataGrid_Centering}"
                                                  RowDetailsVisibilityMode="VisibleWhenSelected" 
                                                  CanUserSortColumns="False" 
                                                  CanUserAddRows="False" 
                                                  CanUserResizeRows="False" 
                                                  CanUserReorderColumns="False"
                                                  IsReadOnly="True" 
                                                  Width="900"
                                                  Opacity="0"
                                                  Foreground="Black" 
                                                  GridLinesVisibility="None"
                                                  HeadersVisibility="All"
                                                  HorizontalContentAlignment="Center"  
                                                  Background="Gray" 
                                                  BorderBrush="Transparent"
                                                  ScrollViewer.HorizontalScrollBarVisibility="Auto" >
                                            <DataGrid.Columns>
                                                                                                  <DataGridTemplateColumn  >
                                                    <DataGridTemplateColumn.CellTemplate >
                                                        <DataTemplate>
                                                            <Image Source="{Binding PhotoSource}" Width="60" Height="60" />
                                                        </DataTemplate>
                                                    </DataGridTemplateColumn.CellTemplate>
                                                    <DataGridTemplateColumn.HeaderTemplate>
                                                        <DataTemplate>
                                                            <TextBlock Text="{Binding DataContext[10],RelativeSource={RelativeSource AncestorType=DataGrid}}" Width="60"/>
                                                        </DataTemplate>
                                                    </DataGridTemplateColumn.HeaderTemplate>
                                                </DataGridTemplateColumn>



                                                <DataGridTextColumn   Binding="{Binding FirstName}"  >
                                                    <DataGridTextColumn.HeaderTemplate>
                                                        <DataTemplate>
                                                            <TextBlock Text="{Binding DataContext[4],RelativeSource={RelativeSource AncestorType=DataGrid}}" Width="60"/>
                                                        </DataTemplate>
                                                    </DataGridTextColumn.HeaderTemplate>
                                                </DataGridTextColumn>....

I get the user photo from my DB in base64 string format, convert to BitmapImage using this function

 public static BitmapImage getImage(string image)
    {
        byte[] b = Convert.FromBase64String(image);
        MemoryStream mst = new MemoryStream(b, 0, b.Length);
        BitmapImage bmp = new BitmapImage();
        bmp.BeginInit();
        bmp.CacheOption = BitmapCacheOption.OnLoad;
        bmp.StreamSource = mst;
        bmp.EndInit();
        return bmp;
    }

and finally create a list of user (which is a class presenting user information such as firstname (string) //lastname(string)// ...//PhotoSource (BitmapImage) ) and feed it to data grid as follows

 UserListDataGrid.ItemsSource = convUsrList;

as I said everything is showing on the Datagrid except user image would you please help me ?

this is the user class:

public class User
    {
        public int Id { get; set; }
        public string UserName { get; set; }
        public string Password { get; set; }
        public bool IsActive { get; set; }
        public int UserTypeId { get; set; }
        public int ShopId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string PhoneNumber { get; set; }
        public string CellNumber { get; set; }
        public string Address { get; set; }
        public string Email { get; set; }
        public bool Gender { get; set; }
        public string Photo { get; set; }
        public string SecurityAnswer { get; set; }
        public int SecurityQuestionId { get; set; }
        public long LastSecurityCheck { get; set; }
        public DateTime? DeletedAt { get; set; }
        public DateTime? ExpireDate { get; set; }
    }
    public class UserDatagrid:User
    {
        public BitmapImage PhotoSource;
    }

and here is how convUsrList is declared:

public void loadUserTable()
    {
        UserManagement um = new UserManagement(db);
        List<User> userlist = um.getUserlist(um.GetUsers());

        if (db.IsRTL)
            UserListDataGrid.FlowDirection = FlowDirection.RightToLeft;
        else
            UserListDataGrid.FlowDirection = FlowDirection.LeftToRight;
        string s = "";
        dataBase.AppNotifyDic.TryGetValue("userTbl", out s);
        string[] contbl = s.Split('-');
        UserListDataGrid.DataContext = new List<string>() { contbl[0], contbl[1], contbl[2], contbl[3], contbl[4], contbl[5], contbl[6], contbl[7], contbl[8], contbl[9], contbl[10], contbl[11], contbl[12], contbl[13], contbl[14], contbl[15], contbl[16] };
        List<UserDatagrid> convUsrList = new List<UserDatagrid>();
        for (int i=0;i<userlist.Count;i++)
        {
            convUsrList.Add(tools.convertUserForDataGrid(userlist[i]));
        }
        UserListDataGrid.ItemsSource = convUsrList;

    }

and the convertUserForDataGrid is as follow:

 public static UserDatagrid convertUserForDataGrid(User origUser)
    {
        UserDatagrid convUser = new UserDatagrid();

        convUser.Id = origUser.Id;
        convUser.UserName = origUser.UserName;
        convUser.Password = origUser.Password;
        convUser.IsActive = origUser.IsActive;
        convUser.UserTypeId = origUser.UserTypeId;
        convUser.ShopId = origUser.ShopId;
        convUser.FirstName = origUser.FirstName;
        convUser.LastName = origUser.LastName;
        convUser.PhoneNumber = origUser.PhoneNumber;
        convUser.CellNumber = origUser.CellNumber;
        convUser.Address = origUser.Address;
        convUser.Email = origUser.Email;
        convUser.Gender = origUser.Gender;
        convUser.Photo = origUser.Photo;
        convUser.SecurityAnswer = origUser.SecurityAnswer;
        convUser.SecurityQuestionId = origUser.SecurityQuestionId;
        convUser.LastSecurityCheck = origUser.LastSecurityCheck;
        convUser.DeletedAt = origUser.DeletedAt;
        convUser.ExpireDate = origUser.ExpireDate;
        convUser.PhotoSource = (string.IsNullOrEmpty(origUser.Photo)) ? (convUser.Gender)? setImagesource("male.png"): setImagesource("Female.png") : getImage(origUser.Photo);
         return convUser;
    }

Answer 1

Because binding system uses Reflection to find the

Property in DataContext(i.e your VM)

Hope this will help.

credits:link1