locked
images inside listview/gridview column RRS feed

  • Question

  • i have the following XAML page which is a template and should be displayed along with the corresponding data onto Window1.xaml . i have been able to do this successfully , now i want another column(a 4th column) in this gridview which should display images . please tell me how to do this.

    <Page
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Page1"
        >   
            <Grid Name="Grid1" >
            <ListView  Height="300" Name="listView1" Width="450">
                <ListView.View>
                    <GridView x:Name="GridView1" >
                        <GridViewColumn x:Name="FlightNumber" Width="150" 

    DisplayMemberBinding="{Binding Path=flightnum}"/>

                        <GridViewColumn x:Name="Destination" Width="150" 

    DisplayMemberBinding="{Binding Path=destination}"/>
                        <GridViewColumn x:Name="Status" Width="150" DisplayMemberBinding="{Binding

    Path=status}"/>
                    </GridView>
                </ListView.View>
            </ListView>

        </Grid>
           
    </Page>
    Tuesday, May 12, 2009 6:26 AM

Answers

  • hi

    this time i am pasting the whole code


    <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Page1" >
        <Page.Resources>
            <DataTemplate x:Key="myCellTemplateImage">
                <Grid>
                    <Image Source="urloftheimage"></Image>
                </Grid>
            </DataTemplate>
        </Page.Resources>
        <Grid Name="Grid1" >
            <ListView  Height="300" Name="listView1" Width="450">
                <ListView.View>
                    <GridView x:Name="GridView1" >
                        <GridViewColumn x:Name="FlightNumber" Width="150" DisplayMemberBinding="{Binding Path=flightnum}"/>
                        <GridViewColumn x:Name="Destination" Width="150" DisplayMemberBinding="{Binding Path=destination}"/>
                        <GridViewColumn x:Name="Status" Width="150" DisplayMemberBinding="{Binding Path=status}"/>
                        <GridViewColumn x:Name="Image" Header="ImageName" CellTemplate="{StaticResource myCellTemplateImage}"/>
                    </GridView>
                </ListView.View>
            </ListView>
        </Grid>
    </Page>

    Developer
    • Proposed as answer by Tarun Jindal Tuesday, May 12, 2009 7:12 AM
    • Marked as answer by Tao Liang Friday, May 15, 2009 6:10 AM
    Tuesday, May 12, 2009 7:11 AM
  • hi

    1. Instead of page1.xaml resources you should have put it to app.xaml resources

     

     

     

    <Application.Resources> 
    
    </Application.Resources>
    
    

    2. Since now its under Application resources you should beb able to use FindResource and FindName methods.(the steps i mentioned in my other post)
     
    3. for displaying different image you have to use the binding property for the Source.


    Developer
    • Marked as answer by Tao Liang Friday, May 15, 2009 6:10 AM
    Wednesday, May 13, 2009 4:47 AM
  • like i said i already mentioned the steps in my previous post

    Image ImageObj = (Image)yourtemplatename.Template.FindName("yourImageName", yourtemplatename);

     ImageObj.Source = yourSource;

    here yourtemplatename would be template in your case


    Developer
    • Marked as answer by Tao Liang Friday, May 15, 2009 6:10 AM
    Wednesday, May 13, 2009 5:31 AM

All replies

  • hi

    this time i am pasting the whole code


    <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Page1" >
        <Page.Resources>
            <DataTemplate x:Key="myCellTemplateImage">
                <Grid>
                    <Image Source="urloftheimage"></Image>
                </Grid>
            </DataTemplate>
        </Page.Resources>
        <Grid Name="Grid1" >
            <ListView  Height="300" Name="listView1" Width="450">
                <ListView.View>
                    <GridView x:Name="GridView1" >
                        <GridViewColumn x:Name="FlightNumber" Width="150" DisplayMemberBinding="{Binding Path=flightnum}"/>
                        <GridViewColumn x:Name="Destination" Width="150" DisplayMemberBinding="{Binding Path=destination}"/>
                        <GridViewColumn x:Name="Status" Width="150" DisplayMemberBinding="{Binding Path=status}"/>
                        <GridViewColumn x:Name="Image" Header="ImageName" CellTemplate="{StaticResource myCellTemplateImage}"/>
                    </GridView>
                </ListView.View>
            </ListView>
        </Grid>
    </Page>

    Developer
    • Proposed as answer by Tarun Jindal Tuesday, May 12, 2009 7:12 AM
    • Marked as answer by Tao Liang Friday, May 15, 2009 6:10 AM
    Tuesday, May 12, 2009 7:11 AM
  • ok this helped me to display this pic along with other data
    Page.Resources>
    <DataTemplate x:Key="myCellTemplateImage">
    <Grid>
    <Image Source="urloftheimage"></Image>
    </Grid>
    </DataTemplate>
    </Page.Resources>


    1. i want to know if adding pictures can be done without including this in page1.xaml , like i said this is only my template and i dont want nything other than the gridview/listview . is this possible ??



     2. i want to control its properties from the code  like setting the source, width,height etc . i am trying to do it using the
    findname and findresources methods ..but not working for now . any suggestions ?

     
    and also what should i do..what modification should be done in the above code so that i can display a different image in each row the grid .

    • Edited by cruxdude Tuesday, May 12, 2009 10:33 AM
    Tuesday, May 12, 2009 9:03 AM
  • cannot use the findresource as this is a part of the page and not the window .


     DependencyObject rootElement = (DependencyObject)XamlReader.Load(streamrdr.BaseStream);
                    tempView = (System.Windows.Controls.ListView)LogicalTreeHelper.FindLogicalNode(rootElement, "listView1");               
                    FrameworkElement el = (FrameworkElement)rootElement;
                   
                    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";
                    //GridViewColumn gvch1 = (GridViewColumn)el.FindName("FlightNumber");
                    //DataTemplate temp = (DataTemplate)el.FindResource();
                   
                    //Image img = (Image)el.FindResource(temp);
    • Proposed as answer by Tao Liang Tuesday, May 12, 2009 9:19 AM
    • Unproposed as answer by Tao Liang Wednesday, May 13, 2009 2:28 AM
    Tuesday, May 12, 2009 9:15 AM
  • hi

    1. Instead of page1.xaml resources you should have put it to app.xaml resources

     

     

     

    <Application.Resources> 
    
    </Application.Resources>
    
    

    2. Since now its under Application resources you should beb able to use FindResource and FindName methods.(the steps i mentioned in my other post)
     
    3. for displaying different image you have to use the binding property for the Source.


    Developer
    • Marked as answer by Tao Liang Friday, May 15, 2009 6:10 AM
    Wednesday, May 13, 2009 4:47 AM
  • hi

    1. Instead of page1.xaml resources you should have put it to app.xaml resources

     

     

     

    <Application.Resources> 
    
    </Application.Resources>
    
    
    

    2. Since now its under Application resources you should beb able to use FindResource and FindName methods.(the steps i mentioned in my other post)
     
    3. for displaying different image you have to use the binding property for the Source.


    Developer
    Wednesday, May 13, 2009 4:48 AM
  • <Page
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Page1"
        Name="Page1"
        >
    <Page.Resources>
            <DataTemplate DataType="Image"  x:Key="DataTemplate1">
                <Grid x:Name="ImageGrid">
                    <Image x:Name="first" Source="C:\Users\Public\Pictures\Sample Pictures\Autumn

    Leaves.jpg" Width="40" Height="40"></Image>
                </Grid>
            </DataTemplate>
        </Page.Resources>

        <Grid Name="Grid1" >
            <ListView  Height="300" Name="listView1" Width="450">
                <ListView.View>
                    <GridView x:Name="GridView1" >
                        <GridViewColumn x:Name="FlightNumber" Width="150" 

    DisplayMemberBinding="{Binding Path=flightnum}"/>

                        <GridViewColumn x:Name="Destination" Width="150" 

    DisplayMemberBinding="{Binding Path=destination}"/>
                        <GridViewColumn x:Name="Status" Width="150" DisplayMemberBinding="{Binding

    Path=status}"/>
                         
                           <GridViewColumn x:Name="Image" Header="ImageName"

    CellTemplate="{StaticResource DataTemplate1}"/>

                           
                    </GridView>
                </ListView.View>
            </ListView>

        </Grid>

    for this i am able to access the datatemplate1 using the below code , i want to be able to go further into it - to the <image> which is given inside this datatemplate , any ideas for that ?(without putting it inside the app.xaml)

    streamrdr = new StreamReader("D:\\nikhil\\page1.xaml");
                    DependencyObject rootElement = (DependencyObject)XamlReader.Load(streamrdr.BaseStream);
                    tempView = (System.Windows.Controls.ListView)LogicalTreeHelper.FindLogicalNode(rootElement, "listView1");
                    FrameworkElement el = (FrameworkElement)rootElement;

    //Page pg = (Page)el.FindName("Page1");
            
                    DataTemplate template = (DataTemplate)el.TryFindResource("DataTemplate1");
    Wednesday, May 13, 2009 5:20 AM
  • like i said i already mentioned the steps in my previous post

    Image ImageObj = (Image)yourtemplatename.Template.FindName("yourImageName", yourtemplatename);

     ImageObj.Source = yourSource;

    here yourtemplatename would be template in your case


    Developer
    • Marked as answer by Tao Liang Friday, May 15, 2009 6:10 AM
    Wednesday, May 13, 2009 5:31 AM