locked
Silverlight 4: image in datatemplate not appearing on design surface RRS feed

  • Question

  • I'm trying to bind an image's source to a string in a listbox with a data template.

    When I run the application, I see the image in the browser, but I cannot see it on the design surface.

    Any ideas?

    I have created a sample user control with a 3-row grid. In row 0 i just put the image In row 1 i put the image into a listbox item In row 2 I put the image into a datatemplate in a listbox bound to a resource

    On the design surface, I can see the image in rows 0 and 1, but not in row 2.

    public class PersonCollection : List<Person>
    {
    }

    public class Person
    {
    public string Name { get; set; }
    public string PictureURL { get; set; }
    }
    <Grid x:Name="LayoutRoot" Background="White">
    <Grid.Resources>
    <mystuff:PersonCollection x:Key="PersonList">
    <mystuff:Person Name="Rick" PictureURL="abc.jpg"/>
    <mystuff:Person Name="Bob" PictureURL="abc.jpg"/>
    </mystuff:PersonCollection>
    </Grid.Resources>
    <Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition/>
    <RowDefinition/>
    </Grid.RowDefinitions>
    <Image Source="abc.jpg"/>
    <ListBox Grid.Row="1">
    <ListBoxItem>
    <StackPanel Orientation="Horizontal">
    <Image Source="abc.jpg"/>
    </StackPanel>
    </ListBoxItem>
    </ListBox>
    <ListBox Grid.Row="2" ItemsSource="{StaticResource PersonList}">
    <ListBox.ItemTemplate>
    <DataTemplate>
    <Image Source="{Binding PictureURL}"/>
    </DataTemplate>
    </ListBox.ItemTemplate>
    </ListBox>
    </Grid>
    Monday, June 13, 2011 12:32 PM

Answers

  • Hi,

    You need to set the correct type of the PictureURL. It should be like this:

     

        public class Person
        {
            public string Name { get; set; }

            public ImageSource PictureURL { get; set; }
        }

    Tuesday, June 14, 2011 10:55 PM

All replies

  • You need some data in the listbox for the datatemplate to be applied to. Is 'PersonList' correct?

    Ok. I copied your code into a new SL4 project and it works for me. I dropped the classes into the MainPage.xaml.cs

    public class PersonCollection : List<Person>
    public class Person

    Added a xmlsn:mystuff reference to the local project... Works in Blend.

    Ok VS2010 designer you need to add a design-time data context like:

    d:DataContext="{d:DesignData ...}" - I normally have design-time data in a separate file.

     

    Monday, June 13, 2011 12:42 PM
  • Hi,

    There is data in the listbox, there is a PersonCollection defined with a key of PersonList in Grid.Resources, and the listbox is bound to it ( ItemsSource={StaticResource PersonList} )

    Any other ideas?

    Thanks

    Rick

    Monday, June 13, 2011 12:48 PM
  • It works in the browser, but not in the design surface - the IDE doesnt show the image

    Any ideas?


    Thanks,

    Rick

    Monday, June 13, 2011 12:59 PM
  • I'm not in blend, I'm using Visual Web Developer 2010 sp1 - the VS IDE.

     

    Sorry that I wasnt clear about that.

    Monday, June 13, 2011 4:34 PM
  • Hi,

    You need to set the correct type of the PictureURL. It should be like this:

     

        public class Person
        {
            public string Name { get; set; }

            public ImageSource PictureURL { get; set; }
        }

    Tuesday, June 14, 2011 10:55 PM
  • Thanks! That did the trick!

     

    Rick

    Friday, June 17, 2011 5:08 PM