DataBinding XAML网格行定义WP8

Question

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

我在这种类型的任何事物上看到的最多的内容是以编程方式设置行定义，但这对于VS中的设计器视图仍然无济于事。 我是否要进行调试以查看布局是否正常工作，或者在设计器中有某种​​方法可以进行调试？

Answer 1

如果要在设计器中查看数据集，则需要设置元素的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的ItemTemplate

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

---

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

Answer 2

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

网格中显示的itemscontrol

这表明我需要将Days [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

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