none
WPF ListView-GridView : bind image RRS feed

  • Question

  • I'm working on a desktop WPF app (.net 4). One of its window contains a tabControl whose tabitems contain each aListview, whose view is a GridView. TabItems, ListViews and GridViews are all dynamically generated. When the user hits a button on each tabitem, the ListView view is updated with a DataTable defaultview from SQL Server (of course, the selected rows depend on user's request, but that's irrelevant here).

    Everything is working just fine, with the (shortened) code below for the GridView (gv) generated dynamically :

    foreach (KeyValuePair<string, string> Column in Columns)
    {
        GridViewColumn gvc = new GridViewColumn();
        gvc.DisplayMemberBinding = new Binding(Column.Key);
        gv.Columns.Add(gvc);
    }

    As you can see, I created a Dictionary with column names matching the columns of the DataTable received from SQL Server (I use the Column.Value for special use, also irrelevant here).

    My question is "simple" :

    One of the column contains a value which I would like to show as a logo ; plainly, the SQL server column contains strings (let's say, "a" or "b") and I have images named "a.png" and "b.png" (which I can display dynamically, like testimage.Source = new BitmapImage(new Uri("../../images/a.png", UriKind.Relative))).

    So, how could I, in c#, replace the "a" and "b" letters in my ListView column by "a.png" and "b.png" ?

    I hope I'm clear and already thank every people who will take on their time to read and try to answer my question.

    Friday, June 14, 2013 10:28 AM

Answers

  • Ok, I got it, thx to Magnus and Edward on StackOverflow who pointed me in the right direction :

    GridViewColumn gvc = new GridViewColumn(); Binding binding = new Binding(Column.Key); if (Column.Key == "Aut") { DataTemplate dtt = new DataTemplate(typeof(BitmapImage)); FrameworkElementFactory img = new FrameworkElementFactory(typeof(System.Windows.Controls.Image)); Binding Sourcebinding = new Binding(); Sourcebinding.Path = new PropertyPath("Source"); binding.Converter = new ImageConverter(); img.SetBinding(System.Windows.Controls.Image.SourceProperty, Sourcebinding); img.SetValue(System.Windows.Controls.Image.SourceProperty,binding);

    dtt.VisualTree = img; gvc.CellTemplate = dtt; } else { gvc.DisplayMemberBinding = binding; }

    Thx again,

    Luke


    • Marked as answer by Luc Wanlin Friday, June 14, 2013 12:39 PM
    • Edited by Luc Wanlin Friday, June 14, 2013 12:48 PM
    Friday, June 14, 2013 12:39 PM

All replies

  • You could use a CellTemplate and a converter:

    <Window.Resources>
    <local:ImageConverter x:Key="imageConverter"/>
        <DataTemplate x:Key="imageDataTemplate">
          <Image Source="{Binding logo, Converter={StaticResource imageConverter}}"/>
        </DataTemplate>
    </Window.Resources>
    public class ImageConverter : IValueConverter
      {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
          try {
            System.Windows.Media.Imaging.BitmapImage img = new System.Windows.Media.Imaging.BitmapImage();
            img.BeginInit();
            img.UriSource = new Uri(value.ToString() + ".png", UriKind.Relative);
            img.EndInit();
            return img;
          }
          catch (Exception ex) {
            return System.Windows.DependencyProperty.UnsetValue;
          }
        }
        public object ConvertBack(object value, Type targetType,
                                  object parameter, CultureInfo culture) {
          throw new NotImplementedException();
        }
      }
          foreach (KeyValuePair<string, string> Column in Columns) {
            GridViewColumn gvc = new GridViewColumn();
            if (Column.Key.Equals("logo")) {
              gvc.CellTemplate = FindResource("imageDataTemplate") as DataTemplate;
            }
            else {
              gvc.DisplayMemberBinding = new Binding(Column.Key);
            }
            gv.Columns.Add(gvc);
          } 

    Friday, June 14, 2013 11:12 AM
  • Thanks for your answer,

    however, there's a detail I should have insisted upon : everything (I suppose) must be done in c# because the gvc generation is in another projet (a dll) not in the main window in which I could add resources. So if I try your solution, I have a "imageDataTemplate" not found error.

    I guess the solution would be to translate

    <Window.Resources>
    <local:ImageConverter x:Key="imageConverter"/>
        <DataTemplate x:Key="imageDataTemplate">
          <Image Source="{Binding logo, Converter={StaticResource imageConverter}}"/>
        </DataTemplate>
    </Window.Resources>

    in code-behind. Aside from the imageConverter writing, that was my principal problem.

    Thx again,

    Friday, June 14, 2013 12:15 PM
  • Ok, I got it, thx to Magnus and Edward on StackOverflow who pointed me in the right direction :

    GridViewColumn gvc = new GridViewColumn(); Binding binding = new Binding(Column.Key); if (Column.Key == "Aut") { DataTemplate dtt = new DataTemplate(typeof(BitmapImage)); FrameworkElementFactory img = new FrameworkElementFactory(typeof(System.Windows.Controls.Image)); Binding Sourcebinding = new Binding(); Sourcebinding.Path = new PropertyPath("Source"); binding.Converter = new ImageConverter(); img.SetBinding(System.Windows.Controls.Image.SourceProperty, Sourcebinding); img.SetValue(System.Windows.Controls.Image.SourceProperty,binding);

    dtt.VisualTree = img; gvc.CellTemplate = dtt; } else { gvc.DisplayMemberBinding = binding; }

    Thx again,

    Luke


    • Marked as answer by Luc Wanlin Friday, June 14, 2013 12:39 PM
    • Edited by Luc Wanlin Friday, June 14, 2013 12:48 PM
    Friday, June 14, 2013 12:39 PM
  • Hi Luke,

    Thanks for your sharing. This is helpful for other developers in the forum who have interests in this problem.

    Have a nice day!


    Lisa Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, June 17, 2013 5:47 AM
    Moderator