Rendre vos pages dynamiques en injectant du XAML !

Rendre vos pages dynamiques en injectant du XAML !

Si vous utilisez mon application Wikipedia, vous avez surement remarqué que la partie supérieure de la page d’accueil varie avec le temps. Quelques exemples :

 

Invitation à lancer un webbrowser pour participer à un concours
wp_ss_20130330_0001

Ouvre le Windows Phone Store pour télécharger une application
wp_ss_20130330_0002

Pour cela la technique est assez simple, à chaque démarrage, l’application fait une requête sur mon serveur en passant sa culture (anglais, français, etc…), et récupère des variables : image url, texte descriptif et le lien.

Selon le type du lien, je lance alors : une page interne de l’application (pour faire découvrir un article bien précis, pour faire découvrir les settings, etc…), un lien internet via un WebBrowserTask ou une page du Windows Phone Store via un MarketplaceDetailTask.

Toutefois, la mise en forme reste assez statique et pour la prochaine version je veux aller en plus en injectant directement du XAML dans la page ! On pourra alors imaginer avoir des animations spécifiques, des sliders, etc…

Comment le faire ?

C’est très très simple, il suffit en fait d’utiliser un XamlReader, et notamment  sa méthode Load qui va permettre de lire du code xaml depuis une string et de générer les différents objets XAML.

Dans l’exemple suivant, nous allons appeler une page php qui va nous fournir du code xaml selon notre culture. Nous donnerons le résultat de cette requête au XamlReader et nous afficherons le résultat dans un panel XAML nommé CommentPanel.

WebClient web = new WebClient();
web.DownloadStringCompleted += (sender, e) =>{
try
{
var xaml = XamlReader.Load(e.Result);
CommentPanel.Content = xaml;
}
catch
{
}

};
web.DownloadStringAsync(new Uri(uri+"?culture="+CultureInfo.CurrentUICulture.TwoLetterISOLanguageName,UriKind.Absolute));

et du côté PHP :


<?php
$culture=$_GET['culture'];
if($culture=='fr'){
?>

<StackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Button Content="Click Me" />
<Slider Minimum="0" Maximum="100" />
</StackPanel>
<?php }else
{
?>
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Background="Red" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<TextBox />
</Grid>
<?php } ?>

Et ça fonctionne !!

wp_ss_20130330_0003

A noter : pensez bien à définir les namespaces sans oublier le namespace par défaut, sinon vous recevrez une exception pendant le chargement du XAML.

 

Comment rendre ceci interactif ?

Il n’est pas possible en effet d’inclure du code-behind dans cette injection afin d’interagir avec les nouveaux éléments XAML (par exemple afficher une page web quand on clique sur un bouton ou lancer une animation), il y a plusieurs solutions.

Pour afficher une page web ou une page interne de votre application, vous pouvez vous reposer sur les spécificités du contrôle HyperlinkButton par exemple :


<HyperlinkButton NavigateUri="http://www.bing.com" />

Une autre solution est de binding vos contrôles à des commandes, en effet, il n’est pas possible de se lier à des event handlers directement comme :

<button Click="ClickAction" />

Binding ?

Les bindings fonctionnent évidemment ! Vous pouvez écrire sans soucis :

<button Content="{Binding MyTitle}" />

Toutefois, vous ne pourrez faire référence à des éléments de votre page dans vos bindings (mais vous pouvez référer des éléments de votre XAML dynamique.

Note

Evidemment, vous ne pouvez pas injecté tout et n’importe quoi, il va falloir faire attention à quelles assemblies vous faites appellent et les capabilities de vos applications. Par exemple, pour inclure dynamiquement une pub PubCenter dans votre app, il va falloir que celle-ci contienne déjà une référence à la librairie PubCenter et que vous disposez de toutes les capabilities nécessaire à l’exécution de ce contrôle.

Comments are closed.