数据绑定 XAML 网格行定义 WP8.

本文关键字：定义 WP8 网格 XAML 数据绑定 | 更新日期: 2023-09-27 18:32:05

具体来说，我试图弄清楚如何将元素的数量绑定到列表的大小。 列表的大小在设计空间中将是未知的，我需要生成的行数是动态的。 然后，我需要能够使用列表中子字段中的数据填充两列。

我在这种类型的任何东西上看到的最多的是以编程方式设置行定义，但这仍然对 VS 中的设计器视图没有帮助。 我是否会为了查看布局是否正常工作而陷入调试状态，或者是否有某种方法可以在设计器中执行此操作？

数据绑定 XAML 网格行定义 WP8.

如果要在设计器中查看数据集，则需要设置元素的 DesignData 上下文。 这是WP8吧？

下面是LongListSelector的示例 

<phone:LongListSelector x:Name="myAccountLLS" DataContext="{Binding DVM, ElementName=phoneApplicationPage}" ItemsSource="{Binding DogecoinsList}"  
                        d:DataContext="{d:DesignData SampleWallets/DefaultWallets.xaml}"/>

注意d:DataContext="{d:DesignData SampleWallets/DefaultWallets.xaml}"，这告诉设计人员在设计时 DataContext 应该指向包含数据集的静态文件。

LLS 的项模板

<phone:LongListSelector.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <TextBlock Text="{Binding DogecoinAlias}" Foreground="Black" FontFamily="Portable User Interface" FontSize="20" Margin="10,5,0,0"/>
            <TextBlock Text="{Binding DogecoinValue}" Foreground="#FF33AA33" FontSize="14" Margin="0,0,10,0" HorizontalAlignment="Right" FontFamily="Portable User Interface"></TextBlock>
            <TextBlock Text="{Binding DogecoinAddress}" Foreground="#FF3333AA" FontFamily="Portable User Interface" FontSize="14" Margin="10,0,0,5" Grid.Row="1"/>
            <Line StrokeThickness="2" Stroke="#FF000000" X2="500" StrokeDashArray="1 1" Grid.Row="1" VerticalAlignment="Bottom" Margin="0"/>
        </Grid>
    </DataTemplate>
</phone:LongListSelector.ItemTemplate>

SampleWallets/DefaultWallets.xaml，这只是创建了DogecoinViewModel类的静态定义。 其中DogeCoinModel只是一个具有一些公共财产的类。

<vm:DogecoinViewModel
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vm="clr-namespace:ChubosaurusDogecoin"
    BindingTestValue="BindingTestValue"
    >
    <vm:DogecoinViewModel.DogecoinsList>
        <vm:DogecoinModel DogecoinAddress="DET7C2DUpqKe2g34yFr8AmQLK3FKaMvKah" DogecoinAlias="Chubosaurus Software" DogecoinCategory="Cold Wallets" DogecoinValue="2000.12"></vm:DogecoinModel>
        <vm:DogecoinModel DogecoinAddress="DT8oXk7PHRRCzSkxmxLVJCzkbUjifsuEcRe" DogecoinAlias="DogeAPI" DogecoinCategory="API Wallets" DogecoinValue="2934.1928"></vm:DogecoinModel>
        <vm:DogecoinModel DogecoinAddress="DTnt7VZqR5ofHhAxZuDy4m3PhSjKFXpw3e" DogecoinAlias="DogeChain" DogecoinCategory="API Wallets" DogecoinValue="1200000.12"></vm:DogecoinModel>
        <vm:DogecoinModel DogecoinAddress="DTnt7VZqR5ofHhAxZuDy4m3PhSjKFXpw3e" DogecoinAlias="DogeChain2" DogecoinCategory="API Wallets" DogecoinValue="200000.13"></vm:DogecoinModel>
        <vm:DogecoinModel DogecoinAddress="DTnt7VZqR5ofHhAxZuDy4m3PhSjKFXpw3e" DogecoinAlias="DogeChain3" DogecoinCategory="API Wallets" DogecoinValue="400000.14"></vm:DogecoinModel>
        <vm:DogecoinModel DogecoinAddress="DTnt7VZqR5ofHhAxZuDy4m3PhSjKFXpw3e" DogecoinAlias="DogeChain4" DogecoinCategory="API Wallets" DogecoinValue="500000.15"></vm:DogecoinModel>
        <vm:DogecoinModel DogecoinAddress="DTnt7VZqR5ofHhAxZuDy4m3PhSjKFXpw3e" DogecoinAlias="DogeChain5" DogecoinCategory="API Wallets" DogecoinValue="600000.16"></vm:DogecoinModel>
    </vm:DogecoinViewModel.DogecoinsList>       
</vm:DogecoinViewModel>

如果一切顺利，它应该显示在设计视图中，而无需部署。

因此，多亏了Chubosaurus的"答案"，它没有解决我的问题，我被迫在Google上搜索"XAML for loop"，并提出了ItemsControl。 找到了一个关于它的教程，发现这就是我需要的，但不太知道如何对它应用数据绑定，并在 StackOverflow 上找到了另一个问题：

项网格中显示的控件

这表明我需要将 Items[0] 中的 Entries 数组绑定到 ItemsControl 声明中的 ItemsSource。

所以无论如何，这就是我最终得到的：

<PivotItem
    x:Uid="Monday"
    Margin="19,14.5,4,0"
    Header="M"
    DataContext="{Binding Monday}"
    d:DataContext="{Binding Days[0], Source={d:DesignData Source=/DataModel/DayData.json, Type=data:SampleDataSource}}"
    CommonNavigationTransitionInfo.IsStaggerElement="True">
    <Grid Margin="0,0,12,0">
        <ItemsControl Name="calendar" ItemsSource="{Binding Entries}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding StartTime}" Margin="0,0,10,5"/>
                        <TextBlock Text="{Binding Title}" Grid.Column="1"/>
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</PivotItem>

它与此示例数据文件相结合：

{
    "Days": [
        {
            "Name": "Monday",
            "Entries": [
                {
                    "Title": "Wake Up",
                    "Content": "",
                    "StartTime": "6:00:00",
                    "Duration": "0:00:00"
                },
                {
                    "Title": "Prayer/Scripture Study",
                    "Content": "",
                    "StartTime": "6:00:00",
                    "Duration": "0:20:00"
                },
                {
                    "Title": "Breakfast; 1st supps",
                    "Content": "",
                    "StartTime": "6:20:00",
                    "Duration": "0:30:00"
                },
                {
                    "Title": "Work",
                    "Content": "Rainbird",
                    "StartTime": "7:30:00",
                    "Duration": "8.5"
                }
            ]
        }
    ]
}

这实际上产生了预期的结果：http://gyazo.com/1e80c0c93cef79f7e8f4084203044e3f

现在，如果我能弄清楚如何使标题文本变小......

相关文章：