Framework 4.5

Tante novità sono in arrivo con la versione 4.5 del .net framework.

Buona lettura al seguente link.

Multi-touch in WPF 4

Pubblicato un articolo dove vengono mostrare le caratteristiche multitouch di WPF4.

Sicuramente il dispositivi Touch saranno il futuro per quanto riguarda l’interfacciamento uomo-macchina, quindi cominciare fin da subito a capire come funziona e conoscere gli strumenti a disposizione è indubbiamente un vantaggio.

Buona lettura: http://www.wpfitalia.it/Contenuti/VediArticoli/tabid/83/ArticleId/46/Il-supporto-al-multi-touch-in-WPF-4.aspx

Client Profile : framework 3.5 Sp1

Con la SP1 del framework 3.5 e' stata introdotto il profile client.

Come ben sapete, .NET Framework è il prerequisito imprescindibile per l'esecuzione di applicazioni .NET e dev'essere incluso nelle procedure di distribuzione (o scaricato da Internet) affinchè i nostri utenti possano utilizzare le nostre applicazioni. Il problema di base è che .NET Framework 3.5 full package ha delle dimensioni effettivamente notevoli, rispetto ai suoi predecessori.

Partendo da questo presupposto, il team di sviluppo di .NET Framework ha introdotto la possibilità di distribuire una versione ridotta del run-time (il Client Profile) dedicata esclusivamente alle applicazioni client. Tale versione ridotta (circa 28 Megabyte contro gli oltre 300 della versione completa) è costituita da un sub-set di assembly appartenenti al più completo .NET 3.5, assembly in tutto e per tutto identici a quelli del fratello maggiore. In sostanza, il Client Profile integra gli assembly inerenti le seguenti tecnologie:

• Common Language Runtime
• Windows Forms
• Windows Presentation Foundation
• Windows Communication Foundation
• ClickOnce

La logica di base è: se la mia è un'applicazione per Windows, perchè devo distribuire anche gli assembly dedicati ad ASP.NET occupando spazio inutilizzato? In questo modo le proprie applicazioni .NET per Windows potranno funzionare normalmente, risparmiando spazio. Inoltre, questo tipo di approccio è senza dubbio molto utile in ambienti Windows XP SP 2 o Windows Server 2003 (che non integrano, per default, .NET 2.0 o superiore).

Fatta questa premessa discorsiva, andiamo ora a vedere come il tutto si realizza attraverso Visual Studio 2008 in ambito Visual Basic. E' evidente come il Client Profile sia applicabile nei confronti delle tipologie di applicazioni sopra descritte. Per attivare il nostro sub-set all'interno di un'applicazione, dobbiamo innanzitutto aprire la finestra My Project, selezionare la scheda Compilazione e fare clic sul pulsante Opzioni di compilazione avanzate. Quando compare la finestra, è necessario fare clic sul segno di spunta riferito alla voce Sottoinsieme .NET Framework solo client, come nella seguente figura:

Il passaggio successivo è quello di compilare il progetto. Questo farà sì che Visual Studio 2008 sia in grado di determinare se effettivamente la nostra applicazione potrà girare sotto il Client Profile o se, invece, richiederà la presenza della versione full di .NET Framework 3.5. Nel caso in cui siano necessari assembly non compresi nel Client Profile, verranno visualizzati dei messaggi di avviso nella finestra di Output.

Il Client Profile funziona sia nelle distribuzioni ClickOnce che in quelle per Windows Installer (progetti di distribuzione). Nel momento in cui compiliamo il progetto (vedi passaggio precedente), il Client Profile diventa il prerequisito principale ed esclude il fratello maggiore, come si evince dalla seguente figura:

Nel momento in cui la procedura di distribuzione (ClickOnce o Windows Installer) viene assemblata, come di consueto viene prodotto un bootstrapper chiamato Setup.exe. Tale bootstrapper è stato specificamente migliorato per questo tipo di scenario e il suo "peso" è di circa 200 Kb. Quando avviato, Setup.exe verifica la presenza di .NET Framework 3.5 completo e, qualora non rilevato, installa la versione Client.

Un ultimo elemento da notare è che, sfruttando il client profile, al progetto viene aggiunto un file App.config, contenente un nuovo elemento Xml, che indica all'applicazione che il run-time da utilizzare è quello ridotto:

<startup>
<supportedRuntime version="v2.0.50727" sku="Client"/>
</startup>

Memory Leak in WPF

Non vi e' mail capitato di lavorare con immagini e nonostante non vengano piu' usate il vostro programma continua ad allocare memoria?
Una delle ragioni potrebbe essere il memory leak che affliggeva il framework 3.5. Il problema e' stato risolto con la SP1 e in particolare con la KB981107.
Un'altra ragione potrebbe essere l'uso spropositato della BitmapSource senza utilizzare il metodo freeze.
Se utilizzate variabili di tipo BitmapSource assicuratevi di farne il freeze in questo modo il GC rilascerà la memoria se non piu' utilizzata.

BitmapSource objBS = .....
if (objBS.CanFreeze) objBS.Freeze();

Se volete sapere quale framework avete installato seguite il seguente post.

Versione Framework .net

Forse vi sarà capitato di cercare quale versione del framework avete installato sul pc e magari quale Service Pack; ecco come fare:

- da menu avvio scrivete regedit.exe <invio>
- quindi nell'albero di sinistra aprite i seguenti rami :

• HKEY_LOCAL_MACHINE
• SOFTWARE
• Microsoft
• NET Framework Setup
• NDP

qui troverete le versioni installate.

Selezionando una versione potrete trovare la versione build in "Version", mentre in "SP" avrete il numero della service pack installata.

Password

WPF sappiamo è un framework di sviluppo per applicazioni con grafica ricca, volendo altamente 3D, e con un modello di eventi e di binding innovativo

Capita spesso di realizzare applicazioni che fanno uso di una login con il classico Username e Password da digitare
Benchè le applicazioni WPF usino particolarmente bene il pattern MVVM per associare grafica e logica, non è una buona idea mettere in una variabile di tipo ViewModel questa coppia di dati in chiaro.
Il mio consiglio è fare a meno di MVVM in questo caso, e usare un paio di accortezze importanti come property private e SecureString.
Io ad esempio, nella vista di login, setto semplicemente in un evento (il click del Login) le due proprietà chiave (username, password) in 2 proprietà di un a classe statica appositamente creata:

void LoginButton_Click(object sender, RoutedEventArgs e)
{
Globals.LoggedUsername = Username.Text;
Globals.LoggedPassword = Password.SecurePassword;
Password.Password = string.Empty;
}

Username è una proprietà classica, mentre Password, espone in maniera pubblica il solo setter (writeonly in VB)
public static string LoggedUsername { get; set;}
public static SecureString LoggedPassword { private get; set;}
Potete notare che in WPF ho usato un controllo PasswordBox per far digitare all’utente la password, così da averne già la rappresentazione in SecureString, una stringa immutabile, come le classiche stringhe del .NET, con in più la crittografia inclusa in memoria (in pratica non può essere dumpata a differena di tutte le altre variabili, string incluse)
Questo farà si che l’unico istante in cui sarà presente nella memoria dell’applicazione la password in chiaro (garbage collection permettendo), sarà l’attimo tra cui l’utente la digita e preme il pulsante di login che infatti ha anche il compito di ripulire il controllo PasswordBox che contiene anche la password in chiaro, lasciando di fatto come unica password quella crittata (SecureString) contenuta nella classe Globals, appositamente creata.
La stessa classe statica mette poi a disposizione del resto dell’applicazione un metodo per avere un istanza di proxy di servizio per contattare il BackEnd con la logica.

public static Services.MyService GetFatturaZeroService()
{
var pwd = System.Runtime.InteropServices.Marshal.PtrToStringUni(System.Runtime.InteropServices.Marshal.SecureStringToBSTR(LoggedPassword));
var c = new Services.MyService("MyConfigurationName");
c.ClientCredentials.UserName.UserName = LoggedUsername;
c.ClientCredentials.UserName.Password = pwd;
return c;
}

Qui, come vediamo, è presente il codice per leggere di nuovo in chiaro la password, così facendo ancora per 1 altro attimo sarà presente nell’area di memoria della nostra app la password in chiaro, ma come sempre, programmare in modo sicuro non significa annullare i rischi, significa ridurre la superficie di attacco…

Html 5

The web is constantly evolving. New and innovative websites are being created every day, pushing the boundaries of HTML in every direction. HTML 4 has been around for nearly a decade now, and publishers seeking new techniques to provide enhanced functionality are being held back by the constraints of the language and browsers.
To give authors more flexibility and interoperability, and enable more interactive and exciting websites and applications, HTML 5 introduces and enhances a wide range of features including form controls, APIs, multimedia, structure, and semantics.
Work on HTML 5, which commenced in 2004, is currently being carried out in a joint effort between the W3C HTML WG and the WHATWG. Many key players are participating in the W3C effort including representatives from the four major browser vendors: Apple, Mozilla, Opera, and Microsoft; and a range of other organisations and individuals with many diverse interests and expertise.
Note that the specification is still a work in progress and quite a long way from completion. As such, it is possible that any feature discussed in this article may change in the future. This article is intended to provide a brief introduction to some of the major features as they are in the current draft.

Structure

HTML 5 introduces a whole set of new elements that make it much easier to structure pages. Most HTML 4 pages include a variety of common structures, such as headers, footers and columns and today, it is fairly common to mark them up using div elements, giving each a descriptive id or class.

Diagram illustrates a typical two-column layout marked up using divs with id and class attributes. It contains a header, footer, and horizontal navigation bar below the header. The main content contains an article and sidebar on the right.

The use of div elements is largely because current versions of HTML 4 lack the necessary semantics for describing these parts more specifically. HTML 5 addresses this issue by introducing new elements for representing each of these different sections.

The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

The markup for that document could look like the following:

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

There are several advantages to using these elements. When used in conjunction with the heading elements (h1 to h6), all of these provide a way to mark up nested sections with heading levels, beyond the six levels possible with previous versions of HTML. The specification includes a detailed algorithm for generating an outline that takes the structure of these elements into account and remains backwards compatible with previous versions. This can be used by both authoring tools and browsers to generate tables of contents to assist users with navigating the document.
For example, the following markup structure marked up with nested section and h1 elements:

<section>
  <h1>Level 1</h1>
  <section>
    <h1>Level 2</h1>
    <section>
      <h1>Level 3</h1>
    </section>
  </section>

</section>

Note that for better compatibility with current browsers, it is also possible to make use of the other heading elements (h2 to h6) appropriately in place of the h1 elements.
By identifying the purpose of sections in the page using specific sectioning elements, assistive technology can help the user to more easily navigate the page. For example, they can easily skip over the navigation section or quickly jump from one article to the next without the need for authors to provide skip links. Authors also benefit because replacing many of the divs in the document with one of several distinct elements can help make the source code clearer and easier to author.
The header element represents the header of a section. Headers may contain more than just the section’s heading—for example it would be reasonable for the header to include sub headings, version history information or bylines.

<header>
  <h1>A Preview of HTML 5</h1>
  <p class="byline">By Lachlan Hunt</p>
</header>

<header>
  <h1>Example Blog</h1>
  <h2>Insert tag line here.</h2>
</header>

The footer element represents the footer for the section it applies to. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

<footer>© 2007 Example Inc.</footer>

The nav element represents a section of navigation links. It is suitable for either site navigation or a table of contents.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

The aside element is for content that is tangentially related to the content around it, and is typically useful for marking up sidebars.

<aside>
  <h1>Archives</h1>
  <ul>
    <li><a href="/2007/09/">September 2007</a></li>
    <li><a href="/2007/08/">August 2007</a></li>
    <li><a href="/2007/07/">July 2007</a></li>
  </ul>

</aside>

The section element represents a generic section of a document or application, such as a chapter, for example.

<section>
  <h1>Chapter 1: The Period</h1>
  <p>It was the best of times, it was the worst of times,
     it was the age of wisdom, it was the age of foolishness,
     it was the epoch of belief, it was the epoch of incredulity,
     it was the season of Light, it was the season of Darkness,
     ...</p>
</section>

(Excerpt from A Tale of Two Cities)
The article element represents an independent section of a document, page or site. It is suitable for content like news or blog articles, forum posts or individual comments.

<article id="comment-2">
  <header>
    <h4><a href="#comment-2" rel="bookmark">Comment #2</a>
        by <a href="http://example.com/">Jack O'Niell</a></h4>
    <p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time>
  </header>
  <p>That's another great article!</p>
</article>

Video and Audio

In recent years, video and audio on the web has become increasingly viable and sites like YouTube, Viddler, Revver, MySpace, and dozens of others are making it easy for anyone to publish video and audio. However, since HTML currently lacks the necessary means to successfully embed and control multimedia itself, many sites are relying on Flash to provide that functionality. Although it is possible to embed multimedia using various plug-ins (such as QuickTime, Windows Media, etc.), Flash is currently the only widely deployed plugin that provides a cross-browser compatible solution with the desired APIs for developers.
As evidenced by the various Flash-based media players, authors are interested in providing their own custom-designed user interfaces, which generally allow users to play, pause, stop, seek, and adjust volume. The plan is to provide this functionality in browsers by adding native support for embedding video and audio and providing DOM APIs for scripts to control the playback.
The new video and audio elements make this really easy. Most of the APIs are shared between the two elements, with the only differences being related to the inherent differences between visual and non-visual media.
Both Opera and WebKit have released builds with partial support for the video element. You may download the experimental build of Opera or a recent nightly build of WebKit to try out these examples. Opera includes support for Ogg Theora and WebKit supports all the formats that are supported by QuickTime, including third party codecs.
The simplest way to embed a video is to use a video element and allow the browser to provide a default user interface. The controls attribute is a boolean attribute that indicates whether or not the author wants this UI on or off by default.

<video src="video.ogv" controls poster="poster.jpg" 
width="320" height="240">
    <a href="video.ogv">Download movie</a>
</video>

The optional poster attribute can be used to specify an image which will be displayed in place of the video before the video has begun playing. Although there are some video formats that support their own poster frame feature, such as MPEG-4, this provides an alternative solution that can work independently of the video format.
It is just as simple to embed audio into a page using the audio element. Most of the attributes are common between the video and audio elements, although for obvious reasons, the audio element lacks the width, height, and poster attributes.

<audio src="music.oga" controls>
    <a href="music.oga">Download song</a>
</audio>

HTML 5 provides the source element for specifying alternative video and audio files which the browser may choose from based on its media type or codec support. The media attribute can be used to specify a media query for selection based on the device limitations and the type attribute for specifying the media type and codecs. Note that when using the source elements, the src attribute needs to be omitted from their parent video or audio element or the alternatives given by the source elements will be ignored.

<video poster="poster.jpg">
    <source src="video.3gp" type="video/3gpp" 
    media="handheld">
    <source src="video.ogv" type="video/ogg;
    codecs=theora, vorbis">
    <source src="video.mp4" type="video/mp4">
</video>
<audio>
  <source src="music.oga" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
</audio>

For authors who want a little more control over the user interface so that they can make it fit the overall design of the web page, the extensive API provides several methods and events to let scripts control the playback of the media. The simplest methods to use are the play(), pause(), and setting currentTime to rewind to the beginning. The following example illustrates the use of these.

<video src="video.ogg" id="video"></video>
<script>
  var video = document.getElementById("video");
</script>
<p><button type="button" onclick="video.play();">Play</button>
   <button type="button" onclick="video.pause();">Pause</button>
   <button type="button" onclick="video.currentTime = 0;">
   << Rewind</button>

There are many other attributes and APIs available for the video and audio elements that have not been discussed here. For more information, you should consult the current draft specification.

Document Representation

Unlike previous versions of HTML and XHTML, which are defined in terms of their syntax, HTML 5 is being defined in terms of the Document Object Model (DOM)—the tree representation used internally by browsers to represent the document. For example, consider a very simple document consisting of a title, heading and paragraph. The DOM tree could look something like this:

The DOM tree includes a title element in the head and h1 and p elements in the body.
The advantage of defining HTML 5 in terms of the DOM is that the language itself can be defined independently of the syntax. There are primarily two syntaxes that can be used to represent HTML documents: the HTML serialisation (known as HTML 5) and the XML serialisation (known as XHTML 5).
The HTML serialisation refers to the syntax that is inspired by the SGML syntax from earlier versions of HTML, but defined to be more compatible with the way browsers actually handle HTML in practice.

<!DOCTYPE html>
<html>
  <head>
    <title>An HTML Document</title>
  </head>
  <body>
    <h1>Example</h1>
    <p>This is an example HTML document.
  </body>
</html>

Note that like previous versions of HTML, some tags are optional and are automatically implied.
The XML serialisation refers to the syntax using XML 1.0 and namespaces, just like XHTML 1.0.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>An HTML Document</title>
  </head>
  <body>
    <h1>Example</h1>
    <p>This is an example HTML document.</p>
  </body>
</html>

Excluding differences in whitespace and the presence of the xmlns attribute, those two examples are equivalent.
Browsers use the MIME type to distinguish between the two. Any document served as text/html must conform to the requirements for the HTML serialisation and any document served with an XML MIME type such as application/xhtml+xml must conform to the requirements for the XML serialisation.
Authors should make an informed choice about which serialisation to use, which may be dependent on a number of different factors. Authors should not be unconditionally forced to use one or the other; each one is optimised for different situations.

Benefits of Using HTML

• Backwards compatible with existing browsers
• Authors are already familiar with the syntax
• The lenient and forgiving syntax means there will be no user-hostile “Yellow Screen of Death” if a mistake accidentally slips through
• Convenient shorthand syntax, e.g. authors can omit some tags and attribute values

Benefits of Using XHTML

• Strict XML syntax encourages authors to write well-formed markup, which some authors may find easier to maintain
• Integrates directly with other XML vocabularies, such as SVG and MathML
• Allows the use of XML Processing, which some authors use as part of their editing and/or publishing processes

How to Contribute

Work on HTML 5 is rapidly progressing, yet it is still expected to continue for several years. Due to the requirement to produce test cases and achieve interoperable implementations, current estimates have work finishing in around ten to fifteen years. During this process, feedback from a wide range of people including, among others, web designers and developers, CMS and authoring tool vendors, and browser vendors is vital to ensure its success. Everyone is not only welcome, but actively encouraged to contribute feedback on HTML 5.
In addition to the specification, there are several other related efforts designed to help people better understand the work.

• The Differences from HTML 4 describes the changes that have occurred since the previous version of HTML.
• The HTML Design Principles discuss principles used to help make decisions, and will help you understand the rationale behind many of the current design decisions.
• The Web Developer’s Guide to HTML 5, which only recently began, is being written to help web designers and developers understand everything they need to know to write conforming HTML 5 documents, and provide guidelines and describe best practices.

There are numerous venues through which you may contribute. You may join the W3C’s HTML WG and subscribe/contribute to the HTML WG mailing lists or wiki. You may also subscribe and contribute to the any of the WHATWG mailing lists, post to the WHATWG forum, post comments or write articles on the WHATWG blog.

2. Hello Word

Aprire Visual Studio 2008 e scegliere "File", "Nuovo", "Progetto ..." nel menu principale. Scegliere "Applicazione WPF" come tipo di progetto.

Scegliere una cartella per il progetto e dargli un nome. Quindi premere "OK"

Visual Studio crea il progetto e aggiunge automaticamente alcuni file per la soluzione. Un Window1.xaml e un App.xaml. La struttura sembra abbastanza simile a WinForms, tranne che il file Window1.designer.cs non è più il codice, ma è ora dichiarata in XAML come Window1.xaml

Aprire il file Window1.xaml nella finestra di progettazione WPF e trascinare un pulsante e un controllo TextBox dalla Casella degli strumenti della finestra

Selezionare il pulsante e passare alla vista degli eventi nella finestra delle proprietà (clicca sulla piccola icona fulmine giallo). Fare doppio clic sull'evento "Click" per creare un metodo nel codebehind che si chiama, quando l'utente fa clic sul pulsante.

Nota: se non trovate l'icona di un giallo lampo, è necessario installare il Service Pack 1 per VisualStudio sulla vostra macchina. In alternativa è possibile due volte sul pulsante nella finestra di progettazione per ottenere lo stesso risultato.

 

Visual Studio crea automaticamente un metodo nel file code-behind che viene chiamato quando il pulsante viene premuto.


private void button1_Click (object sender, RoutedEventArgs e)
{
TextBox1.Text = "Ciao WPF!";
}


La casella di testo è diventato automaticamente assegnato il nome textBox1 dal designer WPF. Testo testo presentato a "Ciao WPF!" quando il pulsante viene premuto e abbiamo finito! Avviare l'applicazione da premere [F5] della tastiera.

Logical- and Visual Tree

Introduzione
Elementi di una interfaccia utente WPF sono collegate gerarchicamente. Questa relazione si chiama LogicalTree. Il modello di un elemento è costituito da più elementi visivi. Questo albero è chiamato VisualTree. WPF differisce tra i due alberi, perché per alcuni problemi è necessario solo gli elementi logici e per altri problemi si desidera che tutti gli elementi.

<Window>
<Grid>
<label Content="Label" />
<Button Content="Button" />
</ Grid></ Window>

Perché abbiamo bisogno di due diversi tipi di alberi?
Un controllo WPF è costituito da più, controlli più primitivo. Un tasto - per esempio - è costituito da un bordo, un rettangolo e un presentatore contenuto. Questi controlli sono figli visivo del pulsante.
Quando WPF rende il pulsante, lo stesso elemento non ha l'aspetto, ma si scorre l'albero visuale e rende i bambini visivo di esso. Questa relazione gerarchica può essere utilizzato anche per fare hit testing, layout, ecc
Ma a volte non siete interessati ai confini e rettangoli di un modello di un controllo '. Particolarmente perché il modello può essere sostituito, e quindi non dovrebbe riguardare la struttura ad albero visuale! A causa di ciò si vuole un albero più robusto che contiene solo i "veri" controlli - e non tutte le parti modello. E questo è l'idoneità per l'albero logico.
L'albero logico
L'albero logico descrive le relazioni tra gli elementi dell'interfaccia utente. L'albero logico è responsabile per:
• Eredita valori DependencyProperty• Risoluzione DynamicResources riferimenti• Ricerca di nomi di elementi per le associazioni• RoutedEvents Forwaring

Il Visual Tree
La struttura ad albero visuale contiene tutti gli elementi logici compresi tutti gli elementi visivi del modello di ogni elemento. La struttura visiva è responsabile di: • Elementi di rendering visivo• Propaga opacità elemento• Propaga Layout e RenderTransforms• Propagare la proprietà IsEnabled.• Do Hit-Testing• RelativeSource (FindAncestor)

Trova un antenato di programmazione in Visual Tree
Se sei un elemento figlio di una interfaccia utente e si desidera accedere ai dati da un elemento padre, ma non sai quanti livelli fino Elemens che è, è la migliore soluzione per navigare l'albero fino a trovare un elemento di il tipo richiesto.
Questo helper fa excactly questo. È possibile utilizzare praticamente lo stesso codice per navigare attraverso l'albero logico.

pubblico VisualTreeHelperExtensions classe statica{
public static T FindAncestor <T> (DependencyObject DependencyObject)
dove T: classe
{
DependencyObject target = DependencyObject;
fare
{
target = VisualTreeHelper.GetParent (target);
}
while (target = null & & bersaglio (è T)!);
obiettivo di rendimento come T;
}}

L'esempio seguente mostra come utilizzare l'helper. Si parte da questo e naviga la struttura visiva finché non trova un elemento di rete tipo. Se il soccorritore raggiunge l'elemento radice dell'albero, restituisce null.

var grid = VisualTreeHelperExtensions.FindAncestor <Grid> (this);

Introduzione a XAML

XAML è l'acronimo di Extensible Application Markup Language. Il suo un linguaggio semplice basato su XML per creare e inizializzare. NET con relazioni gerarchiche. Anche se è stato originariamente inventato per WPF può da utilizzare per creare qualsiasi tipo di alberi dell'oggetto.
Oggi XAML viene utilizzato per creare interfacce utente in WPF, Silverlight, dichiarare workflow in WF e per la carta elettronica nello standard XPS.
Tutte le classi di WPF sono costruttori senza parametri e rendere l'uso eccessivo di proprietà. Che viene fatto per renderlo perfettamente adatto per i linguaggi XML come XAML.
I vantaggi di XAML
Tutto quello che puoi fare in XAML può essere effettuata anche nel codice. XAML ist solo un altro modo per creare e inizializzare oggetti. È possibile utilizzare WPF senza l'utilizzo di XAML. Sta a te se vuoi dichiararlo in XAML o scrivere nel codice. Dichiarare l'interfaccia utente in XAML ha alcuni vantaggi:
• codice XAML è breve e chiaro da leggere• Separazione del codice di progettazione e la logica• strumenti di progettazione grafica come Expression Blend richiedono XAML come fonte.• La separazione tra XAML e logica dell'interfaccia utente permette di separare chiaramente i ruoli di progettista e sviluppatore.
Vs codice XAML
Come esempio costruiamo un StackPanel semplice con un TextBlock e un pulsante in XAML e confrontarlo con lo stesso codice in C #.

<StackPanel>
<TextBlock Margin="20"> Benvenuti nel mondo di XAML </ TextBlock>
<Button Margin="10" HorizontalAlignment="Right"> OK </ Button></ StackPanel>

La stessa cosa espressa in C # sarà simile a questa:

/ / Crea il StackPanelStackPanel StackPanel StackPanel = new ();this.Content = StackPanel;
/ / Crea l'oggetto TextBlockTextBlock TextBlock TextBlock = new ();textBlock.Margin = Spessore nuovo (10);textBlock.Text = "Benvenuti nel mondo di XAML";stackPanel.Children.Add (TextBlock);
/ / Crea il pulsantePulsante = new Button ();button.Margin = Spessore nuovo (20);button.Content = "OK";stackPanel.Children.Add (pulsante);

Come potete vedere è la versione XAML molto più breve e più chiaro da leggere. E questo è il potere di espressività XAMLs.
Proprietà come elementi
Le proprietà sono normalmente scritte in linea come noto da XML <Button Content="OK" />. Ma cosa succede se vogliamo mettere un oggetto più complesso come contenuto, come una immagine che ha proprietà stessa o magari un pannello grigliato intero? Per fare questo possiamo utilizzare la sintassi per elementi proprietà. Questo ci permette di estrarre la proprietà come un elemento figlio.

<button>
<Button.Content>
<image Source="Images/OK.png" Width="50" Height="50" />
</ Button.Content></ Button>

Tipo di conversione implicita
Un costrutto molto potente di WPF sono convertitori di tipo implicito. Fanno il loro lavoro silenziosamente in background. Quando si dichiara una BorderBrush, la parola "Blue" è solo una stringa. Il BrushConverter implicita fa un System.Windows.Media.Brushes.Blue fuori di esso. La stessa riguarda lo spessore del bordo che sta molto bene convertito implicitamente in un oggetto spessore. WPF include un sacco di convertitori di tipi per classi incorporate, ma è possibile anche scrivere i convertitori di tipo per il vostro CLASSI proprio.

<Border BorderBrush="Blue" BorderThickness="0,10"></ Border>

Estensioni di markup
Estensioni di markup sono i segnaposto dinamico per i valori degli attributi in XAML. Risolvono il valore di una proprietà a runtime. Estensioni di markup sono surrouded da parentesi graffe (Esempio: background = "{StaticResource NormalBackgroundBrush}"). WPF ha alcuni built-in estensioni di markup, ma è possibile scrivere il vostro, derivando da MarkupExtension. Questi sono il built-in estensioni di markup:
• BindingPer associare i valori delle due proprietà insieme.• StaticResourceUna ricerca volta di una voce di risorsa• DynamicResourceL'aggiornamento automatico di ricerca di una voce di risorsa• TemplateBindingPer associare una proprietà di un modello di controllo di una proprietà di dipendenza del controllo• x: StaticRisolvere il valore di una proprietà statica.• x: NullRestituire null
Il primo identificatore all'interno di una coppia di parentesi graffe è il nome dell'estensione. Tutti gli identificatori preciding sono chiamati parametri sotto forma di proprietà = Valore. L'esempio seguente mostra l'etichetta il cui contenuto è legato al testo della casella di testo. Quando si digita un testo nella casella di testo, il testo cambia proprietà e l'estensione di markup vincolante aggiorna automaticamente il contenuto dell'etichetta.

<TextBox X:Name="textBox"/><label Content="{Binding Text, ElementName=textBox}"/>

Namespace
All'inizio di ogni file XAML è necessario includere due spazi dei nomi.Il primo è http://schemas.microsoft.com/winfx/2006/xaml/presentation. E 'mappato tutti i controlli WPF in System.Windows.Controls.Il secondo è http://schemas.microsoft.com/winfx/2006/xaml è mappato System.Windows.Markup che definisce le parole chiave XAML.
La mappatura tra un namespace XML e uno spazio dei nomi CLR è fatto l'attributo XmlnsDefinition a livello di assembly. È anche possibile includere direttamente uno spazio dei nomi CLR in XAML utilizzando il clr-namespace: prefisso.

<Finestra xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"></ Window>

User Experience processo di sviluppo

L'esperienza dell'utente diventa un fattore chiave di successo
In passato, ci siamo concentrati principalmente sulla costruzione di prodotti che soddisfano le esigenze funzionali degli utenti. L'esperienza dell'utente è stata considerata spesso in ritardo nel processo di sviluppo. Ma oggi il cliente richiede più di un semplice prodotto di lavoro. Fornire le caratteristiche giuste è ancora il prerequisito per un buon prodotto, ma di trasformarlo in qualcosa di straordinario è necessario fornire una buona esperienza utente!
Fornire una ricca esperienza utente non è una cosa di fortuna. Ha bisogno di essere piallato, progettato e integrato nello sviluppo di un prodotto. Progettazione di una ricca esperienza utente non è solo compongono l'interfaccia utente da parte di alcuni elementi grafici e le sfumature - è un concetto molto più ampio. La sua sulla creazione di un legame emotivo tra l'utente e il software. Rende l'utente sentire bene e così gli piace continuare ad utilizzare il software.
Nuovi strumenti per i progettisti
Microsoft ha riconosciuto, dare ai team di sviluppo il potere di creare esperienze utente ricche ha bisogno di un grafico più strumento di supporto molto più VisualStudio in grado di fornire oggi. Così hanno deciso di creare una nuova suite di tool - fatto per i progettisti.
Questa suite di tool si chiama Microsoft Expression. Si compone di quattro prodotti:
Espressione • Miscela è costruito per creare interfacce utente in WPF e Silverlight. Costruisce il ponte tra designer e sviluppatori. E 'possibile aprire soluzioni VisualStudioEspressione • Il design è una versione leightweight di Adobe Illustrator per creare e modificare grafica vettoriale.• Expression Media è costruito per codificare, tagliare e arricchire i file video e ottimizzarle per Silverlight Streaming• L'espressione Web Microsoft prossima generazione di HTML e Javascript editor. La sua sostituzione per Frontpage.
Insieme sono un potente pacchetto. L'illustrazione seguente mostra un esempio di flusso di lavoro di integrazione di una immagine vettoriale che è stato creato da un designer grafico in Adobe Illustrator in un progetto WPF che fa parte di una soluzione VisualStudio.
Flusso di lavoro per lo sviluppo di un progetto WPF
Sviluppo di un'applicazione WPF con una user experience ricca richiede competenze molto più di un analista di requisiti che definisce un elenco di casi d'uso e di sviluppo che implementa il software. Devi scoprire che cosa l'utente ha bisogno davvero. Questo può essere fatto seguendo un approccio user-centered.
1. Requisiti di suscitare
Come in ogni tipo di progetti software sua importante conoscere e mettere a fuoco il bersaglio del vostro sviluppo. Si dovrebbe parlare con operatori e degli utilizzatori per scoprire le reali esigenze. Questi bisogni devono essere raffinato a funzionalità ed espressi in casi d'uso (abstract) o scenari utente (illustrativo). Priorize i compiti di rischio e l'importanza e il lavoro iterativo. Questo lavoro è svolto dal ruolo dell'ingegnere requisiti.
2. Creazione e convalida prototipo di interfaccia utente
Creazione di un prototipo di interfaccia utente è un passo importante per condividere idee tra gli utenti e gli ingegneri per creare una comprensione comune del design dell'interazione. Questo compito è in genere fatto da un interaction designer. E 'utile per disegnare solo l'interfaccia utente in modo approssimativo per evitare discussioni preliminari su dettagli di design. Ci sono diverse tecniche e gli strumenti per farlo. Alcuni di essi sono:
• Carta prototipo
Utilizzare carta e matita per disegnare schizzi dell'interfaccia utente. Senza strumenti e le infrastrutture sono necessarie. Ognuno può scrivere le loro idee sulla carta.• wireframe
Wireframe sono spesso utilizzati per disegnare il layout di una pagina. Si chiama wireframe perché basta disegnare i contorni dei controlli e delle immagini. Questo può essere fatto con strumenti come PowerPoint o VisioEspressione • 3 Blend - Portata flusso schizzo è una nuova caratteristica fredda per creare prototipi interattivi direttamente in WPF. È possibile utilizzare il sistema integrato "stile sinuose" per farlo sembrare impreciso. Il prototipo può essere eseguito in un lettore stand-alone che ha integrato un meccanismo di feedback.Prototipo • Interactive L'approccio più costoso e reale è quello di creare un (riutilizzabili) prototipo interattivo che funziona come applicazione vera e propria, ma con dati fittizi.
Si raccomanda vivamente di testare il tuo prototipo di interfaccia utente su utenti reali. Questo vi aiuta a scoprire e affrontare i problemi di progettazione nelle prime fasi del processo di sviluppo. Le seguenti tecniche sono molto popolari per valutare prototipi di interfaccia utente: • Walktrough
Un walktrough di solito è fatto presto in un progetto con wireframe o prototipi di carta. L'utente riceve un compito da risolvere e che controlla il prototipo toccando sulla carta. Il leader di prova che presenta un nuovo documento che mostra lo stato dopo l'interazione.
• Laboratorio di Usabilità
Per fare un laboratorio di usabilità, è necessario un computer con un software di cattura schermo e una telecamera. Il probando ottiene un compito da fare e le esigenze e ingegnere interazione guardarlo fare questo. Non dovrebbero parlare con lui per sapere dove si blocca e perché.

3. Implementare la logica di business e interfaccia utente Raw
4. Integrare il design grafico
5. Test del software
Ruoli
Buliding una moderna interfaccia utente con un'esperienza utente ricca richiede competenze aggiuntivi da parte del team di sviluppo. Queste abilità sono descritte come ruoli che possono essere distribuiti tra i popoli nel vostro team di sviluppo.

• DeveloperLo sviluppatore è responsabile per implementare la funzionalità dell'applicazione. Egli crea il modello di dati, implementa la logica di business e fili fino ad una semplice visione.
• Designer graficoLa progettazione grafica è responsabile di creare un concetto grafico e costruire risorse grafiche, come icone, loghi, modelli 3D o combinazioni di colori. Se il progettista grafico ha familiarità con gli strumenti Microsoft Expression crea direttamente stili e modelli di controllo.
• Interaction Designer
L'interaction designer è responsabile per il contenuto e il flusso di un interfaccia utente. Egli crea wireframe o schizzi interfaccia utente di condividere le proprie idee con la squadra o cliente. Egli dovrebbe convalidare il suo lavoro facendo walktroughs o storyboard.
• Integrator
L'integratore è l'artista tra il designer e il mondo degli sviluppatori. Prende il patrimonio della progettazione grafica e li integra l'interfaccia utente grezzo dello sviluppatore. Questo ruolo ha bisogno di una rara serie di competenze e quindi è spesso difficile trovare la persona giusta per questo.

1. Introduzione WPF

WPF combina interfacce utente dell'applicazione, grafica 2D, grafica 3D, documenti e multimediali in un unico framework. Il suo motore di rendering vettoriale utilizza l'accelerazione hardware delle moderne schede grafiche. Questo rende l'interfaccia utente più veloce, scalabile e indipendenti dalla risoluzione.
L'illustrazione seguente fornisce una panoramica delle principali novità di WPF:

 
Separazione di aspetto e il comportamento WPF separa l'aspetto di un'interfaccia utente dal suo comportamento. L'aspetto è generalmente specificato nel Extensible Application Markup Language (XAML), il comportamento è implementato in un linguaggio di programmazione gestito come C # o Visual Basic. Le due parti sono legate insieme da associazione dati, eventi e comandi. La separazione di aspetto e il comportamento porta i seguenti benefici:
• Aspetto e comportamento sono debolmente accoppiati• I progettisti e gli sviluppatori possono lavorare su modelli separati.• strumenti di progettazione grafica in grado di lavorare su semplici documenti XML invece di codice di analisi.

Rich composizione

Controlli in WPF sono estremamente componibile. È possibile definire quasi tutti i tipi di controlli come contenuto di un altro. Questa flessibilità è una caratteristica molto potente se si utilizza in modo opportuno. Mettere un'immagine in un pulsante per creare un pulsante immagine, o mettere un elenco di video in un combobox per scegliere un file video.

<button>
<StackPanel Orientation="Horizontal">
<image Source="speaker.png" Stretch="Uniform"/>
<TextBlock Text="Play Sound" />
</ StackPanel></ Button>
Altamente personalizzabile A causa della netta separazione tra aspetto e il comportamento si può facilmente modificare l'aspetto di un controllo. Il concetto di stili permette di pelle controlli quasi come i CSS in HTML. I modelli consentono di sostituire tutto l'aspetto di un controllo.
L'esempio seguente mostra un pulsante predefinito WPF e un pulsante personalizzato.

Risoluzione indipendenza Tutte le misure in WPF sono unità logiche - non pixel. Una unità logica è un 1 / 96 di pollice. Se si aumenta la risoluzione dello schermo, l'interfaccia utente rimane delle stesse dimensioni - si arriva solo croccante. Dal momento che WPF si basa su un motore di rendering vettoriale basato è incredibilmente facile costruire interfacce utente scalabile.

ListBox con immagini

Il seguente esempio mostra come fare per inserire delle immagini in una listbox. La visualizzazione prevede gli items messi in orizzontale e per ogni item e' prevvista un'immagine e un testo alla base.
Per tale scopo viene creata una listbox facente riferimento ad una risorsa "listStyle" che definisce il template per l'item da visualizzare. Si noti che viene nascosta la barra verticale, mentre si utilizzarà solo quello orizzontale.

     <ListBox
      ItemContainerStyle="{StaticResource listStyle}"
      ScrollViewer.VerticalScrollBarVisibility="Hidden">
      <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
          <WrapPanel IsItemsHost="True"  />
        </ItemsPanelTemplate>
      </ListBox.ItemsPanel>
    </ListBox>

A questo punto nella sezione Resources della pagine e del controllo definiamo lo stile per l'item.

    <Style TargetType="{x:Type ListBoxItem}" x:Key="listStyle">
      <Setter Property="Template" Value="{StaticResource listControlTemplate}" ></Setter>
      <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualHeight}" />
    </Style>

In questo modo definiamo i SETTER e facciamo in modo che se la nostra listbox e' ridimensionabile in altezza, gli item verranno ridimensionati in modo da occupare tutta l'altezza e la larghezza verrà ridimensionata in modo proporzionale.
Definiamo quindi lo style listControlTemplate.

   <ControlTemplate x:Key="listControlTemplate" TargetType="{x:Type ListBoxItem}" >
      <Border x:Name="BorderImage" Margin="3,3,3,20" >
        <Grid x:Name="listItemGrid" VerticalAlignment="Stretch" >
          <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="20" />
          </Grid.RowDefinitions>
          <Border BorderThickness="1" Background="Black" >
          <Image  x:Name="coverImage2" Tag="{Binding nPage}"  Source="{Binding ., Converter={StaticResource ImageConverter} }"  Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Grid.Row="0" RenderTransformOrigin="1,1">
            <Image.RenderTransform>
              <TransformGroup>
                <ScaleTransform ScaleX="1" ScaleY="1"/>
                <SkewTransform AngleX="0" AngleY="0"/>
                <RotateTransform Angle="0"/>
                <TranslateTransform X="0" Y="0"/>
              </TransformGroup>
            </Image.RenderTransform>
          </Image>
          </Border>
          <TextBlock Grid.Row="1" Text="{Binding nPage}" FontWeight="Bold"
         HorizontalAlignment="Center" />
        </Grid>
      </Border>
      <ControlTemplate.Triggers>
        <DataTrigger Binding="{Binding Path=sfondo}" Value="1">
          <Setter Property="Background" Value="Aquamarine" TargetName="BorderImage"></Setter>
        </DataTrigger>
        <DataTrigger Binding="{Binding sfondo}" Value="10" >
          <Setter Property="Background" Value="Black"  TargetName="BorderImage"></Setter>
        </DataTrigger>
        <Trigger Property="IsSelected" Value="True">
          <Setter Property="Background" Value="Blue" TargetName="BorderImage"/>
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>

Quindi definiamo che il binding dell'immagine avviene tramite ImageConvert.

<local:ImageConverter x:Key="ImageConverter" />

Questa e' una classe nella quale possiamo prendere le nostre immagini da file, da database o altro. Ovviamente l'informazione sarà nel campo (io normalmente uso delle classi in qui definisco i campi e poi per la lista dei dati uso una ObservableCollection che collego alla listbox.

La classe viene definita in questo modo :

 #region "Converter Image"
  public sealed class ImageConverter : IValueConverter
  {
    public object Convert(object value, Type targetType,
                          object parameter, CultureInfo culture)
    {
      try
      {
        BitmapSource btImage = null;
        PageInfo pg = (PageInfo)value;
        if (pg.IconPath != "")
        {
          BitmapImage ba = new BitmapImage(new Uri(pg.IconPath));
          ba.BeginInit();
          ba.CacheOption = BitmapCacheOption.OnLoad;
          ba.EndInit();
          btImage = ba;
        }
        else
        {
            btImage =new BitmapImage();
        }
        if (btImage.CanFreeze) btImage.Freeze();
        return btImage;
      }
      catch
      {
        return new BitmapImage();
      }
    }
    public object ConvertBack(object value, Type targetType,
                              object parameter, CultureInfo culture)
    {
      throw new NotImplementedException();
    }
  }
  #endregion

La classe PageInfo contiene i campi di cui faccio binding nella listbox; nel campo IconPath c'e' il path dell'immagine.

Ricordarsi di fare il Freeze dell'immagine altrimenti il GC non libererà mai la memoria anche nel caso si pulisca la listview.

Selezionare il contenuto di una TextBox al Focus

Link originale: http://stackoverflow.com/questions/660554/how-to-automatically-select-all-text-on-focus-in-wpf-textbox.

La modifica consiste nell’includere il comportamento come un behavior. Ecco il codice:

public static class TextBoxBehaviors
{
    public static void SetSelectOnFocus(UIElement element, Boolean value)
    {
        element.SetValue(SelectOnFocusProperty, value);
    }
    public static bool GetSelectOnFocus(UIElement element)
    {
        return (bool)element.GetValue(SelectOnFocusProperty);
    }
    public static readonly DependencyProperty SelectOnFocusProperty =
        DependencyProperty.RegisterAttached("SelectOnFocus", typeof(bool), typeof(TextBoxBehaviors),
        new FrameworkPropertyMetadata(false, SelectOnFocusPropertyChangedCallback));

    private static void SelectOnFocusPropertyChangedCallback(DependencyObject depObj, DependencyPropertyChangedEventArgs eventArgs)
    {
        TextBox tb = depObj as TextBox;
        if (tb != null)
        {
            if ((bool)eventArgs.OldValue == false && (bool)eventArgs.NewValue == true)
            {
                //attach events      
                tb.PreviewMouseLeftButtonDown += SelectivelyIgnoreMouseButton;
                tb.GotKeyboardFocus += SelectAllText;
                tb.MouseDoubleClick += SelectAllText;
            }
            else if ((bool)eventArgs.OldValue == true && (bool)eventArgs.NewValue == false)
            {
                //detach events     
                tb.PreviewMouseLeftButtonDown -= SelectivelyIgnoreMouseButton;
                tb.GotKeyboardFocus -= SelectAllText;
                tb.MouseDoubleClick -= SelectAllText;
            }
        }
    }
    private static void SelectivelyIgnoreMouseButton(object sender, MouseButtonEventArgs e)
    {
        DependencyObject parent = e.OriginalSource as UIElement;
        while (parent != null && !(parent is TextBox))
            parent = VisualTreeHelper.GetParent(parent);

        if (parent != null)
        {
            var textBox = (TextBox)parent;
            if (!textBox.IsKeyboardFocusWithin)
            {
                textBox.Focus();
                e.Handled = true;
            }
        }
    }
    private static void SelectAllText(object sender, RoutedEventArgs e)
    {
        var textBox = e.OriginalSource as TextBox;
        if (textBox != null)
            textBox.SelectAll();
    }
}

E’ possibile ora aggiungere nello xaml il comportamento aggiungendo il behavior:

<TextBox Text="Selezionami per provare" behaviors:TextBoxBehaviors.SelectOnFocus="True" />