C# et XML prennent en charge la commande Edition.Entourerde qui insère un code snippet autour du code sélectionné (ce peut être simplement un mot, une ligne ou une fonction en entier).
Le raccourci clavier est Ctrl+K, Ctrl+S.
Syndication : Sara Ford’s Weblog
Traduction autorisée par Sara Ford.
J’aime bien cette astuce parce qu’elle n’est pas réellement sur comment utiliser une fonctionnalité mais plutôt comment combiner des fonctionnalités pour faire de nouvelles choses.
- Placer les snippets que vous souhaitez partager sur un partage.
- Allez dans le menu Outils | Gestionnaire des extraits de code…, et appuyez sur le bouton Ajouter et donnez lui un partage UNC.
- Allez dans le menu Outils | Importation et exportation de paramètres | Exporter et choisissez d’exporter uniquement les emplacements des extraits de code.
- Envoyez le fichier .vssettings à votre équipe. Ils peuvent aller dans le menu Outils | Importation et exportation de paramètres | Importer pour récupérer les extraits de code.
Syndication : Sara Ford’s Weblog
Traduction autorisée par Sara Ford.
Lorsque vous insérez un extrait de code, l’éditeur applique une couleur de surbrillance sur les champs (variables, valeurs…) vous pouvez les modifiez suivant comment a été écrit l’extrait de code. L’idée est que vous puissiez modifier le contenu des champs, puis d’appuyer sur Tabulation pour naviguer au champ suivant. Lorsque vous appuyez sur Tabulation, le champ particulier est mis à jour dans tout l’extrait de code. Vous pouvez également naviguer en dehors du champ via les flèches pour appeler la mise à jour.
Si vous appuyez sur Entrée, vous aller valider les deux changements actuels (le cas échéant) ainsi que tout l’extrait de code, ce qui signifie que vous ne pouvez pas annuler pour revenir à ces champs en surbrillance. Vous devez utiliser votre méthode de refactorisation favorite pour effectuer des mises à jour supplémentaires.
Syndication : Sara Ford’s Weblog
Traduction autorisée par Sara Ford.
Si vous avez une image ou une application lourde il peut être mieux de la couper et de la placer dans des plus petits composants (DLL) qui peuvent être téléchargés par le client depuis le serveur lorsqu’il en a besoin. De cette façon vos clients n’ont pas besoin d’attendre que toute l’application soit téléchargée à la première connexion à votre application sur le Web.
Dans cette astuce je vais vous montrer comment packager vos contrôles Silverlight dans une DLL et les placer sur votre serveur Web. Ensuite, je vais vous montrer comment faire que le client télécharge la DLL, créé et instancie le contrôle Silverlight depuis la DLL et ensuite ajouter le contrôle à votre application Silverlight.
Etape 1 : Créer un composant Silverlight dans une DLL
Pour commencer, créez une nouvelle Bibliothèque de Classes Silverlight. Cela peut être fait dans le menu de Visual Studio Fichier | Nouveau | Projet. Dans les types de projets étendez le nœud Visual C# et choisissez Silverlight. Depuis le panneau des modèles sur la droite de cette boite de dialogue choisissez Bibliothèque de Classes Silverlight. Entrez un nom de projet (ici « Mage ») et cliquez sur OK lorsque tout est prêt.
Faites un clic droit dans l’explorateur de solutions sur votre nœud Classe et choisissez Ajouter un nouvel élément. Cela affichera une boite de dialogue. Sélectionnez Contrôle Utilisateur Silverlight, donnez lui un nom (ici « Mage.xaml ») et cliquez sur OK.
Ajoutez le contenu que vous voulez à ce contrôle. Pour les besoins de cette démonstration j’ai simplement ajouté l’image d’un mage.
<UserControl x:Class="Mage.Mage"
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
Width="96" Height="96">
<Canvas>
<Image Source="mage.png"></Image>
</Canvas>
</UserControl>
Appuyez sur Ctrl+Maj.+B pour générer le projet. Cela ajoutera le composant dans une DLL située dans le répertoire bin : bin\Mage.dll.
Etape 2 : créer une application Silverlight
Maintenant que vous avez votre composant Silverlight généré et prêt à être lancé, il est temps de créer une application Silverlight qui va charger et afficher le composant. Créez une application Silverlight en sélectionnant dans le menu Fichier | Nouveau Projet et choisissez Application Silverlight. Donnez un nom de projet (ici MyGame) et cliquez sur OK.
Copiez la DLL du composant Silverlight que vous avez générée plus tôt (ici Mage.dll) dans le dossier de votre site Web.
Etape 3 : télécharger et afficher le contrôle Silverlight
Le code suivant montre comment charger et afficher le contrôle Silverlight. Quelques remarques :
- Ajouter la déclaration using pour référencer System.Reflection parce que nous avons créé un comporant déclaré en tant que objet Assembly.
- Utiliser le composant WebClient pour ouvrir la DLL en lecture asynchrone.
- Soyez sûr de pointer vers le chemin absolue de votre DLL. Un chemin absolu utilise l’URL compléte.
- Une fois que je téléchargement est complé, l’assembly est chargée et une instance du contrôle est créée.
- Enfin, le contrôle est ajouté au niveau racine de l’application.
Le résultat est une belle petite image de mage :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Reflection;
namespace MyGame
{ public partial class Page : UserControl
{ private Assembly _mageComponent;
public Page()
{ InitializeComponent();
LoadMageComponent();
}
private void LoadMageComponent()
{ WebClient downloader = new WebClient();
downloader.OpenReadCompleted += new OpenReadCompletedEventHandler(downloader_OpenReadCompleted);
string component = "Mage.dll";
string absoluteUri = System.Windows.Application.Current.Host.Source.AbsoluteUri;
string path = absoluteUri.Substring(0, absoluteUri.IndexOf("ClientBin")) + component;
downloader.OpenReadAsync(new Uri(path, UriKind.Absolute));
}
void downloader_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{ AssemblyPart assemblyPart = new AssemblyPart();
_mageComponent = assemblyPart.Load(e.Result);
UserControl control = (UserControl)_mageComponent.CreateInstance("Mage.Mage"); LayoutRoot.Children.Add(control);
}
}
}
Syndication : Mike Snow’s Weblog
Traduction autorisée par Mike Snow.
Dans Visual Studio 2005, nous avons introduit les extraits de code. Donc nous allons commencer une série d’astuces sur les extraits de code. Le raccourci clavier Ctrl+K, Ctrl+X est lié à la commande Edition.Insérerunextrait, dans le cas où le raccourci ne fonctionnerait pas dû à la configuration de votre environnement de développement.
Lorsque j’invoque la commande Edition.Insérerunextrait, l’extrait de code d’insertion apparait. Saviez-vous… (la vrai astuce est ici) que vous avez une IntelliSense ici pour entrer le nom de l’extrait de code. Remarquez que je commence par écrire « #re ».
De plus :
- Vous pouvez utiliser la touche Tabulation pour compléter automatiquement le mot. Si le mot est le nom de l’extrait de code (et non celui d’un dossier), appuyer sur Tabulation l’insérera.
- Vous pouvez également utiliser Maj.+Tab pour naviguer en arrière au mot précédent.
Syndication : Sara Ford’s Weblog
Traduction autorisée par Sara Ford.
Cette astuce et la précédente sont mes dernières astuces les plus sympas à tester. Lorsque vous n’arrivez pas à placer correctement un certain nombre d’espace devant vos lignes de codes cette astuce vous aidera.
Allez dans le menu Outils | Options | Editeur de texte | <Langage> | Tabulations pour switcher entre utiliser des tabulations ou insérer des espaces à la place.
Remarquez que vous pouvez le faire pour tous les langages dans Editeur de texte | Tous les langages, mais plus généralement on ne l’utilise que pour un langage en particulier.
De plus, vous pouvez consulter une astuce précédente : comment convertir des espaces en tabulations et vice-versa.
Syndication : Sara Ford’s Weblog
Traduction autorisée par Sara Ford.
Actuellement, Silverlight supporte la souris mais avec un seul click. Donc dans cette astuce nous allons voir comment implémenter le Double Clic. Vous pouvez appliquer cette technique à un contrôle individuel ou à toute votre page.
La clé de cette astuce est de lancer un timer DispatcherTimer lorsque l’événement click gauche de la souris est déclenché. Si un clic sur un autre bouton de la souris est intercepté avant la fin de l’interval de temps du double clic, il ne faut pas activer le double clic. Cet interval est généralement situé aux alentours des 200 millisecondes. Une fois que les 200 millisecondes sont passées, le timer doit être stoppé et désactivé jusqu’à qu’un autre clic sur la souris est intercepté.
Pour démarrer, créons notre timer et ajoutons un écouteur sur l’événement MouseLeftButtonDown.
DispatcherTimer _doubleClickTimer;
Image _lastImage = null;
public Page()
{ InitializeComponent();
_doubleClickTimer = new DispatcherTimer();
_doubleClickTimer.Interval = new TimeSpan(0, 0, 0, 0, 200);
_doubleClickTimer.Tick += new EventHandler(DoubleClick_Timer);
this.MouseLeftButtonDown += new MouseButtonEventHandler(Page_MouseLeftButtonDown);
}
// too much time has passed for it to be a double click.
void DoubleClick_Timer(object sender, EventArgs e)
{ _doubleClickTimer.Stop();
}
Maintenant, dans la méthode Page_MouseLeftButtonDown(), on :
1. Vérifie que le timer est activé.
2. S’il l’est déjà, c’est que nous avons déjà cliqué une fois, nous avons donc fait un double clic.
3. Si le timer est désactivé, le démarrer.
void Page_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (_doubleClickTimer.IsEnabled)
{
// a double click has occured
_doubleClickTimer.Stop();
Image catImg = new Image();
Uri uri = new Uri("cat.png", UriKind.Relative);
ImageSource imgSource = new
System.Windows.Media.Imaging.BitmapImage(uri);
catImg.Source = imgSource;
catImg.SetValue(Canvas.LeftProperty,(double) e.GetPosition(LayoutRoot).X-90);
catImg.SetValue(Canvas.TopProperty, (double)e.GetPosition(LayoutRoot).Y-113);
if(null != _lastImage)
MainCanvas.Children.Remove(_lastImage);
MainCanvas.Children.Add(catImg);
_lastImage = catImg;
}
else
{
_doubleClickTimer.Start();
}
}
Voici une petite démonstration du code :
Syndication : Mike Snow’s Weblog
Traduction autorisée par Mike Snow.
La mise en retrait Intelligente est l'option que vous devez choisir si vous voulez que le curseur soit bien indenté à chaque fois que vous appuyez sur la touche Entrée ou flèche du haut ou du bas dans le code. Par exemple, lorsque vous créez une nouvelle méthode appelée foo(), puis appuyez sur Entrée. Vous remarquerez que le curseur sera automatiquement excentré. Si vous continuez à appuyer sur Entrée, le curseur restera en retrait. Tous les langages ne prennent pas en charge la mise en retrait intelligente, mais si c'est le cas, c’est le réglage par défaut pour ce langage.
La mise en retrait Bloc est similaire à celle d’un éditeur de documents. La différence est que lorsque vous tapez dans foo() et appuyez sur Entrée, seule la première ligne est indentée automatiquement. Le prochain saut de ligne placera le curseur à la colonne 0.
Aucune n’indentera aucune nouvelle ligne. Vous devez tout faire manuellement.
Syndication : Sara Ford’s Weblog
Traduction autorisée par Sara Ford.
Tout en haut de l’éditeur et juste dessous du bandeau des onglets pour les fichiers, vous trouvez la barre de navigation. La liste de gauche contient les objets alors que la liste de droite ses membres. C’est très utile lorsque vous souhaitez rapidement sauter entre diverses fonctions dans une solution très grande, ou que vous souhaitez simplement consulter la liste des fonctions d’un objet.
Pour sauter dans la barre de navigation avec le clavier, appuyez sur Ctrl+F2. C’est le raccourci de la commande Fenêtre.Ouvrirlabarredenavigation. Pour passer de la liste des objets à la liste de ses membres, appuyez sur Tab ou Maj.+Tab.
Vous pouvez également masquer (ou afficher) la barre de navigation en allant dans le menu Outils | Options | Editeur de texte | Tous les langages | Général et définir l’option Barre de navigation à la valeur désirée. Remarquez que nous définissons cette valeur pour tous les langages mais vous pouvez la définir pour chacun des langages en particulier.
Syndication : Sara Ford’s Weblog
Traduction autorisée par Sara Ford.
Une propriété souvent inconnue de votre contrôle Silverlight est la propriété ScaleMode. Cette propriété permet de spécifier comment les contrôles, au sein de votre application Silverlight, seront redessinés lorsque votre contrôle Silverlight est redimensionné.
Par exemple, si la largeur ou la hauteur de votre contrôle Silverlight est défini sur un pourcentage de la page de votre navigateur web, lorsque la page du navigateur est redimensionnée, votre contrôle Silverlight le sera donc.
Trois options sont disponibles pour la propriété ScaleMode :
- None – Aucun redimentionnement n’est appliqué.
- Stretch- Le contrôle est étiré pour remplir la totalité du navigateur.
- Zoom – Le redimentionnement appliqué, est proportionnel au remplissage du navigateur.
L’exemple suivant montre comment définir la propriété ScaleMode à Stretch dans votre page ASPX :
<asp:Silverlight ID="Xaml1" ScaleMode="Stretch" runat="server" Source="~/ClientBin/SilverlightApplication52.xap" MinimumVersion="2.0.31222.0" Width="100%" Height="100%" />
Avant le redimentionnement du navigateur :
Après le redimentionnement du navigateur (remarquez la taille du bouton) :
Syndication : Mike Snow’s Weblog
Traduction autorisée par Mike Snow.
Dans une astuce précédente, nous avions expliqué ce que fait l’option Mettre les délimiteurs en surbrillance automatique. Cette astuce vous permettra de changer la couleur des accolades.
Allez dans le menu Outils | Options | Polices et couleurs, sélectionnez Accolades correspondantes (rectangle), et choisissez votre couleur.
Syndication : Sara Ford’s Weblog
Traduction autorisée par Sara Ford.
Juste au cas où vous en auriez besoin…
Allez dans le menu Outils | Options | Editeur de texte |Tous les langages | Général et décochez la case Répertorier automatiquement les membres et Informations sur les paramètres. Si vous souhaitez simplement désactiver l’IntelliSense par défaut pour un langage particulier, allez dans Editeur de texte | <langage> | Général et décochez les cases.
Remarquez que les commandes elles-mêmes ne sont pas désactivables., ce qui signifie que vous pouvez encore invoquer l’IntelliSense avec les raccourcis clavier ou dans le bouton de la barre d’outils.
Syndication : Sara Ford’s Weblog
Traduction autorisée par Sara Ford.
Si vous souhaitez simplement afficher une partie d’un objet pour pouvez le faire au travers de la propriété Clip. Le clip que vous définissez est la zone de l'objet que vous souhaitez afficher. Par exemple, avec un rectangle défini comme ceci :
<Rectangle Fill="DarkGoldenrod" Height="100" Width="200" StrokeThickness="3" Stroke="Black"></Rectangle>
Si vous ne souhaitez afficher qu’une partie du rectangle, vous pouvez appliquer une région clip comme ceci :
<Rectangle Fill="DarkGoldenrod" Height="100" Width="200" StrokeThickness="3" Stroke="Black">
<Rectangle.Clip>
<EllipseGeometry Center="0,0" RadiusX="80" RadiusY="80" />
</Rectangle.Clip>
</Rectangle>
Vous remarquerez l’utilisation de EllipseGeometry et du centrage dans le coin supérieur gauche. Le résultat est un quart de cercle de 80x80. En plus de EllipseGeometry vous pouvez utiliser :
- RectangleGeometry
- GeometryGroup
- LineGeometry
- PathGeometry
Syndication : Mike Snow’s Weblog
Traduction autorisée par Mike Snow.
Allez dans Outils | Options | Editeur de texte | Extension de fichier, vous pouvez mapper une extension de fichier à un des éditeurs inclus.
Après avoir mappé l’extension .sara à notre éditeur C#, nous obtenons la coloration syntaxique du C# :
Il y a également une option pour mapper des fichiers sans extension à un éditeur spécifique.
Syndication : Sara Ford’s Weblog
Traduction autorisée par Sara Ford.
Mettre les délimiteurs en surbrillance automatiquement
A partir du moment où vous avez du code construit en paire (C’est de cette façon que la documentation les nomme), lorsque vous avez fini de taper le début ou la fin de la paire, les deux mots deviennent en gras. Pour désactiver cette fonctionnalité, allez dans Outils | Options | Editeur de texte | Général.
Personnalisation des délimiteurs en surbrillance
Vous pouvez personnaliser la couleur en allant dans Outils | Options | Polices et couleurs et sélectionner Accolades correspondantes (en surbrillance).
Et voila le résultat :
Syndication : Sara Ford’s Weblog
Traduction autorisée par Sara Ford.
