none
Images in GridView Column + DataTemplate

    Question


  •                 DataTemplate template = new DataTemplate();
                    //template.DataType = "Image";
                    FrameworkElementFactory factory = new FrameworkElementFactory(typeof(Grid));
                    template.VisualTree = factory;
                    FrameworkElementFactory childFactory = new FrameworkElementFactory(typeof(Image));
                    Binding newBinding = new Binding();
                    newBinding.Source = new Uri("C:\\Users\\Public\\Pictures\\Sample Pictures\\Creek.jpg");
                    childFactory.SetBinding(Image.SourceProperty, newBinding);               
                    childFactory.SetValue(Image.WidthProperty, 40.0);
                    childFactory.SetValue(Image.HeightProperty, 40.0);
                    factory.AppendChild(childFactory);

                    FrameworkElementFactory childfactory2 = new FrameworkElementFactory(typeof(Image));
                    Binding newBinding2 = new Binding();
                    newBinding2.Source = new Uri("C:\\Users\\Public\\Pictures\\Sample Pictures\\Autumn Leaves.jpg");
                    childfactory2.SetBinding(Image.SourceProperty, newBinding2);
                    childfactory2.SetValue(Image.WidthProperty, 40.0);
                    childfactory2.SetValue(Image.HeightProperty, 40.0);
                    factory.AppendChild(childfactory2);
                                         
                   
                    GridView gv1 = (GridView)el.FindName("GridView1");
                    gv1.Columns[0].Header = flightTable.Columns[0].ColumnName;
                    gv1.Columns[1].Header = flightTable.Columns[1].ColumnName;
                    gv1.Columns[2].Header = flightTable.Columns[2].ColumnName;
                    gv1.Columns[3].Header = "Image";
                    gv1.Columns[3].CellTemplate = template;


                    this.Content = rootElement;

    i am using the following code to create a datatemplate and then display images on the 4th column of my gridview . its working for a single image . please tell me the modifications necessary in order to display a different image for every row of a column . the basic code should remain the same i cant make any changes to this logic , just that i want different images .
    Wednesday, May 13, 2009 8:38 AM

Answers

  • First you should have a class that contains image information, at least its address.
    public class VideoGame
    {
      public string Name
      {
        get;
        set;
      }
    
      public string Image
      {
        get;
        set;
      }
    }
    Second, add some instances into one ObservableCollection.
    public partial class Window1 : Window
    {
      private ObservableCollection<VideoGame> _games =
        new ObservableCollection<VideoGame>();
    
      public ObservableCollection<VideoGame> Games
      {
        get { return _games; }
      }
    
      public Window1()
      {
        _games.Add(new VideoGame() {
          Name = "Crysis",
          Image = @"C:\Crysis_Boxart_Final.jpg" });
        _games.Add(new VideoGame() {
          Name = "Unreal Tournament 3",
          Image = @"C:\Gearsofwar.JPG" });
        _games.Add(new VideoGame() {
          Name = "Gears of War",
          Image = @"C:\Crysis_Boxart_Final.jpg" });
    
        InitializeComponent();
      }
    }
    Third, set the DataTemplate of GridViewColumn.CellTemplate.
    <Window x:Class="VerticalAlignSnippet.Window1"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Title="Window1" Height="512" Width="512" Name="myWindow">
      <Grid>
        <ListView Name="myListView"
                 ItemsSource="{Binding ElementName=myWindow, Path=Games}">
          <ListView.View>
            <GridView>
              <GridViewColumn Header="Title" DisplayMemberBinding="{Binding Name}" />
              <GridViewColumn Header="Image">
                <GridViewColumn.CellTemplate>
                  <DataTemplate>
                    <Grid>
                      <Image Source="{Binding Image}" />
                    </Grid>
                  </DataTemplate>
                </GridViewColumn.CellTemplate>
              </GridViewColumn>
            </GridView>
          </ListView.View>
        </ListView>
      </Grid>
    </Window>
    This approach is done in XAML. You can make use of XamlReader to load this DataTemplate in the code behind.
              string str = "<DataTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\"><Grid><Image Source=\"{x:Null}\" /></Grid></DataTemplate>";
                
    
                DataTemplate template = new DataTemplate();
    
                template = XamlReader.Parse(str) as DataTemplate;
                .....
                gv1.Columns[3].CellTemplate = template;




    • Proposed as answer by Tao Liang Monday, May 18, 2009 7:34 AM
    • Marked as answer by Tao Liang Tuesday, May 19, 2009 1:55 AM
    Monday, May 18, 2009 7:34 AM