There are 3 posts tagged Windows Phone.
Few hours ago my second application for Windows Phone just released, this time I made application for Build Stuff conference. Just check this out and please let me know about any issue or things to improve, via mail pawel@sawicz.eu or in comment below.
Of course it’s first release, and application will be updated if any new speaker or session come out.
Windows Store : http://www.windowsphone.com/pl-pl/store/app/buildstuff/202f5800-8081-45d4-845c-ab5d4a1f30db
See ya on Build Stuff!
When we are creating Windows Phone application first thing that we will be using is Grid
Grid, it’s our base for creating our world in devices. In this post I want to approach closer this topic. First thought is, how to use it ? and why it’s so powerful ?
Let’s me answer. It’s quite powerful mechanism because <Grid> can be our box for others items like (list box, text block etc.).
|
1 2 3 |
</Grid> <TextBlock Text="Some Text"/> </Grid> |
Moreover you can nest <Grid> inside <ListBox> or similar items.
|
1 2 3 4 5 |
<ListBox x:Name="SpeakerListBox" /> <Grid> </Grid> </ListBox> |
<Grid> has got various members, for declaring rows and columns we have to use <Grid.RowDefinitions> and <Grid.ColumnDefinitions> by these members we can declare width of column, and height of row.
Example implementation :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition Height="*"/> <RowDefinition Height="200" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> </Grid> |
As you can see I made three rows, and four columns. Now if you want place something on specific column or row, it’s similar to game “Battleship“. Let’s place text box, with help comes Grid.Row and Grid.Column.
<TextBox Grid.Row="0" Grid.Column="1" />
Notice: good practice – you should implement whole sizes at this step (by Row-Column Definitions), because in my opinion using fixed width and height at items property is mistake (of course sometimes you have to use item property), it’s like clothes, you want them to well fit on your body, you do not resize your body to clothes.
Notice: When you are designing your UI by the <Grid> make sure that you are include margin inside these definitions, I think it’s good practices to define spacing by this mechanism.
Nesting
You can define <Grid> inside of <ListBox> (i.e), and you can form <ListBox> view as you wish, it’s very helpful to create custom view of listbox.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<Grid Grid.Row="2"> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="24"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="24"/> </Grid.ColumnDefinitions> <TextBox Grid.Row="0" Grid.Column="1"/> <ListBox Grid.Row="1" Grid.Column="1"> <ListBoxItem> <Grid> <Grid.RowDefinitions> <RowDefinition Height="100" /> <RowDefinition Height="12"/> <RowDefinition Height="150"/> <RowDefinition Height="12"/> <RowDefinition Height="80"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"/> <ColumnDefinition Width="12"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Image Grid.Row="0" Grid.Column="0" Source="/Assets/Images/Bill-Gates.jpg"/> <TextBlock Grid.Row="0" Grid.Column="2" Text="Bill Gates MS CEO" VerticalAlignment="Center" HorizontalAlignment="Left" /> <ListBox Grid.Row="2" Grid.ColumnSpan="3"> <ListBoxItem> <TextBlock Text="Aenean ac ipsum quam. Nunc condimentum mauris justo, nec interdum erat adipiscing nec. Praesent lacinia est ac sem scelerisque, tincidunt tincidunt nisi ullamcorper. Nam neque erat, gravida ut quam non, vestibulum tempor diam. Duis ut enim diam. Sed nulla augue, tempor eget suscipit ut, cursus sit amet nisi. Integer vel fringilla velit. Suspendisse suscipit metus in nisi viverra commodo. Morbi venenatis interdum tortor eget hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. " TextWrapping="Wrap"/> </ListBoxItem> </ListBox> <Button Grid.Row="4" Grid.ColumnSpan="3" Content="Click me"/> </Grid> </ListBoxItem> </ListBox> </Grid> |
As you can see I didn’t use here fixed height, width. Even margins are implemented inside Row-Column Definitions. Of course this grid we can use inside DataTemplate, so if we have dynamic render data.
|
1 2 3 4 5 6 |
<ListBox.ItemTemplate> <DataTemplate> <Grid> </Grid> </DataTemplate> </ListBox.ItemTemplate> |
Conclusion : When you are modeling UI remember to use grid, and try to not use margin,height,width properties. It’s much more maintainable.
I would like to show you, good library to working with REST architecture. Nowadays REST is getting more popular because it’s very simple API, even ASP.NET MVC support this as default API service.
RESTSharp, is powerful library for any kind of .NET technology. Especially for Windows Phone where you have to use REST or SOAP to communicate with your external data. I came across RESTSharp when I was working on Project for Imagine Cup 2013. It saves me, a lot of time. RestSharp support asynchronously actions as well as windows phone because it is the main presumption of programming on that platform. I would like to show you few code block of using RESTSharp. At the begging basics and then in the next blog post some advance methods of using library with async.
|
1 2 3 |
var client = new RestClient("192.168.0.1"); var request = new RestRequest("api/item/", Method.GET); var queryResult = client.Execute<List<Items>>(request).Data; |
First, we have to make a connection with server where API is located. Then we add physical path to specific API controller, and choose method of connection (GET, POST, DELETE, PUT etc.). Next step is create a query to our REST API services, our result will be list of Item, it’s highly recommended to use that type deserialization, now we can easily get access just adding .Data at the end of statement.
Now let’s look at Method.POST.
|
1 2 3 4 5 6 7 8 9 |
var client = new RestClient("http://192.168.0.1"); var request = new RestRequest("api/item/", Method.POST); request.RequestFormat = DataFormat.Json; request.AddBody(new Item { ItemName = someName, Price = 19.99 }); client.Execute(request); |
client and request stay same like in first example, but there is one change in method of connection, please set Method.POST. Next step is add body to our request create model that is expected in API controller, and finally last line, execute our request.
If we want run delete method, just use Method.DELETE
|
1 2 3 4 5 |
var item = new Item(){//body}; var client = new RestClient("http://192.168.0.1"); var request = new RestRequest("api/item/{id}", Method.DELETE); request.AddParameter("id", idItem); client.Execute(request) |
Declaring client stay same like in other cases, request has small change, first you have to add path with parameter and define method of connection Method.GET. Moreover, we have to add to request one more property, define parameter {id} and what values its get. Finally execute request.
