Question

I want to create a windows phone screen which will display the some users info in a listbox like following

Right now i am doing this using following code its working fine.

   <ListBox>
   <ListBoxItem Height="100">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="60"/>
                            <RowDefinition Height="40"/>
                            </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                            <Image Source="Assets/Users/dummyUser2.png" Grid.RowSpan="2" Grid.Column="0" Height="90" Width="90" />
                            <TextBlock Text="John Smith" Style="{StaticResource ProfileNameStyleForTextBlock}" />
                            <TextBlock Text="Birthday" Style="{StaticResource EventNameStyleForTextBlock}"   />
                            <TextBlock Text="Today" Style="{StaticResource EventDateStyleForTextBlock}" Foreground="#09aba9" />
                        </Grid>
                    </ListBoxItem>
   ...........
   ......
   </ListBox>

What i want to do is, i want to load the items into list box dynamically from code behind and the view should be look like above image.

Is it possible to create a style/control like this and add it to all the lists i’ll create in future.

Edit

My ListBox

<ListBox Name="lstlist" ItemTemplate="{StaticResource GuyDataTemplate}" />

DataTemplate

 <DataTemplate x:Key="GuyDataTemplate">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="60"/>
                <RowDefinition Height="40"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Image Source="Assets/Users/dummyUser2.png" Grid.RowSpan="2" Grid.Column="0" Height="90" Width="90" />
            <TextBlock Text="{Binding Name}" Style="{StaticResource ProfileNameStyleForTextBlock}" />
            <TextBlock Text="{Binding Event}" Style="{StaticResource EventNameStyleForTextBlock}"   />
            <TextBlock Text="{Binding Date}" Style="{StaticResource EventDateStyleForTextBlock}" Foreground="#09aba9" />
        </Grid>
    </DataTemplate>

I created a class as

public class Guy
{
    public string Name { get; set; }
    public string Event { get; set; }
    public string Date { get; set; }
}

and wrote the logic in a buttonclick

 ObservableCollection<Guy> Guys = new ObservableCollection<Guy>();
        Guys.Add(new Guy() { Name = "xyzabc", Event = "event details", Date = "19/25/0258" });
        Guys.Add(new Guy() { Name = "xyzabc", Event = "event details", Date = "19/25/0258" });
        Guys.Add(new Guy() { Name = "xyzabc", Event = "event details", Date = "19/25/0258" });
        Guys.Add(new Guy() { Name = "xyzabc", Event = "event details", Date = "19/25/0258" });

        lstlist.ItemsSource = Guys;

After adding this app got stucked

Answer 1

define DataTemplate for ListBox item in resources :

           <DataTemplate x:Key="GuyDataTemplate">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="60"/>
                        <RowDefinition Height="40"/>
                        </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                        <Image Source="Assets/Users/dummyUser2.png" Grid.RowSpan="2" Grid.Column="0" Height="90" Width="90" />
                        <TextBlock Text="John Smith" Style="{StaticResource ProfileNameStyleForTextBlock}" FontWeight="ExtraBold" />
                        <TextBlock Text="Birthday" Style="{StaticResource EventNameStyleForTextBlock}"   />
                        <TextBlock Text="Today" Style="{StaticResource EventDateStyleForTextBlock}" Foreground="#09aba9" />
                    </Grid>
                </DataTemplate>

and use it from every ListBox you want:

<ListBox ItemsSource={Binding Guys} ItemTemplate={StaticResource GuyDataTemplate} />

, where Guys is ObservableCollection<>

add new item:

Guys.Add(new Guy() { Name = "Will Snith" });

P.S.

UserControl is not recommended to use as ListBox item