CODEWITHSUNDEEP
c#wpfxaml
911Rapid
911Rapid

Reputation: 199

WPF controls not showing up in ItemTemplate(Listbox/ListView)

I have recently started with XAML and WPF. I just created a new project in wpf and add the below XAML code. But...none of the items which are added inside "Listbox.ItemTemplate" or "ListView.ItemTemplate" for that matter show up in designer window. what am i doing wrong? This is a fresh project and so no code-behind stuff added yet. i scratched my head for 15 mins with this but with no success. Please help

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <Grid Margin="10">
        <ListBox Margin="10">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Name: " />   
                        <TextBlock Text="Age: " /> 
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>    
    </Grid>
</Window>

enter image description here

Upvotes: 1

Views: 3013

Answers (3)

Ramankingdom
Ramankingdom

Reputation: 1486

Item Templates are basically used to show customize data. Just Use simple string items first. It will show in list box.

Upvotes: 0

Nipheris
Nipheris

Reputation: 507

You should bind your ListBox or entire Window to some DataContext (usually this is viewmodel with the data you need to display) or specify items of the list explicitly.

In your snippet you specified only an item template, not the items itself.

The example of XAML-defined items (simple strings):

<Window x:Class="WpfApplication3.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">

    <Grid Margin="10">
        <ListBox Margin="10">
            <ListBox.Items>
                <ListBoxItem>123</ListBoxItem>
                <ListBoxItem>456</ListBoxItem>
            </ListBox.Items>
        </ListBox>    
    </Grid>
</Window>

The example with DataContext and Bindings. XAML:

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <Grid Margin="10">
        <ListBox Margin="10" ItemsSource="{Binding Path=Persons}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Label>Name:</Label><TextBlock VerticalAlignment="Center" Text="{Binding Path=Name}" />
                        <Label>Age:</Label><TextBlock VerticalAlignment="Center" Text="{Binding Path=Age}" /> 
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>    
    </Grid>
</Window>

Codebehind:

namespace WpfApplication3
{
    public class PersonViewModel
    {
        public PersonViewModel(string name, int age)
        {
            this.name = name;
            this.age = age;
        }

        public string Name
        {
            get { return name; }
        }
        private string name;

        public int Age
        {
            get { return age; }
        }
        private int age;
    }

    public class MainViewModel
    {
        public MainViewModel()
        {
            persons = new ObservableCollection<PersonViewModel>()
            {
                new PersonViewModel("Lez", 146),
                new PersonViewModel("Binja", 158),
                new PersonViewModel("Rufus the Destroyer", 9000)
            };
        }

        public ObservableCollection<PersonViewModel> Persons
        {
            get { return persons; }
        }

        private ObservableCollection<PersonViewModel> persons;
    }
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.DataContext = new MainViewModel();
        }
    }
}

IMPORTANT: Don't forget to properly implement INotifyPropertyChanged in case of mutable properties of viewmodels (for example, if you will have setters for "Name" and "Age" properties of PersonViewModel).

Upvotes: 6

Bertrand C.
Bertrand C.

Reputation: 165

You don't see any items because your ListBox doesn't contain any data in the designer view. To populate it, a list should be binded to the property "ItemsSource" of your ListBox, or adding datas directly to the property "Items" (XAML or code behind).

If you want to show items in the designer view properly, you should have a ViewModel binding to the DataContext of your page and create a "Sample data" file (via Blend for example).

Upvotes: 1

Related Questions