locked
Bind GridView with Custom UserControl

    Question

  • I am trying to databind a set of custom user controls that have content 'preloaded' to a GridView however the only content that is displayed is the default content from the custom user control constructor.  I've uploaded a basic project to OneDrive that exhibits the issue (see myTest3).

    Example Project: https://onedrive.live.com/embed?cid=2AA8FCFD13B99E3A&resid=2AA8FCFD13B99E3A%21128&authkey=ANBB-GathVAYZ5k

    I was able to confirm that when the databind happens, the custom user control constructor is called which essentially wipes out the preloaded user control contents.  The 'myTest4' does not have the issue however its not displayed in the format I'm looking for (i.e. horizontal scrolling, borders, etc).  I've tried DependenyProperties but that didn't help.

    What am I missing?

    Thanks, swMercenary.

    Sunday, April 27, 2014 9:17 PM

Answers

  • Vishal - The example I posted was an over-simplified scenario that exhibited my issue.  In my app I have a custom UserControl that hosts multiple custom UserControls, with each hosted control displaying data that based on the data type.  However your response and example did point me to the missing link which was binding the Content of the base class within the xaml.  Thanks.
    • Marked as answer by swMercenary Tuesday, April 29, 2014 3:11 PM
    Tuesday, April 29, 2014 3:10 PM

All replies

  • There are few things that are not needed in your sample like the collection of data should not be collection of controls itself. Since you are doing directing data binding you do not need dependency property in you control. You will need a class to represent data. I have made some changes for your code to work:

    MainPage.xml.cs

    using System;
    using System.Collections.Generic;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Media.Imaging;
    using Windows.UI.Xaml.Navigation;
    
    namespace DynamicUCTestApp
    {
    
        public class Data
        {
            public string Title { get; set; }
            public ImageSource ImageSource { get; set; }
        }
    
        /// <summary>
        /// The purpose of this example is to help understand why a custom UserControl cannot be 
        /// initialized with content and displayed within a GridView.  The behaviour with myTest3
        /// (i.e. horizontal scrolling, items not merged together) is what I want except that it
        /// does contain the new content.
        /// </summary>
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
    
    
                List<Data> dataCollection = new List<Data>();
    
                for (int counter = 0; counter < 10; counter++)
                {
                    dataCollection.Add(new Data() { Title = "This is a new Title", ImageSource = new BitmapImage(new Uri("ms-appx:///Assets/test2.image.new.png")) });
                }
    
                myTest1.ItemsSource = dataCollection;
                myTest2.ItemsSource = dataCollection;
                myTest3.ItemsSource = dataCollection;
                myTest4.ItemsSource = dataCollection;
    
            }
    
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                base.OnNavigatedTo(e);
            }
        }
    }
    

    ucTest2.xaml

    <UserControl
        x:Class="DynamicUCTestApp.UserControls.ucTest2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:DynamicUCTestApp.UserControls"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300"
        d:DesignWidth="400"
        MinHeight="150"
        MinWidth="200">
        <Grid Background="Azure">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Image x:Name="myImage" Grid.RowSpan="2" Source="{Binding ImageSource}" Stretch="Fill"/>
            <TextBlock x:Name="myTitle" Grid.Row="0" Foreground="Black" FontSize="24" Text="{Binding Title}" HorizontalAlignment="Center"/>
        </Grid>
    </UserControl>
    

    ucTest2.xaml.cs

    using Windows.UI.Xaml.Controls;
    
    // The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236
    
    namespace DynamicUCTestApp.UserControls
    {
        public sealed partial class ucTest2 : UserControl
        {
            public ucTest2()
            {
                this.InitializeComponent();
            }
        }
    }
    

    I did not work on your first user control as I think this should give you good idea.


    -- Vishal Kaushik --

    Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you. Happy Coding!!!

    Monday, April 28, 2014 3:37 AM
  • Vishal - The example I posted was an over-simplified scenario that exhibited my issue.  In my app I have a custom UserControl that hosts multiple custom UserControls, with each hosted control displaying data that based on the data type.  However your response and example did point me to the missing link which was binding the Content of the base class within the xaml.  Thanks.
    • Marked as answer by swMercenary Tuesday, April 29, 2014 3:11 PM
    Tuesday, April 29, 2014 3:10 PM