Slides about .NET, Linq, Entity Framework, Windows Phone 7

Slides about .NET, Linq, Entity Framework, Windows Phone 7

I just uploaded some slides I made for the preparation of a scholarship project. I made a quick overview of .NET, C#, Linq, Entity Framework, Windows Phone 7… for people who already have experienced Java and/or C++.
It’s in French. Feel free to react and to post me your comments.


Je viens juste d’uploader des slides que j’ai faits pour la préparation d’un projet scolaire. J’y fait un rapide aperçu de .NET, C#, Linq, Entity Framework, Windows Phone 7… pour les personnes ayant déjà une expérience en Java et/ou C++.
N’hésitez pas à réagir et à poster vos commentaires.

Advertisements

How to properly implement a template in a ListBox with Windows Phone 7

How to properly implement a template in a ListBox with Windows Phone 7

One of the most common controls in Silverlight for Windows Phone 7 is definitely the ListBox.

Basic implementation
I order to implement a design for the ListBox items you may have seen the most common implementation:

[xml]
<!– from Scott Guthrie’s blog: http://weblogs.asp.net/scottgu/archive/2010/03/18/building-a-windows-phone-7-twitter-application-using-silverlight.aspx –>

<ListBox Height="521" HorizonalAlignment="Left" Margin="0,131,0,0" Name="listBox1" VerticalAlignment="Top" Width="476">

<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132">
<Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>
<StackPanel Width="370">
<TextBlock Text="{Binding UserName}" Foreground="#FFC8AB14" FontSize="28" />
<TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="24" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>

</ListBox>
[/xml]

As you may see, the template is directly included in the page’s xaml. In fact it works well, and it is pretty straight forward.

But there is two main issues with this implementation. First, the designer will not render it:

Designer rendering
Designer rendering

And secondly, you thus don’t have any way to factorize your code. Let’s say you want to render again an item the exact same way but somewhere else, you will have to copy the same code.

Better implementation
Now I will use another app that displays bank accounts.

Please, code better. And please factorize, and use personal user controls.

Create a new UserControl:

Create a new user control
Create a new user control

After that you can edit it like any other xaml file with a nice designer:

My new account control
My new account control

Do not forget to use the proper binding:

[xml]
<!– Account.xaml –>
<TextBlock Text="{Binding Name}" Foreground="{StaticResource PhoneAccentBrush}" FontWeight="ExtraBold" FontSize="32" VerticalAlignment="Top" />
<TextBlock Text="{Binding Number}" VerticalAlignment="Top" Margin="0,43,0,0" />
<TextBlock Text="{Binding Balance}" FontWeight="Light" FontSize="42" Margin="0,43,15,0" VerticalAlignment="Top" HorizontalAlignment="Right" />
<TextBlock TextAlignment="Right" Text="€" FontWeight="Light" FontSize="26" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,43,0,0" />
[/xml]

After that you can use your new control very easily:

[xml]
<!– Main page.xaml –>

<!– don’t forget to include the local namespace –>
xmlns:local="clr-namespace:MyApp"

<!– the list box using the proper template –>
<ListBox x:Name="MainListBox">
<ListBox.ItemTemplate>
<DataTemplate>
<local:Account/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
[/xml]

You may also notice that all you custom User Controls are present in the tool box:

That is all. You now have every tool in hands in order to properly use the ListBox templating.

Support orientation with a listbox and rotate animation on windows phone 7

Support orientation with a listbox and rotate animation on windows phone 7

Today I will show how to simply implement a windows phone 7 app that supports orientation with transition. I will also go through a common issue with the list box control.

Setting up the project

For this post I’ll use the default DataBoundApplication, I will also use the transition provided by the brand new Silverlight for windows phone toolkit (second, released in November 2010) : http://silverlight.codeplex.com/releases/view/55034.

Well, let’s do basics. Create a new DataBoundProject :

Default DataBoundApplication
Default DataBoundApplication

First, let’s make our app support the various transition provided by the toolkit. First, add a reference to Microsoft.Phone.Controls.Toolkit and go to the App.xaml.cs file:

[csharp]
// /App.xaml.cs
//…
private void InitializePhoneApplication()
{
if (phoneApplicationInitialized)
return;

// Create the frame but don’t set it as RootVisual yet; this allows the splash
// screen to remain active until the application is ready to render.
RootFrame = new TransitionFrame();
RootFrame.Navigated += CompleteInitializePhoneApplication;

// Handle navigation failures
RootFrame.NavigationFailed += RootFrame_NavigationFailed;

// Ensure we don’t initialize again
phoneApplicationInitialized = true;
}
//…
[/csharp]

Then edit the main page to support both orientations. Go to the first tag and edit the SupportedOrientation property to PortraitOrLandscape :

[xml]
<!–MainPage.xaml–>
<phone:PhoneApplicationPage
x:Class="WindowsPhoneDataBoundApplication1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!– … –>
[/xml]

Now we have an app that can support orientation and transition. Let’s activate the rotate transition when we change the orientation.

Support rotation on orientation change

I will derive from the PhoneApplicationPage class in order to create a new one that can rotate automatically, and then I will change all my pages for them to derive the new class and thus inherit the new auto-rotation behavior.

So, we need to create our AutoRotatePage class. I override the OnOrientationChange method so when it occurs we perform a rotation transition:

[csharp]
public class AutoRotatePage : PhoneApplicationPage
{
/// <summary>
/// This varialb eis needed in order to now what was the previous orientation
/// and then choose the proper rotation mode
/// </summary>
private Nullable<PageOrientation> _previousOrientation = null;

/// <summary>
/// When the orientation changes perform a rotate transition
/// </summary>
/// <param name="e"></param>
protected override void OnOrientationChanged(OrientationChangedEventArgs e)
{
base.OnOrientationChanged(e);

if (_previousOrientation == null)
return;

RotateTransition transitionElement = new RotateTransition();

// counter clockwise rotation
if (_previousOrientation == PageOrientation.LandscapeRight &&
e.Orientation == PageOrientation.PortraitUp ||
_previousOrientation == PageOrientation.PortraitUp &&
e.Orientation == PageOrientation.LandscapeLeft ||
_previousOrientation == PageOrientation.LandscapeLeft &&
e.Orientation == PageOrientation.PortraitDown ||
_previousOrientation == PageOrientation.PortraitDown &&
e.Orientation == PageOrientation.LandscapeRight)
transitionElement.Mode = RotateTransitionMode.In90Counterclockwise;
// clockwise rotation
else if (_previousOrientation == PageOrientation.LandscapeLeft &&
e.Orientation == PageOrientation.PortraitUp ||
_previousOrientation == PageOrientation.PortraitDown &&
e.Orientation == PageOrientation.LandscapeLeft ||
_previousOrientation == PageOrientation.LandscapeRight &&
e.Orientation == PageOrientation.PortraitDown ||
_previousOrientation == PageOrientation.PortraitUp &&
e.Orientation == PageOrientation.LandscapeRight)
transitionElement.Mode = RotateTransitionMode.In90Clockwise;
// 180 rotation
else
transitionElement.Mode = RotateTransitionMode.In180Clockwise;

var transition = transitionElement.GetTransition((PhoneApplicationPage)(((PhoneApplicationFrame)Application.Current.RootVisual).Content));
transition.Completed += delegate { transition.Stop(); };
transition.Begin();

_previousOrientation = e.Orientation;
}

/// <summary>
/// When leaving the page, clearing the orientation
/// </summary>
/// <param name="e"></param>
protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedFrom(e);

_previousOrientation = null;
}

/// <summary>
/// When comming to the page, initiate the orientation
/// </summary>
/// <param name="e"></param>
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);

_previousOrientation = Orientation;
}
}
[/csharp]

You may notice that I always keep track of the previous orientation. It is very important because I use it to know if I need to perform a clockwise or a counter clockwise transition. Thus I use the OnNavigatedFrom and OnNavigatedTo method in order to set and clean my previous orientation value. I also do it this way for another reason.
If you are in the main page on a portrait up orientation and then go to the detail view and changhe the orientation to landscape. The detail view will rotate, but when you’ll go back the main page will detect a change in the orientation and then perform an unneeded rotate transition. In order to avoid that, I use the navigation methods to clean the previous orientation variable so that the OnOrientationChange methods can behave properly.

Now, you just need to make your pages derive this new AutoRotatePage class.

[csharp]
// /MainPage.xaml.cs
// …
public partial class MainPage : AutoRotatePage
// …
[/csharp]

Don’t forget the xaml, after declaring the local namespace :

[xml]
<!–MainPage.xaml–>
<local:AutoRotatePage
x:Class="WindowsPhoneDataBoundApplication1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
xmlns:local="clr-namespace:WindowsPhoneDataBoundApplication1"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!– … –>

</local:AutoRotatePage>
[/xml]

Now you can compile and test your application. Everything behaves properly.

Rotate transition
Rotate transition

Support a vertical stretch in the ListBox

Now you may want to align right some element of the list box, for example the detail textblock. Let’s do so.

Edit the concerned textblock in the xaml file:

[xml]
<!–MainPage.xaml–>
<!– … –>
<StackPanel Margin="0,0,0,17">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right"/>
</StackPanel>
<!– … –>
[/xml]

You have now a right alignment of your elements:

Right Aligment on portrait
Right Aligment on portrait

But, if you go to the landscape mode, you will find an error in the layout.

right aligment on landscape fails
right aligment on landscape fails

You notice a gap between the detail text and the right border of the screen.

In order to fix this, you will need to create a new resource and apply it to the ListBox. Let’s got the App.xaml and declare it:

[xml]
<!–App.xaml–>
<!– … –>
<Application.Resources>
<Style x:Key="ListBoxTemplate" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentControl ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalContentAlignment="Stretch"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
<!– … –>
[/xml]

As you can see, my resource access to the ListBox items and set the HorizontalContentAlignment to stretch.

Now, apply it to the ListBox:

[xml]
<!–MainPage.xaml–>
<!– … –>
<ListBox x:Name="MainListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}" SelectionChanged="MainListBox_SelectionChanged" ItemContainerStyle="{StaticResource ListBoxTemplate}">
<!– … –>
[/xml]

You can go back to the main page on Landscape mode and observe the correct right alignment.

right aligment on landscape ok
right aligment on landscape ok

Wrap up

Now you have everything set to have a nice Windows Phone 7 app that support both orientation with nice transitions and a proper ListBox.