images inside listview/gridview column

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>

Answer 1

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

Answer 2

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 .

Answer 3

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);

Answer 4

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

Answer 5

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

Answer 6

<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");

Answer 7

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