具体来说,我试图弄清楚如何将元素的数量绑定到列表的大小。 列表的大小在设计空间中将是未知的,我需要生成的行数是动态的。 然后,我需要能够使用列表中子字段中的数据填充两列。
我在这种类型的任何东西上看到的最多的是以编程方式设置行定义,但这仍然对 VS 中的设计器视图没有帮助。 我是否会为了查看布局是否正常工作而陷入调试状态,或者是否有某种方法可以在设计器中执行此操作?
如果要在设计器中查看数据集,则需要设置元素的 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
现在,如果我能弄清楚如何使标题文本变小......