Question

我正在创建Windows UWP应用程序，该应用程序显示来自嵌套列表df.loc[df['job_title'].str.contains('teacher'), 'new_job_title'] = 'teacher'的天气预报。它包含外部列表中的天数和内部列表中的每小时预测。（使用pivot）我试图在每个pivotItem中显示一个单独的stackPanel，用于每小时预测，以便每个sortedDays将有多个每小时预测的stackPanel。

不幸的是我的数据在屏幕底部运行，我似乎无法使滚动条工作。我一直在努力在pivotItem stackPanel周围添加任何形式的边距或边界。由于数据是来自API生成的嵌套列表，我觉得它必须通过c＃代码而不是xaml（对意见开放）添加。我查了一下文档，但找不到任何可以通过c＃

起作用的东西

hourStack

WeatherPage.xaml

 //dynamically add a pivot item
        PivotItem pvt;
        ScrollViewer scroll;

        //loop through SortedDays to seperate Day and hour forecasts 
        int xCount = 0, yCount = 0;
        foreach (var sd in myForecast.SortedDays)
        {// Define a ScrollViewer

            scroll = new ScrollViewer
            {
                VerticalScrollBarVisibility = ScrollBarVisibility.Visible
            };
            pvt = new PivotItem
            {
                Header = myForecast.SortedDays[xCount][0].dayOfWeek

            };
            var dayStack = new StackPanel();

            foreach (var sh in sd)
            {
                var hourStack = new StackPanel
                {
                    HorizontalAlignment = HorizontalAlignment.Center

                };

                var timeBlock = new TextBlock
                {
                    Text = myForecast.SortedDays[xCount][yCount].dtime,
                    FontSize = 30
                };
                hourStack.Children.Add(timeBlock);

                var tempBlock = new TextBlock
                {
                    Text = "Tempeture (c)\t:" + System.Convert.ToString(Math.Truncate((myForecast.SortedDays[xCount][yCount].temp - 273.15) * 100) / 100)
                };
                hourStack.Children.Add(tempBlock);

                var descBlock = new TextBlock
                {
                    Text = myForecast.SortedDays[xCount][yCount].desc
                };
                hourStack.Children.Add(descBlock);

                var windBlock = new TextBlock
                {
                    Text = "Windspeed\t:" + System.Convert.ToString(myForecast.SortedDays[xCount][yCount].windSpeed)
                };
                hourStack.Children.Add(windBlock);

                var humBlock = new TextBlock
                {
                    Text = "Humidity\t:" + System.Convert.ToString(myForecast.SortedDays[xCount][yCount].humidity)
                };
                hourStack.Children.Add(humBlock);

                // append hourStack to dayStack
                yCount++;
                dayStack.Children.Add(hourStack);
            }
            scroll.Content = dayStack;
            // set dayStack as pivots content
            pvt.Content = scroll;

            // add pivotItem to pivot
            pvtWeather.Items.Add(pvt);

            pvt = null;
            xCount++;
            yCount = 0;
        }

Answer 1

在尝试设置上面的属性代码之前，实际上上面代码片段中使用的所有元素和样式都可以在XAML中定义。对于您的方案，强烈建议PivotItem与数据源绑定。绑定详情请参考this tutorial。并且嵌套列表可以绑定到Pivot控件。

例如，您可以按如下方式定义实体：

public class Daylist
{
    public string Day { get; set; }
    public ObservableCollection<TimeTemperature> Temperatures { get; set; }
}

public class TimeTemperature
{
    public string currenttime { get; set; }
    public string winSpeed { get; set; }
    public string humidity { get; set; }
    public string temperature { get; set; }
}

这样可以按如下方式创建嵌套列表：

public ObservableCollection<Daylist> daylists { get; set; } 
public MainPage()
{
    this.InitializeComponent();
    daylists = new ObservableCollection<Daylist>
    {
        new Daylist {Day="Wednesday" ,Temperatures= new ObservableCollection<TimeTemperature>
        {
            new TimeTemperature {currenttime="2018-3-14 00:00:00",temperature="7.72",winSpeed="11.67" ,humidity=".95"},
            new TimeTemperature {currenttime="2018-3-14 01:00:00",temperature="7.72",winSpeed="11.67" ,humidity=".95" },
            new TimeTemperature {currenttime="2018-3-14 02:20:00",temperature="7.72",winSpeed="11.67" ,humidity=".95"}
            ...
        }},
        new Daylist {Day="Friday" ,Temperatures= new ObservableCollection<TimeTemperature>
        {
             new TimeTemperature {currenttime="2018-3-14 00:00:00",temperature="7.72",winSpeed="11.67" ,humidity=".95" }
        }}
    };
}

现在我们可以在XAML中定义元素并将数据源绑定到Pivot和PivotItem，可以简单地更新布局。根据您的要求，使用ListView Pivot.ItemTemplate来显示数据，它会在记录溢出时自动滚动。您还可以根据需要添加Margin和其他属性。

<Pivot x:Name="Pivot1" ItemsSource="{x:Bind daylists}">
    <Pivot.HeaderTemplate>
        <DataTemplate x:DataType="local:Daylist">
            <TextBlock Text="{x:Bind Day}" />
        </DataTemplate>
    </Pivot.HeaderTemplate>
    <Pivot.ItemTemplate>
        <DataTemplate x:DataType="local:Daylist">
            <ScrollViewer>
                <ListView ItemsSource="{x:Bind Temperatures}">
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="local:TimeTemperature">
                            <Grid Margin="20">
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                    <RowDefinition />
                                    <RowDefinition />
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <TextBlock
                                    Grid.Row="0"
                                    Grid.ColumnSpan="2"
                                    Text="{x:Bind currenttime}" />
                                <TextBlock
                                    Grid.Row="1"
                                    Grid.Column="0"
                                    Text="winSpeed:" />
                                <TextBlock
                                    Grid.Row="1"
                                    Grid.Column="1"
                                    Text="{x:Bind winSpeed}" />
                                <TextBlock
                                    Grid.Row="2"
                                    Grid.Column="0"
                                    Text="humidity:" />
                                <TextBlock
                                    Grid.Row="2"
                                    Grid.Column="1"
                                    Text="{x:Bind humidity}" />
                                <TextBlock
                                    Grid.Row="3"
                                    Grid.Column="0"
                                    Text="temperature:" />
                                <TextBlock
                                    Grid.Row="3"
                                    Grid.Column="1"
                                    Text="{x:Bind temperature}" />
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </ScrollViewer>
        </DataTemplate>
    </Pivot.ItemTemplate>
</Pivot>

更多详情请参阅official sample。

C＃UWP向pivotItem添加滚动条，边距，边框

1 个答案: