Resources For IT Professionals
Page Details
  • First published by (eMicrosoft Community Contributo)
  • When: 31 Jul 2013 6:07 PM
  • Last revision by (aMicrosof)
  • When: 6 Aug 2013 10:18 PM
  • Revisions: 3
  • Comments: 1
Options

Revision #1

Wiki  >  TechNet Articles  >  Display Images in GridView/ListView using DataBinding  >  Revision #1
Display Images in GridView/ListView using DataBinding
You are currently reviewing an older revision of this page.
Go to current version

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();
 
        }
}

Revert to this revision