How can I see bound collection elements in a ListView at design time in designer window?

Question

While studying C# and XAML binding I recall being able to see bound elements in the design window at design time. However, the strategy I used to bind this collection to my ListView doesn't show the elements until run time which will makes design more difficult.

What I want is for the images and words to appear in the design window which I believe has something to do with the designer creating an instance of a class at design time in order to extract bound elements... I just don't recall the methodology. Any help greatly appreciated!

Here is the relevant XAML:

<Page
x:Class="Class_Name.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Class_Name"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Page.Resources>
    <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
    <x:String x:Key="AppName">Program Name</x:String>
</Page.Resources>

       <ListView x:Name="CharacterList">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="55,20,20,20">
                        <TextBlock Text="{Binding Name}" Style="{StaticResource SubheaderTextBlockStyle}"/>
                        <Image Source="{Binding Image}" Stretch="None" HorizontalAlignment="Left"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
</Page>

Here is the CharClass:

    class CharClass
{
    public string Name { get; private set; }
    public BitmapImage Image { get; private set; }

    public CharClass(string name, string imagePath)
    {
        Name = name;
        Image = new BitmapImage() { UriSource = new Uri("ms-appx:///Assets/" + imagePath) };
    }
}

Here's the Collection:

    class AllCharacters:ObservableCollection<CharClass>
{
    public AllCharacters()
    {
        loadData();
    }

    private void loadData()
    {
        this.Add(new CharClass("Barbarian", "125px-C_barbarian.bmp"));
        this.Add(new CharClass("Crusader", "125px-Crusader.bmp"));
        this.Add(new CharClass("Demon Hunter", "125px-C_demon.bmp"));
        this.Add(new CharClass("Monk", "125px-C_monk.bmp"));
        this.Add(new CharClass("Witch Doctor", "125px-C_witch.bmp"));
    }
}

Here's MainPage.xaml.cs:

    public sealed partial class MainPage : Page
{
    AllCharacters characterList;
    public MainPage()
    {
        this.InitializeComponent();
        this.Loaded += MainPage_Loaded;
    }

    private void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        characterList = new AllCharacters();
        CharacterList.ItemsSource = characterList;
    }
}

Answer 1

Add DataContext and ItemsSource binding to your XAML, as shown below:

<ListView x:Name="listView" Margin="0" ItemsSource="{Binding Mode=OneWay}">
            <ListView.DataContext>
                <local:AllCharacters/>
            </ListView.DataContext>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="55,20,20,20">
                        <TextBlock Text="{Binding Name}" />
                        <Image Source="{Binding Image}" Stretch="None" HorizontalAlignment="Left"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

EDIT: I did the following modifications to get the images displaying:

XAML:

                <Image Stretch="None" HorizontalAlignment="Left">
                    <Image.Source>
                        <BitmapImage UriSource="{Binding Image}"></BitmapImage>
                    </Image.Source>
                </Image>

CharClass.cs:

class CharClass
    {
        public string Name { get; private set; }
        public string Image { get; private set; }
        //public BitmapImage Image { get; private set; }
    }