locked
Binding a grid from URI paths stored in a database

    Question

  • Hi, I have seen a lot of similar questions but cant get the code to work. I am trying to set up a lit of grid items to show images based in my documents.

    My xaml looks like this:

    <GridView
                x:Name="itemGridView"
                AutomationProperties.AutomationId="ItemsGridView"
                AutomationProperties.Name="Items"
                TabIndex="1"
                Grid.Row="2"
                SelectionMode="None"
                IsSwipeEnabled="false"
                IsItemClickEnabled="True"
                ItemClick="ItemView_ItemClick" FontFamily="Global User Interface">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Grid HorizontalAlignment="Left" Width="250" Height="250" Background="{Binding DefaultColor}">
                            <StackPanel VerticalAlignment="Center">
                                <Border Background="White">
                                    <Image x:Name="ImageForTest" Source="{Binding source}" />
                                </Border>
                                <TextBlock Text="{Binding Name}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Margin="15,0,15,0"/>
                                <TextBlock Text="{Binding Description}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </GridView.ItemTemplate>
               
            </GridView>

    and the code behind looks like this:

    // Jobs Class
    
      class Class_Job
        {
            [SQLite.PrimaryKey, SQLite.AutoIncrement]
            public int IndexValue { get; set; }
            public string Name { get; set; }
            public string Description { get; set; }
            public DateTime Added { get; set; }
            public DateTime Modified { get; set; }
            public List<Class_Task> TaskList = new List<Class_Task>();
            public string ImagePath { get; set; }
            [SQLite.Ignore]
            public ImageSource source {get; set;}
            [SQLite.Ignore]
            public string ErrorMessage { get; set; }
            public Uri ImagePathURI
            {
                get
                {
                    return new Uri(ImagePath, UriKind.Absolute);
                }
            }
    
            public async void LoadImageValue()
            {
                // Ensure the stream is disposed once the image is loaded
                try
                {  
                    System.Uri path = new System.Uri(ImagePath, UriKind.Absolute);
                 
                 
    				// Set the image source to the selected bitmap
    				BitmapImage bitmapImage = new BitmapImage();
    				bitmapImage.DecodePixelHeight = 100;
    				bitmapImage.DecodePixelWidth = 100;
    
    				bitmapImage.UriSource = path;
    				source = bitmapImage;
                }
                catch (Exception ex)
                {
                    this.ErrorMessage = ex.Message;
                }
    
            }
            public string DefaultColour { get; set; }
    
          
    
    
        }
    
    // Binding
              //If there are jobs in the system, load them.
                            List<Models.Class_Job> jobs = db.Table<BEJobManagement.Models.Class_Job>().ToList();
                            if (jobs != null)
                            {
                                foreach (BEJobManagement.Models.Class_Job jobIt in jobs)
                                {
                                    jobIt.LoadImageValue();
                                }
                                this.DefaultViewModel["Items"] = jobs;
                            }
    
    
                            itemGridView.ItemsSource = jobs;

    The issue is that I cant work out how to debug where this is going wrong. It has to be an issue with my binding or permissions, can you see the final markup result (ie, while running) at all? And where have I gone wrong?

    I have also tried binding the image via Source=PropertyName, Source=BitmapImageProperty, Path= both a Propertyname and a bitmap image source,

    Tuesday, February 10, 2015 3:29 AM

Answers

  • This is tricky - you need a reference to the actual Image tag that you're setting, and then you need to set the Image's source in code-behind rather than XAML.  This is because the Source property in XAML is a string, while in code it's a BitmapImage.  

    I think that you should get a reference to every Image as it's loaded using the Loaded event.  After the Binding is finished, go back to every Image and assign it's source using the index of the source in combination with the index of the Image as it's loaded.

    It's hacky but works fine.  Not the first time I've seen this.  See this video blog:
    http://channel9.msdn.com/Series/Windows-Store-Developer-Solutions/Playing-Hide-and-Go-Seek-with-DataTemplated-Controls


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Thursday, February 12, 2015 4:43 PM
    Moderator

All replies

  • The binding for Source inside Image needs to be a string which points to a path inside the app's folder.  Right now you are binding it to an ImageSource.  You would be better off listening for the Loaded event and setting the image's source at that time. 

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Tuesday, February 10, 2015 1:07 PM
    Moderator
  • Thanks Matt, sorry about the delay, I have added a converter on the binding of the grid and I'm getting correctly loaded images to the object (not sure if this is what you mean by listening??). It looks like when I put a break point here, the images load correctly, but not to the screen. This means that I must be missing an await on the image load or something, or have my load routine in the wrong place, Im guessing?

    Steven Ritter Tatts Group - Senior Developer


    • Edited by Eltial Thursday, February 12, 2015 4:57 AM
    Thursday, February 12, 2015 12:20 AM
  • This is tricky - you need a reference to the actual Image tag that you're setting, and then you need to set the Image's source in code-behind rather than XAML.  This is because the Source property in XAML is a string, while in code it's a BitmapImage.  

    I think that you should get a reference to every Image as it's loaded using the Loaded event.  After the Binding is finished, go back to every Image and assign it's source using the index of the source in combination with the index of the Image as it's loaded.

    It's hacky but works fine.  Not the first time I've seen this.  See this video blog:
    http://channel9.msdn.com/Series/Windows-Store-Developer-Solutions/Playing-Hide-and-Go-Seek-with-DataTemplated-Controls


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Thursday, February 12, 2015 4:43 PM
    Moderator