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＆＃34;回答＆＃34;，它没有解决我的问题，我被驱使搜索＆＃34; XAML for loop＆＃34;在谷歌上，并提出ItemsControl。找到了一个关于它的教程，发现了我需要的东西，但是我不太清楚如何对它应用数据绑定，并在StackOverflow上找到了另一个问题：

itemscontrol displayed in a grid

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

现在，如果我能弄清楚如何缩小标题文字......

DataBinding XAML Grid RowDefinitions WP8

2 个答案: