Binding data in C# and XAML?

Question

I'm trying to use binding with C# and a XAML SemanticZoom control in my Metro app, but honestly I'm at a loss as to how to do it. Here's the XAML code I've gotten so far by piecing together from questions, articles, etc:

<SemanticZoom x:Name="boardZoom" Height="626" Margin="10,132,10,0" VerticalAlignment="Top">
        <SemanticZoom.ZoomedInView>

           <GridView IsSwipeEnabled="True" x:Name="ItemsGridView">

                    <GridView.ItemTemplate>

                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Margin="10,10,0,0" 
                        HorizontalAlignment="Left" Background="White">
                                <TextBlock Text="{Binding Title}" TextWrapping="Wrap" Width="200" Height="300"
                                    FontFamily="Global User Interface" FontSize="40" Foreground="Black"
                           VerticalAlignment="Center"  HorizontalAlignment="Left"/>

                                <Image Source="{Binding Image}" Height="60" Width="60" 
                       VerticalAlignment="Center" Margin="0,0,10,0" Visibility="{Binding isImage}" />

                                <TextBlock Text="{Binding Category}" TextWrapping="Wrap" Width="200"
                                    FontFamily="Global User Interface" Foreground="Black"
                           VerticalAlignment="Center"  HorizontalAlignment="Left"/>
                            </StackPanel>
                        </DataTemplate>

                    </GridView.ItemTemplate>

                </GridView>
            </SemanticZoom.ZoomedInView>

<!--Didn't include SemanticZoom.ZoomedOutView since I'm still trying to get the ZoomedIn one working first-->

        </SemanticZoom>

And my C# code:

        List<PinStore.pin> pins = PinStore.CopyFromStream(response.GetResponseStream()); //returns a list of PinStore.pin objects, which have name, type, Image, isImage, and Category objects
        System.Collections.ObjectModel.ObservableCollection<SemanticZoomed.zoomedIn> toSource = new System.Collections.ObjectModel.ObservableCollection<SemanticZoomed.zoomedIn>(); //should I be using ObservableCollection or something like List<> here?
        foreach (PinStore.pin pin in pins)
        {
            SemanticZoomed.ZoomedIn toAdd = new SemanticZoomed.ZoomedIn(); //class with Title, Image, isImage, and Category objects
            if (pin.type == "text")
            {
                toAdd.Title = pin.name;
                toAdd.Image = null;
                toAdd.isImage = Visibility.Collapsed;
                toAdd.Category = pin.category;
            }
            toSource.Add(toAdd);
        }
        ItemsGridView.DataContext = toSource;

I've not had much experience in XAML/C#, and zero experience with binding. I'm not getting any errors, but I've noticed that if I replace ItemsGridView.DataContext = toSource; with ItemsGridView.ItemsSource = toSource; a blank stackpanel shows up in the GridView, and I can't seem to find a way to fill that with the Title and Category values I specify. Thanks!

Answer 1

Well you should first consider creating a ResourceDictionary so you can save your item style. Then you can set the ItemStyle to the Resource Dictionary.

But regardless you need to do: ItemsGridView.ItemsSource = toSource; If you do not choose to Bind the toSource in the GridView xaml.

Also make sure the SemanticZoomed.zoomedIn object implements the INotifyPropertyChanged interface, And calls the event properly. And make sure the Title, Image, Category, etc are public properties that call the event when edited. and Also you need make sure pin.Text is an actual value. {Making sure}.

If you want to learn more about data binding check out how they do it in C# & XAML with Windows 8 {Should be the same thing}: http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh464965.aspx