WP7列表框对齐和样式问题

Question

我想创建一个windows phone屏幕，该屏幕会在listbox中显示一些用户信息，如下所示

现在我正在使用以下代码正常工作。

   <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>

我想要做的是，我想从后面的代码动态地将项目加载到列表框中，并且视图应该看起来像上面的图像。

是否可以创建这样的样式/控件并将其添加到我将来创建的所有列表中。

修改

我的列表框

<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>

我创建了一个类

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

并在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;

添加此应用后，卡住了

Answer 1

为资源中的DataTemplate项定义ListBox：

           <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>

并从您想要的每个ListBox中使用它：

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

，其中Guys为ObservableCollection<>

添加新项目：

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

P.S。

建议不要将{p> UserControl用作ListBox项