网格生成(C#UWP) [英] Grid generation (C# UWP)

问题描述

我是UWP编程的新手.还有问题.

I'm new in UWP programming. And have some question.

我有带有数据(订单)的JSON.有一些订单.

I have JSON with data (orders). There are some count of orders.

我需要使用文本字段生成网格.

I need to generate Grids with Text fields.

现在我有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:

And download data to TextBlock like this:

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对象并根据它生成网格，然后用数据填充

But this is not good. How I can count how many json objects in json and generate grids according to it, and after this fill it with data

推荐答案

我建议您阅读有关该主题的文章(或一本书)，但这只是有关此操作的简短总结.

I would suggest you to read an article (or a book) on this topic, but here is the a short summery about how to do this.

这是没有MVVM的操作，这是下一步，在这里我将重点介绍基础知识.

This is without MVVM, that would be the next step, here I focus on the basics.

因此，对于重复项，请使用GridView(或ListView，如果更合适):<​​/p>

So, for repeating items use GridView (Or ListView if that fits better):

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

如您所见，我们在DataTemplate中使用了数据绑定(这是{Binding}的东西).

As you see we use Data Binding in the DataTemplate (that's the {Binding} stuff).

然后为订单创建一个类:

Then Create a class for the Orders:

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

然后在后面的代码中为订单创建属性:

Then in the code behind behind create a property for the orders:

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

然后填充订单，并将GridView的ItemSource设置为项目(这是您的json提取代码，在这里我对一些内容进行了硬编码以使其更易于理解...):

Then populate the orders and set the ItemSource of the GridView to the items (this would be your json fetching code, here I hardcode some stuff to make it easier to understand...):

//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，但这是第一步.

Then you should learn MVVM, but this would be the first step.

这篇关于网格生成(C#UWP)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！