WP7 Building the UI(.xaml) from a list(.cs)
i'm .Net developper and new to WP7 development.What I'm trying to do is to built my interface depending on how many items i have in a list. My items are agences with a name, adress,2 phone numbers and one image.
In my .cs file:
Agence agence1 = new Agence();
agence1.Name = "Name1";
agence1.Adress = " Adress1";
agence1.Telephone = "Tel1";
agence1.Telephone2 = "Tel01";
agence1.Region = "Region1";
agence1.Source=newBitmapImage(newUri(@"/App/Images/call.jpg",UriKind.Relative));
listAgences.Add(agence1);
In my xaml file for each agence:
<Grid x:Name="Agence1" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="280"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0">
<TextBlock Height="30" HorizontalAlignment="Center" Name="textBlock1" Text="{Binding listAgences[0].Nom}" VerticalAlignment="Top" FontSize="18" Foreground="Black" FontWeight="Bold" />
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="1">
<TextBlock Height="30" HorizontalAlignment="Center" Name="textBlock5" Text="..." VerticalAlignment="Top" FontSize="15" Foreground="Black" />
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="0">
开发者_StackOverflow <TextBlock Height="30" HorizontalAlignment="Center" Name="textBlock2" Text="Adresse" VerticalAlignment="Top" FontSize="18" Foreground="Black" />
</StackPanel>
<StackPanel Grid.Row="2" Grid.Column="0">
<TextBlock Height="30" HorizontalAlignment="Center" Name="textBlock3" Text="Téléphone :" VerticalAlignment="Top" FontSize="18" Foreground="Black" />
</StackPanel>
<StackPanel Grid.Row="2" Grid.Column="1">
<TextBlock Height="50" HorizontalAlignment="Center" Name="textBlock6" Text="..." VerticalAlignment="Bottom" FontSize="15" Foreground="Black" Width="279" Padding="10,15,0,0"/>
</StackPanel>
<StackPanel Grid.Row="2" Grid.Column="2" Height="50" VerticalAlignment="Bottom" Margin="0">
<Image Height="30" Name="image1" HorizontalAlignment="Center" Source="/App;component/Images/call.png" Margin="0,10,0,0" />
</StackPanel>
<StackPanel Grid.Row="4" Grid.Column="0">
<TextBlock Height="30" HorizontalAlignment="Center" Name="textBlock4" Text="Telephone 2 :" VerticalAlignment="Top" FontSize="18" Foreground="Black" />
</StackPanel>
<StackPanel Grid.Row="3" Grid.Column="1">
<TextBlock Height="50" HorizontalAlignment="Center" Name="textBlock7" Text="..." VerticalAlignment="Bottom" FontSize="15" Foreground="Black" Width="279" Padding="10,15,0,0"/>
</StackPanel>
</Grid>
Right now i have 4 agences hardcoded added to my list. So in my xaml file i have four times the coded above in xaml. Soon i'll consume a webservice to get agences. What i want is to have only one time the code above and do something like that :
In MVC pattern i would do for a menu something like that in my aspx page, :
<ul>
<% foreach (var agence in listAgences) { %> <li><%: agence.Name %></li> <% } %>
... building the UI
</ul>
I don't want a menu in my phone app its just a quick exemple.I don't know how to do in WPF/xaml. Can i do that in the xaml file or do i have to built the interface in the .cs file like : this.add(Grid); this.Add(StackPanel); ...
Thx for your help.
Firstly, WP7 uses Silverlight, not WPF.
In your XAML you are putting all your TextBlocks in separate StackPanels. Why?
Also, the allocated row numbers don't match the row definitions and you are setting the height on items unnecessarily.
When you say "in MVC pattern"... you show an example using HTML. I assume you mean when you are using ASP.NET MVC (based on the sytax & embedded code). Your example has nothing to do with the actual MVC pattern.
To try and solve your problem, which comes down to displaying a list of objects, have a look at what is created by default when you create a new "databound application". Instead of using the ItemViewModel you would use an Agence
. Then look at the DataTemplate in MainPage.xaml to see how you could customize the display of the contents of your object.
精彩评论