locked
show text and images whit sqlite and XML in grid RRS feed

  • Question

  • hello people, i have this problem:

    In my app windows store c# I have a gridview. I use to show text Sqlite and show images XML file.

    this is the code:

      List<Escola> Mylist3 = new List<Escola>();
                    
                    Mylist3 = db.Query<Escola>("Select * from Escola ");
                   
                    foreach (Escola Item in Mylist3)
                    {
                        //show in gridview 
                        this.GridEscolas.ItemsSource = Mylist3;
                    }

    XDocument xmlDoc = XDocument.Load("Assets/data.xml"); IEnumerable<ShowImage> images = from item in xmlDoc.Descendants("image") select new ShowImage(item.Element("imageUrl").Value); GridEscolas.ItemsSource = images;

    and in my XAML:

    <GridView Name="GridEscolas" 
                      IsRightTapEnabled="False"  
                      ItemsSource="{Binding}" 
                      AllowDrop="True"  
                      TabIndex="1"
                      ItemClick="Event_Page"
                      IsItemClickEnabled="True" 
                      Padding="116,136,116,46"
                      Grid.RowSpan="2"
                      SelectionMode="None"
                      IsSwipeEnabled="false"
                      AutomationProperties.AutomationId="ItemsGridView"
                      AutomationProperties.Name="Items"
                      VerticalAlignment="Center" 
                      
                      >
                <GridView.ItemTemplate>
    
                    <DataTemplate>
                        <Grid HorizontalAlignment="Left" Height="330" Width="330" VerticalAlignment="Top" Background="DarkGray" Margin="10">
                            <Image Margin="0" Source="{Binding imageUrl}" Stretch="Fill" Width="150" Height="150" x:Name="imagegrid" />
                            <Grid HorizontalAlignment="Left" Height="70" VerticalAlignment="Bottom" Width="330" Background="#E5231F20" >
                                <TextBlock HorizontalAlignment="Left" Foreground="White" TextWrapping="Wrap" Text="{Binding NomeEscola}" VerticalAlignment="Center" FontWeight="Bold" FontSize="18" Tag="{Binding procedureName}" Margin="0,0,0,0"  FontFamily="Verdana"/>
                            </Grid>
                        </Grid>
                    </DataTemplate>
    
                </GridView.ItemTemplate>
            </GridView>

    but the problem is just show the text or show the image, because this code 

     this.GridEscolas.ItemsSource = Mylist3;

    and this

     GridEscolas.ItemsSource = images;

    how to show then?

    thanks


    Friday, October 11, 2013 12:25 AM

Answers

  • We can use DataTemplate to show both text and image. Check out the example at the end of this link. 

    Thanks, Sachin



    Friday, October 11, 2013 1:54 AM
  • Hello Aurelien,

    Try to get all text (from your sqlite table) & images in one collection List. Than bind to gridview. Like that: 

    create one class :

    //create one class both field (sqlite database & image)
    public class temp
    {
    public string string1 {get; set; }
    public BitmapImage image1 {get; set;}
    }
    
    //create collection list
    ObservableCollection<temp> tem = new ObservableCollection<temp>();
    
    //get data from table
    //where tem is your dataset which come from execute query
    //one field name of your table is text1
    foreach(var a in tem) 
    {
    tem.Add(new temp { string1 = a.text1, 
    image1 = new BItmapImage(new Uri("your image path if only one image shows in view"))
    });
    this.GridEscols.Itemssource = tem;
    }
    
    //in your design image binding use Source="{Binding image1}"

    Friday, October 11, 2013 5:20 AM

All replies

  • We can use DataTemplate to show both text and image. Check out the example at the end of this link. 

    Thanks, Sachin



    Friday, October 11, 2013 1:54 AM
  • Hello Aurelien,

    Try to get all text (from your sqlite table) & images in one collection List. Than bind to gridview. Like that: 

    create one class :

    //create one class both field (sqlite database & image)
    public class temp
    {
    public string string1 {get; set; }
    public BitmapImage image1 {get; set;}
    }
    
    //create collection list
    ObservableCollection<temp> tem = new ObservableCollection<temp>();
    
    //get data from table
    //where tem is your dataset which come from execute query
    //one field name of your table is text1
    foreach(var a in tem) 
    {
    tem.Add(new temp { string1 = a.text1, 
    image1 = new BItmapImage(new Uri("your image path if only one image shows in view"))
    });
    this.GridEscols.Itemssource = tem;
    }
    
    //in your design image binding use Source="{Binding image1}"

    Friday, October 11, 2013 5:20 AM