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

現在，如果我能弄清楚如何使標題文本更小...