Click here to Skip to main content
15,902,869 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,
I used this XAML (in a Windows 8.1 application)
XML
<Page
    x:Name="pageRoot"
    x:Class="MicrosoftFWLinks.Favorites"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MicrosoftFWLinks"
    xmlns:common="using:MicrosoftFWLinks.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Loaded="pageRoot_Loaded">

    <Page.Resources>
        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <CollectionViewSource x:Name="cvs"
                              Source="{Binding FavoritesColl}"
                              IsSourceGrouped="False"
                              />
        <DataTemplate x:Name="TElement">
            <Grid Width="500" Height="309" >
                <Border BorderThickness="2" BorderBrush="Black">
                    <Image Source="{Binding Image}" Stretch="Fill" />
                </Border>
                <TextBlock Text="{Binding Title}" VerticalAlignment="Bottom"/>
            </Grid>
        </DataTemplate>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid removed="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                        Style="{StaticResource NavigationBackButtonNormalStyle}"
                        VerticalAlignment="Top"
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button"/>
            <TextBlock x:Name="pageTitle" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                        IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40">
                <Run FontFamily="Segoe UI Symbol" Text="" />
                <Run Text="  Favorites" />
            </TextBlock>
        </Grid>
        <GridView Grid.Row="1" ItemTemplate="{Binding TElement}" ItemsSource="{Binding Source={StaticResource cvs}}>

        </GridView>
    </Grid>
</Page>


and this C#

C#
namespace MicrosoftFWLinks
{
    /// <summary>
    /// Pagina base che fornisce caratteristiche comuni alla maggior parte delle applicazioni.
    /// </summary>
    public sealed partial class Favorites : Page
    {

        private NavigationHelper navigationHelper;
        private ObservableDictionary defaultViewModel = new ObservableDictionary();

               public ObservableDictionary DefaultViewModel
        {
            get { return this.defaultViewModel; }
        }

                public NavigationHelper NavigationHelper
        {
            get { return this.navigationHelper; }
        }


        public Favorites()
        {
            this.InitializeComponent();
            this.navigationHelper = new NavigationHelper(this);
            this.navigationHelper.LoadState += navigationHelper_LoadState;
            this.navigationHelper.SaveState += navigationHelper_SaveState;
        }

                private void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
        {
        }

               private void navigationHelper_SaveState(object sender, SaveStateEventArgs e)
        {
        }

        
        private async void pageRoot_Loaded(object sender, RoutedEventArgs e)
        {
            IReadOnlyList<StorageFile> c = await KnownFolders.PicturesLibrary.GetFilesAsync();
            List<StorageFile> images = new List<StorageFile>();
            foreach (StorageFile s in c)
            {
                if (s.FileType == ".png")
                    images.Add(s);
            }
            foreach (StorageFile s in images)
            {
                FavoritesColl.Add(new Favorite(new Uri(s.Path, UriKind.Absolute), s.DisplayName));
            }
        }
        ObservableCollection<Favorite> FavoritesColl = new ObservableCollection<Favorite>();
        public class Favorite
        {
            public Uri Source { get; set; }
            public string Title { get; set; }
            public Favorite(Uri source, string text)
            {
                Title = text;
                Source = source;
            }
        }
    }
}


To generate a gridview with the images of my pictures folder and their name under them, but nothing is shown. Can you please help me?

Thanks a lot!!

Jymmy097
Posted
Updated 21-Feb-14 10:39am
v3

1 solution

One apparent concern is this: you use the attribute Source="{Binding Image}". By doing so, you assume that you use some bound objects (normally, one per grid row), which have a public property named Image. More exactly, it can be indirectly specified by the implementation of the interface System.ComponentModel.INotifyPropertyChanged. I cannot see anything like that in your code.

The usual behavior of XAML-defined UI is just ignoring the data if the property used in binding is not found or not public. This explains what you observe.

So, you just need to implement everything as required. First, your ItemSource should be a collection of the object of the type with appropriate properties you use for binding. If you also need to track removing/adding/sorting of the items of this collection, you should derive your collection from System.Collections.ObjectModel.ObservableCollection<T>; for advanced implementations, you would need to implement the interface INotifyCollectionChanged and INotifyPropetyChanged directly. The type T (the generic type parameter of your ItemSource type), should be the type representing your records with properties you mention in your binding. Please see:
http://msdn.microsoft.com/en-us/library/system.componentmodel.inotifypropertychanged%28v=vs.110%29.aspx[^],
http://msdn.microsoft.com/en-us/library/ms668604%28v=vs.110%29.aspx[^],
http://msdn.microsoft.com/en-us/library/system.collections.specialized.inotifycollectionchanged%28v=vs.110%29.aspx[^].

For better understanding of binding, please start here: http://msdn.microsoft.com/en-us/library/ms752347%28v=vs.110%29.aspx[^].

—SA
 
Share this answer
 
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900