Data Binding i StringFormat w Windows Phone 7

Tworząc aplikacje często spotykamy się z przypadkiem, kiedy chcemy stworzyć listę obiektów, które pobieramy z bazy danych. Często są to pojedyńcze listy, jak lista zakupów, lista kontaktów, lista państw itp. W WPF, korzystając z XAMLa możemy to zrobić poprzez mechanizm Data Binding, obszerny artykuł znajduje się na MSDNie Data Binding Overview

Co jeśli interesuje nas lista wieloelementowa, która zawierałaby wiele pól danych z jednego wiersza, oraz miała być ładnie sformatowana pod względem ustawienia elementów (coś a’la centrum SMS albo klient email) oraz formatu liczb? Do tego celu możemy użyć również mechanizmu Data Binding w celu połączenia danych, Grid w celu ustawienia danych, oraz StringFormat w celu ładnego przedstawienia.

Korzystamy z bazy danych umieszczonej w artykule Baza Danych w Windows Phone 7

W pliku MainPage.xaml.cs wystarczy, że podłączymy naszą bazę danych do kontekstu strony

[csharp]

public MainPage()
{
InitializeComponent();
// Set the data context of the listbox control to the sample data
this.DataContext = App.ViewModel;

}

[/csharp]

W ten sposób, cała strona podłączona jest już do źródła danych – ma tzw. kontekst, którego będzie mogła korzystać do pobierania, usuwania itp.  danych w bazie.

Teraz przechodzimy do najważniejszego pliku – MainPage.xaml. Tworzymy w tej chwili szablon każdego elementu (każdego wiersza tabeli), który będzie formatowany zawsze w ten sam sposób. Należy go umieścić w specjalnej przestrzeni – phone:PhoneApplicationPage.Resources

[xaml]

<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key=”EntriesListBoxItemTemplate”>
<Border
Background=”{StaticResource TransparentBrush}”
Padding=”20″>
<Grid HorizontalAlignment=”Stretch” Background=”{StaticResource TransparentBrush}”>

<Grid.ColumnDefinitions>
<ColumnDefinition Width=”100″ />
<ColumnDefinition Width=”100″ />
<ColumnDefinition Width=”80″ />
<ColumnDefinition Width=”80″ />
<ColumnDefinition Width=”*” />
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition Height=”60″ />
<RowDefinition Height=”60″ />
</Grid.RowDefinitions>

<Grid Grid.Column=”0″ Grid.ColumnSpan=”1″ Grid.Row=”0″ Grid.RowSpan=”2″ Background=”{StaticResource PhoneAccentBrush}” Width=”110″ Height=”110″>
<TextBlock
x:Name=”theRectangle”
Text=”{Binding ItemFuelMill, StringFormat=\{0:0.00 \} }”
Foreground=”White”
FontSize=”{StaticResource PhoneFontSizeExtraLarge}”
VerticalAlignment=”Center” HorizontalAlignment=”Right”  Margin=”0,0,0,0″ />
</Grid>

<TextBlock
x:Name=”theTextBlock”
Text=”{Binding ItemDate, StringFormat=\{0: MMMM d\, yyyy\} }”
FontSize=”{StaticResource PhoneFontSizeLarge}”
Grid.Column=”1″ Grid.ColumnSpan=”4″
Grid.Row=”0″ Grid.RowSpan=”1″
VerticalAlignment=”Top” Margin=”0, 12, 0, 0″/>

<TextBlock
Text=”{Binding ItemDist, StringFormat=\{0:0.0 \}km }”
FontSize=”{StaticResource PhoneFontSizeSmall}”
Grid.Column=”1″ Grid.ColumnSpan=”1″
Grid.Row=”1″ Grid.RowSpan=”1″
VerticalAlignment=”Top” HorizontalAlignment=”Right” Margin=”0, 0, 0, 0″/>

<TextBlock
Text=”{Binding ItemRefuel, StringFormat=\{0:0.0 \}l }”
FontSize=”{StaticResource PhoneFontSizeSmall}”
Grid.Column=”2″ Grid.ColumnSpan=”1″
Grid.Row=”1″ Grid.RowSpan=”1″
VerticalAlignment=”Top” HorizontalAlignment=”Right” Margin=”0, 0, 0, 0″/>

<TextBlock
Text=”{Binding ItemFPrice, StringFormat=\{0:0.0 \}PLN }”
FontSize=”{StaticResource PhoneFontSizeSmall}”
Grid.Column=”3″ Grid.ColumnSpan=”1″
Grid.Row=”1″ Grid.RowSpan=”1″
VerticalAlignment=”Top” HorizontalAlignment=”Right” Margin=”0, 0, 0, 0″/>

</Grid>
</Border>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>

[/xaml]

DataTemplate to kontener, który będzie nam przechowywał szablon “jedego wiesza z tabeli”, nazwaliśmy go EntriesListBoxItemTemplate. Kontrolka Grid służy nam do umiejscowienia wszystkich elementów, które mają znaleźć się na liście, textblock to kontrolka, która będzie nam wyświetlać tekst. Cała magia Data Bindingu i StringFormatu odbywa się tutaj:

[xaml]

Text=”{Binding ItemRefuel, StringFormat=\{0:0.0 \}l }”

[/xaml]

Ta linijka oznacza mniej więcej: kiedy będziesz przerabiał każdy wiesz, weź z wiersza wartość elementu ItemRefuel, oraz nadaj mu format {0:0.0}l  – czyli jeśli będziemy mieć element o wartości 7.53, kontrolka wyświetli nam 7.5l (l tutaj po prostu oznaczają litry).

Bardzo ważne w tym przypadku są tzw. escape charactery, które powiedzą mechanizmowi, że nawiasy nie należą do Bindingu, lecz do właściwości StringFormat. Należy zaznaczyć, że operacja ta ma na celu tylko wyświetlać dane, a nie udostępniać do modyfikacji. Z tego powodu działa tu tryb OneWay – czyli “tylko pobieraj, nie wysyłaj do bazy niczego”, toteż możemy sobie pozwolić na takie modyfikacje.

 

Co do StringFormat działającego w trybie TwoWay, istnieje również alternatywa wspomniana w artykule z MSDN – stworzenie własnego konwertera – klasy, która będzie implementowała interfejs “IValueConverter”, przez to funkcję Convert (oraz ConvertBack, kiedy stosujemy Binding z opcją TwoWay). Bardzo dobry i obszerny przykład przedstawiam poniżej:

Data Binding and StringFormat in Silverlight « Matt Duffield.

Baza danych w Windows Phone 7

W najnowszej wersji WP7 Mango została udostępniona obsługa natywnej bazy danych opartej na silniku SQL CE. W tym wpisie przedstawie prostą bazę do obsługi aplikacji, która nadzoruje spalanie naszego samochodu. Przykład ten jest oparty na przykładowej aplikacji ToDo z sampli dotyczących WP 7.5. Baza ta będzie przydatna w następnym wpisie dotyczącym Data Bindning.

Nie jest to materiał “szkoleniowy”, jedynie baza pod nastpęny wpis, być może w przyszłości przerobię ten wpis tak, aby wszystko było wyjasnione.

(Szerzej na ten temat: Windows Phone 7 : Using Local Database for Application)

Najpierw tworzymy naszą tabelę, przechowującą dane. Należy okerślić wszystkie kolumny – ich nazwy, typ i dodatkowe parametry

[csharp]

 

public class ToDoDataContext : DataContext
{
// Pass the connection string to the base class.
public ToDoDataContext(string connectionString)
: base(connectionString)
{ }

// Specify a table for the items.
public Table<Entries> Items;

}

 

[/csharp]

Entries będzie naszą Tabelą danych.

[csharp]

[Table]
public class Entries : INotifyPropertyChanged, INotifyPropertyChanging
{

// Define ID: private field, public property, and database column.
private int _EntriesId;

[Column(IsPrimaryKey = true, IsDbGenerated = true, DbType = “INT NOT NULL Identity”, CanBeNull = false, AutoSync = AutoSync.OnInsert)]
public int EntriesId
{
get { return _EntriesId; }
set
{
if (_EntriesId != value)
{
NotifyPropertyChanging(“EntriesId”);
_EntriesId = value;
NotifyPropertyChanged(“EntriesId”);
}
}
}

// Data tankowania
private DateTime _itemDate;

[Column]
public DateTime ItemDate
{
get { return _itemDate.Date; }
set
{
if (_itemDate != value)
{
NotifyPropertyChanging(“ItemDate”);
_itemDate = value;
NotifyPropertyChanged(“ItemDate”);
}
}
}

// Odleglosc przejechana
private double _itemDist;

[Column]
public double ItemDist
{
get { return _itemDist; }
set
{
if (_itemDist != value)
{
NotifyPropertyChanging(“ItemDist”);
_itemDist = value;
NotifyPropertyChanged(“ItemDist”);
}
}
}

// Ile zatankowano
private double _itemRefuel;

[Column]
public double ItemRefuel
{
get { return _itemRefuel; }
set
{
if (_itemRefuel != value)
{
NotifyPropertyChanging(“ItemRefuel”);
_itemRefuel = value;
NotifyPropertyChanged(“ItemRefuel”);
}
}
}

// Cena paliwa za jednostke
private double _itemFPrice;

[Column]
public double ItemFPrice
{
get { return _itemFPrice; }
set
{
if (_itemFPrice != value)
{
NotifyPropertyChanging(“ItemFPrice”);
_itemFPrice = value;
NotifyPropertyChanged(“ItemFPrice”);
}
}
}

// Komentarz
private string _itemComment;

[Column]
public string ItemComment
{
get { return _itemComment; }
set
{
if (_itemComment != value)
{
NotifyPropertyChanging(“ItemComment”);
_itemComment = value;
NotifyPropertyChanged(“ItemComment”);
}
}
}

// Spalanie
private double _itemFuelMill;

[Column]
public double ItemFuelMill
{
get { return _itemFuelMill; }
set
{
if (_itemFuelMill != value)
{
NotifyPropertyChanging(“ItemFuelMill”);
_itemFuelMill = value;
NotifyPropertyChanged(“ItemFuelMill”);
}
}
}

 

// Version column aids update performance.
[Column(IsVersion = true)]
private Binary _version;

#region INotifyPropertyChanged Members

public event PropertyChangedEventHandler PropertyChanged;

// Used to notify that a property changed
private void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}

#endregion

#region INotifyPropertyChanging Members

public event PropertyChangingEventHandler PropertyChanging;

// Used to notify that a property is about to change
private void NotifyPropertyChanging(string propertyName)
{
if (PropertyChanging != null)
{
PropertyChanging(this, new PropertyChangingEventArgs(propertyName));
}
}

#endregion
}

[/csharp]

Kiedy mamy już gotową bazę danych, tworzymy Model, który będzie obsługiwał dane, i zwracał je nam do mechanizmu Data Binding

[csharp]

public class ToDoViewModel : INotifyPropertyChanged
{
// LINQ to SQL data context for the local database.
private ToDoDataContext toDoDB;

// Class constructor, create the data context object.
public ToDoViewModel(string toDoDBConnectionString)
{
toDoDB = new ToDoDataContext(toDoDBConnectionString);
}

// All entries.
private ObservableCollection<Entries> _allEntriess;
public ObservableCollection<Entries> AllEntriess
{
get { return _allEntriess; }
set
{
_allEntriess = value;
NotifyPropertyChanged(“AllEntriess”);
}
}
public ObservableCollection<Entries> AllEntriessASC // Loads only once for chart
{
get
{
var EntriessInDB = from Entries entry in toDoDB.Items
orderby entry.ItemDate ascending
select entry;
ObservableCollection<Entries>  _allEntriessASC = new ObservableCollection<Entries>(EntriessInDB);
return _allEntriessASC;
}
}

 

// Query database and load the collections and list used by the pivot pages.
public void LoadCollectionsFromDatabase()
{

// Specify the query for all to-do items in the database.
var EntriessInDB = from Entries entry in toDoDB.Items
orderby entry.ItemDate descending
select entry;

// Query the database and load all to-do items.
AllEntriess = new ObservableCollection<Entries>(EntriessInDB);
}

 

// Add a to-do item to the database and collections.
public void AddEntries(Entries newEntries)
{
// Fuel Millage Logic
newEntries.ItemFuelMill = (newEntries.ItemRefuel / newEntries.ItemDist) * 100;

// Add a to-do item to the data context.
toDoDB.Items.InsertOnSubmit(newEntries);

// Save changes to the database.
toDoDB.SubmitChanges();

// Add a to-do item to the “all” observable collection.
AllEntriess.Insert(0,newEntries);

}

// Remove a to-do task item from the database and collections.
public void DeleteEntries(Entries toDoForDelete)
{

// Remove the to-do item from the “all” observable collection.
AllEntriess.Remove(toDoForDelete);
// Remove the to-do item from the data context.
toDoDB.Items.DeleteOnSubmit(toDoForDelete);

// Save changes to the database.
toDoDB.SubmitChanges();
}

 

// Write changes in the data context to the database.
public void SaveChangesToDB()
{
toDoDB.SubmitChanges();
}

#region INotifyPropertyChanged Members

public event PropertyChangedEventHandler PropertyChanged;

// Used to notify Silverlight that a property has changed.
private void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
#endregion
}

[/csharp]

 

Teraz kiedy mamy już przygotowane dane, najłatwiej jest zrobić sobie do nich referencję w pliku App.xaml.cs. Musimy również wskazać gdzie ma być przechowywana nasza baza danych. WP 7.5 wykorzystujemy mechanizm isolated storage. Warto dodać, że cały mechanizm, który tu opisujemy działa na silniku SQL CE, dostępnym dopiero w WP 7.5

 

[csharp]

private static ToDoViewModel viewModel;
public static ToDoViewModel ViewModel
{
get { return viewModel; }
}

 

public App()
{
// Global handler for uncaught exceptions.
UnhandledException += Application_UnhandledException;

// Standard Silverlight initialization
InitializeComponent();

// Phone-specific initialization
InitializePhoneApplication();

// Show graphics profiling information while debugging.
if (System.Diagnostics.Debugger.IsAttached)
{
PhoneApplicationService.Current.UserIdleDetectionMode = IdleDetectionMode.Disabled;
}

// Specify the local database connection string.
string DBConnectionString = “Data Source=isostore:/entries.sdf”;

// Create the database if it does not exist.
using (ToDoDataContext db = new ToDoDataContext(DBConnectionString))
{
if (db.DatabaseExists() == false)
{
// Create the local database.
db.CreateDatabase();

// Save categories to the database.
db.SubmitChanges();
}
}

// Create the ViewModel object.
viewModel = new ToDoViewModel(DBConnectionString);

// Query the local database and load observable collections.
viewModel.LoadCollectionsFromDatabase();

}

[/csharp]

Teraz nasza aplikacja ma pełny dostęp do danych. Całkiem sporo kodu jak na obsługę bazy danych, czyż nie? Jednak cała ta “nadmiarowość” bardzo szybko ukaże wszelkie zalety tego systemu. o Tym w następnym wpisie.

Chris Sainty: Windows Phone 7–Asynchronous Programming

One thing that will strike you quickly if you go to make an app that communicates over the internet is that everything has to be done asynchronously. While this is bound to annoy at first, it is actually a good design decision by the development team because it forces the developer to keep the UI responsive. Sadly there is at least one instance where they broke their own rules but we will get to that another time, I will just say watch out for the Image control.

My preferred way of handling asynchronous programing is with a callback structure that uses delegates/lambdas. You could also use events but I find most of the memory leaks I create in applications are to do with events and not releasing subscriptions. Luckily for us we now have lambdas that make callbacks a piece of cake to write, you just need to watch out for a few gotchas. If you prefer delegates to lambdas, then the second point here will not apply to you, but the first will still catch the very novice.

 

Pod linkiem, asynchroniczne czytanie twitter’a poprzez json

za pomocą Chris Sainty: Windows Phone 7–Asynchronous Programming.