Display Images in GridView/ListView using DataBinding

Display Images in GridView/ListView using DataBinding

This article shows how easy it is to display images in ItemsControl element using simple DataBinding. Answer posted to these MSDN questions (1, 2

Let's take a look at this sample code for the implementation details:

<GridView x:Name="gridView" ItemsSource="{Binding Items}">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding Txt}" />
                            <Image Source="{Binding ImageUri}" Height="60" Width="60"/>
                        </StackPanel>
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>


class GridVwItem
    {
        public Uri ImageUri { get; set; }
        public string Txt { get; set; }
    }
 
    class GridVwModel
    {
        public List<GridVwItem> Items { get; set; }
 
        public GridVwModel()
        {
             //Dummy Data
            Items = new List<GridVwItem>();
            Items.Add(new GridVwItem() { ImageUri = new Uri("ms-appdata:///local/Logo.png"), Txt="1" });
            Items.Add(new GridVwItem() { ImageUri = new Uri("ms-appdata:///local/EnterButton.png"), Txt = "2" });
            Items.Add(new GridVwItem() { ImageUri = new Uri("ms-appdata:///local/SplashScreen.png"), Txt = "3" });
        }
    }


public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            this.DataContext = new GridVwModel();
 
        }
}

Leave a Comment
  • Please add 7 and 3 and type the answer here:
  • Post
Wiki - Revision Comment List(Revision Comment)
Sort by: Published Date | Most Recent | Most Useful
Comments
  • Naomi  N edited Original. Comment: Minor edit

Page 1 of 1 (1 items)
Wikis - Comment List
Sort by: Published Date | Most Recent | Most Useful
Posting comments is temporarily disabled until 10:00am PST on Saturday, December 14th. Thank you for your patience.
Comments
  • Naomi  N edited Original. Comment: Minor edit

Page 1 of 1 (1 items)