C# UWP 添加滚动条、边距、边框到 pivotItem

Question

我正在创建 Windows UWP 应用程序，它显示来自嵌套列表 sortedDays 的天气预报。它包含外部列表中的天数和内部列表中的每小时预测。（使用 pivot）我试图在每个 pivotItem 中显示一个单独的 stackPanel 用于每个小时预测，以便每个 pivotItem 将有许多每小时预测的 stackPanel。

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

工作的内容

 //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;
        }

WeatherPage.xaml

<Page
x:Class="WeatherForecast.WeatherPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WeatherForecast"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Pivot x:Name="pvtWeather"  Margin="100,100,100,100" Height="1200" HorizontalAlignment="Center" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.BringIntoViewOnFocusChange="True">



    </Pivot>
</Grid>

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

C# UWP Adding scrollbar,margin,border to pivotItem

c#

pivot

stackpanel

uwp

uwp-xaml