none
Datagrid with images - best way to show them?

    Question

  • Hi,

    I have created a lightswitch table that contains an image property. This is a simple project I am using to learn LightSwitch.

    I created a table for Scenes in Movies, which contains a property called screenshot.

    What I am trying to do now is to create some sort of image viewer, so when I select the scene of a movie from a data grid, the image will display somewhere in the screen, instead of a thumbnail in the grid itself.

    Is this possible? I've been Googling/Binglin around but I couldn't find anything...


    MCC, MCP, MCTS
    If you find this post helpful then please "Vote as Helpful" and "Mark As Answer".
    Monday, November 14, 2011 1:24 PM

Answers

  • This is fairly easy without any other custom control.

    1) The datagrid is your query on the left. So create something like a Editable Grid screen using the picture table.

    2) Add an Image control using Add Data Item... button

    3) Drag that to screen above the datagrid.

    4) Click the grid query on the left to select it. Click the WriteCode dropdown button at top left of screen. Select SelectionChanged event. Do some code like this.

    partial void Pictures_SelectionChanged()
    {
        var pic = this.Pictures.SelectedItem;
        if (pic != null)
        {
            this.pLargeImage = pic.PictureImage;
        }
    }


    • Marked as answer by pmdci Monday, November 14, 2011 5:32 PM
    Monday, November 14, 2011 5:22 PM

All replies

  • Hi,

    I have created a lightswitch table that contains an image property. This is a simple project I am using to learn LightSwitch.

    I created a table for Scenes in Movies, which contains a property called screenshot.

    What I am trying to do now is to create some sort of image viewer, so when I select the scene of a movie from a data grid, the image will display somewhere in the screen, instead of a thumbnail in the grid itself.

    Is this possible? I've been Googling/Binglin around but I couldn't find anything...


    MCC, MCP, MCTS
    If you find this post helpful then please "Vote as Helpful" and "Mark As Answer".

    Hi, you could embed a Silverlight control which includes the Image control, and that is data-bound to the Image property of your selected item. This article of mine does not talk about images, but it gives you an idea of how you can embed a custom control and bound it to some properties:

    http://www.codeproject.com/KB/LightSwitch/LightSwitchCharts.aspx

    Try to replace the pie charts with the Image control and bind the Source property of the Image. Not sure if you need an IValueConverter at this point.


    Alessandro Del Sole
    Microsoft MVP - Visual Basic: development
    http://community.visual-basic.it/alessandro/
    Monday, November 14, 2011 1:45 PM
  • Hi Alessandro,

    Thank you for your reply.

    Is this Silverlight Toolkit some sort of essential add-in? I was under the impression that Visual Studio 2010 would come with all the required components to develop in Silverlight.

    As for your tutorial, I am trying to follow it but I have no idea how to add the correct assembly for a Silverlight Image Viewer control.

    Could yo please advise?

    Thanks!

    P.


    MCC, MCP, MCTS
    If you find this post helpful then please "Vote as Helpful" and "Mark As Answer".
    Monday, November 14, 2011 2:48 PM
  • Hi Alessandro,

    Thank you for your reply.

    Is this Silverlight Toolkit some sort of essential add-in? I was under the impression that Visual Studio 2010 would come with all the required components to develop in Silverlight.

    As for your tutorial, I am trying to follow it but I have no idea how to add the correct assembly for a Silverlight Image Viewer control.

    Could yo please advise?

    Thanks!

    P.


    MCC, MCP, MCTS
    If you find this post helpful then please "Vote as Helpful" and "Mark As Answer".


    I did not want to make you confused :-) Sorry about that. I suggested that article just as a reference to understand how to embed and bind a custom Silverlight control. In the Silverlight project for your scenario you do not need to use the Toolkit, the Image control is already available in the base runtime.

    I wrote an article about embedding a Silverlight image viewer in Italian, if you want to use translator I can pass you the link.


    Alessandro Del Sole
    Microsoft MVP - Visual Basic: development
    http://community.visual-basic.it/alessandro/
    Monday, November 14, 2011 3:28 PM
  • Io capisco Italiano :) Potete inviarmi il link per cortesia?

     

    [I understand Italian :) Can you please send me the link?]


    MCC, MCP, MCTS
    If you find this post helpful then please "Vote as Helpful" and "Mark As Answer".
    Monday, November 14, 2011 3:43 PM
  • Io capisco Italiano :) Potete inviarmi il link per cortesia?

     

    [I understand Italian :) Can you please send me the link?]


    MCC, MCP, MCTS
    If you find this post helpful then please "Vote as Helpful" and "Mark As Answer".


    Here you go: http://www.lightswitch.it/Contenuti/VediArticoli/tabid/136/ArticleId/45/Creare-ed-utilizzare-controlli-utente-personalizzati-in-applicazioni-LightSwitch.aspx

    Notice that:

    1. you need to register to our community in order to read the article (it's free :o) )
    2. the article was written based on Beta 1
    3. take it as a reference to build a custom image viewer, but use it as you would the pie chart I show in the CodeProject article.

    Any questions, feel free to ask.


    Alessandro Del Sole
    Microsoft MVP - Visual Basic: development
    http://community.visual-basic.it/alessandro/
    Monday, November 14, 2011 4:20 PM
  • Hi Alessandro,

    Thank you for the post. I registered and accessed the post. I am confused however, for what I can see this control gives some extra options to zoom in/out etc.

    What I want is to place a large row on my window, that would show the image of the selected record.

    Can I define the width and height of the image control? Also, can I place it anywhere in my form?


    MCC, MCP, MCTS
    If you find this post helpful then please "Vote as Helpful" and "Mark As Answer".
    Monday, November 14, 2011 4:37 PM
  • This is fairly easy without any other custom control.

    1) The datagrid is your query on the left. So create something like a Editable Grid screen using the picture table.

    2) Add an Image control using Add Data Item... button

    3) Drag that to screen above the datagrid.

    4) Click the grid query on the left to select it. Click the WriteCode dropdown button at top left of screen. Select SelectionChanged event. Do some code like this.

    partial void Pictures_SelectionChanged()
    {
        var pic = this.Pictures.SelectedItem;
        if (pic != null)
        {
            this.pLargeImage = pic.PictureImage;
        }
    }


    • Marked as answer by pmdci Monday, November 14, 2011 5:32 PM
    Monday, November 14, 2011 5:22 PM
  • This is fairly easy without any other custom control.

    1) The datagrid is your query on the left. So create something like a Editable Grid screen using the picture table.

    2) Add an Image control using Add Data Item... button

    3) Drag that to screen above the datagrid.

    4) Click the grid query on the left to select it. Click the WriteCode dropdown button at top left of screen. Select SelectionChanged event. Do some code like this.

     

    partial void Pictures_SelectionChanged()
    {
        var pic = this.Pictures.SelectedItem;
        if (pic != null)
        {
            this.pLargeImage = pic.PictureImage;
        }
    }


     


    Don't know why it was my understanding that some edits where needed over the visualization, that's the reason why I was suggesting a custom control. Your solution is certainly more effective and simpler. Thanks.
    Alessandro Del Sole
    Microsoft MVP - Visual Basic: development
    http://community.visual-basic.it/alessandro/
    Monday, November 14, 2011 5:30 PM
  • anyone have any problems with the preservation of DataGrid with pictures? meaning the update, and delete ... I have, for some reason there are no problems with the addition, but the application can not save changes or delete records from DataGrid ...
    the way in debug mode in Visual Studio it works fine, but after the publication on the server - to change or remove it is not possible ...

    link from me with my problem...

    http://social.msdn.microsoft.com/Forums/en-US/lightswitch/thread/a4313c0f-cfb4-471a-a543-31566ae2578a


    • Edited by ITAlex Wednesday, May 02, 2012 9:49 AM
    Wednesday, May 02, 2012 9:47 AM