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

Original

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

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

Refer sample code for 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