DataBinding XAML网格行定义WP8

Question

Specifically, I'm trying to figure out how to bind the number of elements to the size of a list. The size of the list is going to be unknown in design-space, and I need the number of rows generated to be dynamic. I then need to be able to populate two columns with data from subfields inside the list.

The most I've seen on anything of this type is setting the row definitions programmatically, but that still doesn't help with the designer view in VS. Am I going to be stuck debugging in order to see if the layouts are working properly, or is there some way to do this in designer?

Answer 1

If you want to see your dataset in the designer, you need to set the DesignData context of the element. This is WP8 right?

Here's an example for the LongListSelector

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

Pay attention to the d:DataContext="{d:DesignData SampleWallets/DefaultWallets.xaml}" , this tells the designer during design time DataContext should be pointing to a static file which contains the Dataset.

---

The ItemTemplate for the 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 this just creates a static definition of the DogecoinViewModel class. Where a DogeCoinModel is just a class with some public properites.

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

---

If all goes well it should display in the design view without the need to deploy.

Answer 2

So, thanks to Chubosaurus's "answer", which did nothing to address my question, I was driven to search "XAML for loop" on Google, and come up with ItemsControl. Found a tutorial on it, and discovered that's what I needed, but didn't quite know how to apply data binding to it and found this other question here on StackOverflow:

itemscontrol displayed in a grid

This showed me I needed to bind the Entries array in Days[0] to ItemsSource in the ItemsControl declaration.

So anyway, this is what I ended up with:

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

That is combined with this sample data file:

{
    "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"
                }
            ]
        }
    ]
}

And that actually yields the desired result: http://gyazo.com/1e80c0c93cef79f7e8f4084203044e3f

Now, if only I could figure out how to make header text smaller...