网格生成（C＃UWP）

Question

我是UWP编程中的新成员。并有一些问题。

我有数据（订单）的JSON。有一些订单。

我需要生成带有文本字段的网格。

现在我有XAML这样的：

<StackPanel Height="1020" Width="350" BorderBrush="#FFFDFCFC" BorderThickness="0,0,1,0"> 
      <Grid Height="204" BorderBrush="#FFFBF8F8" BorderThickness="0,0,0,1"> 
       <TextBlock x:Name="date1" HorizontalAlignment="Left" TextAlignment="Center" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="350" Height="50" FontFamily="SF UI Display" FontSize="30" FontWeight="Light" Foreground="White" /> 
       <TextBlock x:Name="adress1" TextAlignment="Center" HorizontalAlignment="Left" Margin="0,146,-1,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="58" Width="350" FontFamily="SF UI Display" FontSize="20" FontWeight="Light" Foreground="White" /> 
       <TextBlock x:Name="name1" HorizontalAlignment="Left" TextAlignment="Center" Margin="0,86,-1,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="60" Width="350" FontFamily="SF UI Display" FontSize="30" FontWeight="Light" Foreground="White" Padding="0,0,0,0"/> 
      </Grid> 
      <Grid Height="204" BorderBrush="#FFFBF8F8" BorderThickness="0,0,0,1"> 
       <TextBlock x:Name="date2" TextAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="350" Height="50" Foreground="White" FontFamily="SF UI Display" FontSize="30" FontWeight="Light" /> 
       <TextBlock x:Name="adress2" TextAlignment="Center" HorizontalAlignment="Left" Margin="0,145,-1,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="59" Width="350" FontFamily="SF UI Display" FontSize="20" FontWeight="Light" Foreground="White" /> 
       <TextBlock x:Name="name2" HorizontalAlignment="Left" Margin="0,87,-1,0" TextAlignment="Center" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="64" Width="350" FontFamily="SF UI Display" FontSize="30" FontWeight="Light" Foreground="White" Padding="0,0,0,50"/> 
      </Grid> 
      <Grid Height="204" BorderBrush="#FFFBF8F8" BorderThickness="0,0,0,1"> 
       <TextBlock x:Name="date3" HorizontalAlignment="Left" TextAlignment="Center" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="350" Height="50" Foreground="White" FontFamily="SF UI Display" FontSize="30" FontWeight="Light" /> 
       <TextBlock x:Name="adress3" HorizontalAlignment="Left" TextAlignment="Center" Margin="0,143,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="350" Height="61" FontFamily="SF UI Display" FontSize="20" FontWeight="Light" Foreground="White" /> 
       <TextBlock x:Name="name3" HorizontalAlignment="Left" TextAlignment="Center" Margin="0,86,-1,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="60" Width="350" FontFamily="SF UI Display" FontSize="30" FontWeight="Light" Foreground="White" Padding="0,0,0,50"/> 

      </Grid> 
      <Grid Height="204" BorderBrush="#FFFBF8F8" BorderThickness="0,0,0,1"> 
       <TextBlock x:Name="date4" HorizontalAlignment="Left" TextWrapping="Wrap" TextAlignment="Center" Text="" VerticalAlignment="Top" Width="350" Height="50" Foreground="White" FontFamily="SF UI Display" FontSize="30" FontWeight="Light" /> 
       <TextBlock x:Name="adress4" HorizontalAlignment="Left" Margin="0,153,0,0" TextWrapping="Wrap" TextAlignment="Center" Text="TextBlock" VerticalAlignment="Top" Height="61" Width="342" FontFamily="SF UI Display" FontSize="20" FontWeight="Light" Foreground="White" /> 
       <TextBlock x:Name="name4" HorizontalAlignment="Left" TextAlignment="Center" Margin="0,86,-1,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="60" Width="350" FontFamily="SF UI Display" FontSize="30" FontWeight="Light" Foreground="White" Padding="0,0,0,50"/> 
      </Grid> 

和下载数据的TextBlock这样的：

try 
{ 
    date1.Text = convertedDate; 

    adress1.Text = orders[0].shipping.address_1.ToString() + "      " + orders[0].shipping.address_2; 
    name1.Text = orders[0].billing.first_name.ToString(); 
    string order =orders[0].ToFormattedJsonString();   
} 
catch (Exception e) 
{ 
    Debug.WriteLine(e.Message); 
    Debug.WriteLine(e.StackTrace); 
} 

string date_2 = orders[1].date_created + "+0:00"; 
DateTime dt2 = DateTime.Parse(date_2); 
string convertedDate2 = dt2.ToString("dd/MM/yyyy HH:mm:ss"); 

try 
{ 
    date2.Text = convertedDate2; 
    adress2.Text = orders[1].shipping.address_1.ToString() + "      " + orders[1].shipping.address_2; 
    name2.Text = orders[1].billing.first_name.ToString(); 
} 
catch (Exception e) 
{ 

    Debug.WriteLine(e.Message); 
    Debug.WriteLine(e.StackTrace); 
} 

但是，这并不好。我如何计算json中有多少个json对象并根据它生成网格，并在此之后用数据填充它

Answer 1

我建议您阅读关于此主题的文章（或书），但这里是一个关于如何做到这一点的简短总结。

这是没有MVVM，这将是下一步，在这里我专注于基础知识。正如你看到的，我们使用的DataTemplate中的数据绑定（这是{}绑定的东西）

<GridView Background="Black" x:Name="OrdersGridView" > 
    <GridView.ItemTemplate> 
     <DataTemplate> 
      <StackPanel> 
       <TextBlock Text="{Binding Date}" /> 
       <TextBlock Text="{Binding Address}" /> 
       <TextBlock Text="{Binding Name}"/> 
      </StackPanel> 
     </DataTemplate> 
    </GridView.ItemTemplate> 
</GridView> 

：

因此，对于重复项目使用的GridView（或ListView如果适合更好）。

那么对于订单创建一个类：

public class Order { 
    public DateTime Date { get; set; } 
    public string Address { get; set; } 
    public string Name { get; set; } 
} 

然后在后面的代码背后创建订单属性：

public ObservableCollection<Order> Orders { get; set; } 

然后填充订单和设置在GridView的的ItemSource到这些项目（这将是你的JSON取代码，在这里我硬编码的东西，使其更容易理解...）：

//Populate Orders: 
      Orders = new ObservableCollection<Order> { new Order { Address = "dsfsd", Date = DateTime.Now, Name = "Name" } , 
       new Order { Address = "dsfsd", Date = DateTime.Now, Name = "Name" }, 
        new Order { Address = "dsfsd", Date = DateTime.Now, Name = "Name" } 
       }; 

      OrdersGridView.ItemsSource = Orders; 

然后你应该学习MVVM，但这将是第一步。