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.

Creating an ASP.NET report using Visual Studio 2010

This tutorial walks you through creating an ASP.NET report based on the Northwind sample database. It shows how to add a client report definition file (RDLC), create a dataset for the RDLC, define queries using LINQ to Entities, design the report and add a ReportViewer web control to render the report in a ASP.NET web page. The report will have a chart control. The result can be filtered by two drop downs at the top.. At the end of the walkthrough, you should have a UI like the following. As shown, there is a product list report with an embedded chart. The chart shows the sum of Unit price for a given category. It is possible to filter the results by Category and Supplier. The drop downs auto post back when the selection is changed. This demo uses Visual Studio 2010 RTM.

za pomocą Creating an ASP.NET report using Visual Studio 2010 .

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.

String Format for DateTime [C#]

This example shows how to format DateTime using String.Format method. All formatting can be done also using DateTime.ToString method.

Custom DateTime Formatting

There are following custom format specifiers y (year),M (month), d (day), h (hour 12),H (hour 24), m (minute), s (second),f (second fraction), F (second fraction, trailing zeroes are trimmed), t (P.M or A.M) and z(time zone).

Following examples demonstrate how are the format specifiers rewritten to the output.

[csharp]

// create date time 2008-03-09 16:05:07.123
DateTime dt = new DateTime(2008, 3, 9, 16, 5, 7, 123);

String.Format(“{0:y yy yyy yyyy}”, dt);  // “8 08 008 2008”   year
String.Format(“{0:M MM MMM MMMM}”, dt);  // “3 03 Mar March”  month
String.Format(“{0:d dd ddd dddd}”, dt);  // “9 09 Sun Sunday” day
String.Format(“{0:h hh H HH}”,     dt);  // “4 04 16 16”      hour 12/24
String.Format(“{0:m mm}”,          dt);  // “5 05”            minute
String.Format(“{0:s ss}”,          dt);  // “7 07”            second
String.Format(“{0:f ff fff ffff}”, dt);  // “1 12 123 1230”   sec.fraction
String.Format(“{0:F FF FFF FFFF}”, dt);  // “1 12 123 123”    without zeroes
String.Format(“{0:t tt}”,          dt);  // “P PM”            A.M. or P.M.
String.Format(“{0:z zz zzz}”,      dt);  // “-6 -06 -06:00”   time zone

[/csharp]

You can use also date separator / (slash) and time sepatator : (colon). These characters will be rewritten to characters defined in the current DateTimeForma­tInfo.DateSepa­rator and DateTimeForma­tInfo.TimeSepa­rator.

[csharp]

// date separator in german culture is “.” (so “/” changes to “.”)
String.Format(“{0:d/M/yyyy HH:mm:ss}”, dt); // “9/3/2008 16:05:07” – english (en-US)
String.Format(“{0:d/M/yyyy HH:mm:ss}”, dt); // “9.3.2008 16:05:07” – german (de-DE)

[/csharp]

 

Here are some examples of custom date and time formatting:

 

[csharp]

// month/day numbers without/with leading zeroes
String.Format(“{0:M/d/yyyy}”, dt);            // “3/9/2008”
String.Format(“{0:MM/dd/yyyy}”, dt);          // “03/09/2008”

// day/month names
String.Format(“{0:ddd, MMM d, yyyy}”, dt);    // “Sun, Mar 9, 2008”
String.Format(“{0:dddd, MMMM d, yyyy}”, dt);  // “Sunday, March 9, 2008”

// two/four digit year
String.Format(“{0:MM/dd/yy}”, dt);            // “03/09/08”
String.Format(“{0:MM/dd/yyyy}”, dt);          // “03/09/2008”

[/csharp]

 

Standard DateTime Formatting

 

In DateTimeForma­tInfo there are defined standard patterns for the current culture. For example property ShortTimePatternis string that contains value h:mm tt for en-US culture and value HH:mm for de-DE culture.

Following table shows patterns defined in DateTimeForma­tInfo and their values for en-US culture. First column contains format specifiers for the String.Format method.

 

Specifier DateTimeFormatInfo property Pattern value (for en-US culture)
t ShortTimePattern h:mm tt
d ShortDatePattern M/d/yyyy
T LongTimePattern h:mm:ss tt
D LongDatePattern dddd, MMMM dd, yyyy
f (combination of D and t) dddd, MMMM dd, yyyy h:mm tt
F FullDateTimePattern dddd, MMMM dd, yyyy h:mm:ss tt
g (combination of d and t) M/d/yyyy h:mm tt
G (combination of d and T) M/d/yyyy h:mm:ss tt
m, M MonthDayPattern MMMM dd
y, Y YearMonthPattern MMMM, yyyy
r, R RFC1123Pattern ddd, dd MMM yyyy HH':'mm':'ss 'GMT' (*)
s SortableDateTi­mePattern yyyy'-'MM'-'dd'T'HH':'mm':'ss (*)
u UniversalSorta­bleDateTimePat­tern yyyy'-'MM'-'dd HH':'mm':'ss'Z' (*)
(*) = culture independent

Following examples show usage of standard format specifiersin String.Format method and the resulting output.

 

[csharp]

// create date time 2008-03-09 16:05:07.123

DateTime dt = new DateTime(2008, 3, 9, 16, 5, 7, 123);

String.Format(“{0:y yy yyy yyyy}”, dt); // “8 08 008 2008” year

String.Format(“{0:M MM MMM MMMM}”, dt); // “3 03 Mar March” month

String.Format(“{0:d dd ddd dddd}”, dt); // “9 09 Sun Sunday” day

String.Format(“{0:h hh H HH}”, dt); // “4 04 16 16” hour 12/24

String.Format(“{0:m mm}”, dt); // “5 05” minute

String.Format(“{0:s ss}”, dt); // “7 07” second

String.Format(“{0:f ff fff ffff}”, dt); // “1 12 123 1230” sec.fraction

String.Format(“{0:F FF FFF FFFF}”, dt); // “1 12 123 123” %
[/csharp]
za pomocą String Format for DateTime C#.