XAML Blog : Tutorial

WPFAnwendung mit TrayIcon

jpkleinau — Sat, 15 Aug 2009 13:21:00 GMT

Eine WPF Anwendung mit einem TrayIcon zu versehen ist eine einfache Sache. Doch dazu müssen wir uns - bitte nicht erschrecken - bei WindowsForms bedienen. Zuallerst schaffen wir uns wie gewohnt eine WPF Anwendung mit dem Project Wizard. Diese entspricht einer völlig normalen WPF Anwendung und wird auch eine solche bleiben. Natürlich wäre es möglich in einer WindowsForms Anwendung WPF zu hosten, aber das ist nicht der Weg, den wir hier gehen wollen. Sondern wir erweiteren eine WPF Anwendung um Funktionalitäten, die wir von WindowsForms her kennen. Dazu bringen wir die Referenzen "System.Windows.Forms" und "System.Drawing" in unsere Anwendung mit "Add Reference".

Damit wir im Tray erscheinen, benötigen wir auch ein TrayIcon. Das malen wir mal auf die Schnelle in der Oberfläche, nachdem wir zuvor "Add New Item" im Kontextmenü des Projektes aufgerufen und Icon File ausgewählt haben. Dieses nennen wir entsprechend der Anwendung und malen los.

Wenn wir mit unserem künstlerischem Werk zufrieden sind, setzen wir noch die Properties der Icon Datei auf "embedded Resource" und natürlich wollen wir die Datei nicht kopieren.

Dann gehen wir in die App.xaml und rufen den Code Behind auf: App.xaml.cs. Wir machen das in der Anwendung, denn wir wollen ja nicht ein Fenster, sondern die gesamte Anwendung mit einem Tray versehen. Dies geschieht in folgendem Code

 public partial class App : System.Windows.Application
    {
        private System.Windows.Forms.NotifyIcon notifyIcon;

        protected  override void OnStartup(StartupEventArgs e)
        {
            notifyIcon = new System.Windows.Forms.NotifyIcon();

            System.Reflection.Assembly a = System.Reflection.Assembly.GetExecutingAssembly();
            Stream stream = a.GetManifestResourceStream("MyApplication.MyIcon.ico");
            notifyIcon.Icon = new Icon(stream);
            notifyIcon.Text = "Meine Anwendung"; 
            notifyIcon.Click += new EventHandler(notifyIcon_Click);
            notifyIcon.Visible = true;
        }
        
        void notifyIcon_Click(object sender, EventArgs e)
        {
            notifyIcon.BalloonTipText = "Diese Anwendung hat ein Tray Icon";
            notifyIcon.BalloonTipTitle = "Meine Anwendung";
            
            notifyIcon.ShowBalloonTip(2000);
        }
    }

Zuerst müssen wir die Basisklasse von unserer partial class genauer definieren. Durch die Reference von Windows.Forms ist diese nun doppelt besetzt (man kann auch auf das "using System.Windows.Forms;" verzichten, aber warum sollte man). Dann schaffen wir unser TrayIcon als System.Windows.Forms.NotifyIcon. Das befüllen wir im OnStartup - früher benötigen wir das nicht, später wäre aber auch keine so gute Idee. Dazu holen wir uns den ResourceStream aus der Assembly heraus . Wäre schön, den noch auf Null zu überprüfen, der Übersicht halber habe ich das oben nicht getan, ist aber unbedingt empfehlenswert. Wenn es gut klappt, haben wir nun unser gemaltes Icon, das wir nun noch mit einem Click-Handler versehen.

In dem Click-Handler lasse ich ein Ballon Tooltip kurz einblenden. Natürlich kann man da auch alle anderen netten Sachen machen, wie beispielsweise alle Fenster minimieren. Auch kann man statt dem Click-Handler ein ContextMenuStrip erstellen und dem notifyIcon.ContextMenuStrip diesen zuweisen. Dadurch hat man dann ein nettes Menü. Viel Spaß dabei.

Master Detail Forms the WPFand Silverlight Way

jpkleinau — Wed, 15 Jul 2009 14:22:00 GMT

Sometimes things are so easy that you just do not expect them to be that way. The problem is as old as databases and forms. You got an list and a detail form and you want to have it synchronized. There are a lot of solutions in the world to that problem, but there has never been one so easy like in WPF and Silverlight.

In my example I have two texboxes and a listbox. The listbox is showing a list of adresses and the texboxes are displaying name and city. The trick begins with my "dataclass". This one I call AdrLogic and it implements INotifyPropertyChanged. So it looks like that.

class AdrLogic: INotifyPropertyChanged

In my case I fetchted the data from a webservice, but that is another story.

public SilverLightServiceClient.AdrService.AdrServiceClient service = new SilverLightServiceClient.AdrService.AdrServiceClient();

For my data I use an ObservableCollection.

public ObservableCollection <SilverLightServiceClient.AdrService.AdrData> AdressList

And I create an Index for my Collection and here goes the property change.

        public int CurrentIndex
        {
            get { return currentindex; }
            set
            {
                currentindex = Math.Min(value, AdressList != null ? AdressList.Count - 1 : -1);
                OnPropertyChanged("CurrentIndex");
                OnPropertyChanged("CurrentAdress");
            }
        }
        private int currentindex = -1;

        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged(string name)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(name));
        }

So I got a list with an current Index where every change is reported as is the change of the current index pointer. All I have to do now is to connect the data and the index to my XAML.

 <TextBox IsReadOnly="{Binding Path=IsEmpty}" Margin="12,12" HorizontalAlignment="Left" 
VerticalAlignment="Top" Width="120" Height="22" Text="{Binding Path=CurrentAdress.Name, Mode=TwoWay}" />
 <TextBox IsReadOnly="{Binding Path=IsEmpty}" Margin="12,40" HorizontalAlignment="Left" 
VerticalAlignment="Top" Width="120" Height="22" Text="{Binding Path=CurrentAdress.City, Mode=TwoWay}" />

<ListBox Margin="140,12" Width="200" Height="200" HorizontalAlignment="Left" 
   VerticalAlignment="Top" SelectedIndex="{Binding Path=CurrentIndex, Mode=TwoWay}" 
    ItemsSource="{Binding Path=AdressList}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" >
                        <TextBlock Text="{Binding Name}" Margin="0,0,50,0" />
                        <TextBlock Text="{Binding City}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

The TwoWay Binding is now doing all the synchronization for me. By binding the SelectedIndex to the CurrentIndex of the indexed Observable Collection, there is always the selected data in my detail form.

Media-Dateien, Fonts einbetten in WPF Anwendungen - Mini Tutorial

jpkleinau — Tue, 16 Jun 2009 16:52:00 GMT

Der New Yorker Nick Thuesen schrieb in seinem Blog über das Einlagern von Fonts in einer Windows Presentation Foundation (WPF) Anwendung ("Embedding and Referencing Fonts in your application and/or library"). Der Artikel beschreibt in Kürze die einfache Funktionalität, doch dass es im Endeffekt funktioniert - ist irgendwo auch ein Stück Zufall. In dem folgenden kleinen Artikel habe ich das Beispiel nach Orcas transferiert und zeige, dass die Einbettung von Resourcen nicht nur mit Fonts funktioniert, dass es sie auch in .Net 3.5 gibt - und warum es bei Nick vielleicht ein Zufall war ;-)

Aufsetzen des Projektes

Das WPF Projekt "EmbeddedResourceExample" wird über den Wizard erstellt und eine gleichnamige neue Solution angelegt. Wir verwenden Visual Studio 2008 und .Net 3.5, denn wir wollen ja schließlich was neues machen (ist natürlich nicht besonders neu, denn 3.5 unterscheidet sich hier kaum von der .Net 3.0 Version - aber es ist schön zu sehen, dass es funktioniert und aufwärts kompatibel bleibt).

Als nächstes erzeugen wir eine Bibliothek. Wir verwenden eine ClassLibrary. Zwar benötigen wir keine extra C# Klassen für den hier gezeigten Fall, aber der Overhead ist recht klein und in einem realen Projekt würden die Resourcen vermutlich mit entsprechend passenden Klassen zur Resourcenmanipulation begleitet. Die dabei erzeugte Klasse "Class1.cs" können wir aber beruhigt löschen - die braucht kein Mensch.

Wichtig ist es, die Bibliothek sofort als Referenz einzutragen, sonst stehen die Resourcen nicht zur Verfügung.

Einbetten von Bildern und Fonts

Dann werden die Ordner für Fonts und Bilder angelegt. Mit Hilfe von Drag&Drop sammeln wir uns die Fonts und die Bilder zusammen, die wir benötigen. Beim Drag&Drop werden die Bilder automatisch kopiert und in die korrekten Verzeichnisse gelegt.

Die Solution sollte nun so aussehen wie rechts zu sehen.

Nun müssen die kopierten Dateien mit dem korrekten Property versehen werden. Das betreffende Property "Build Action"

muss auf den Wert "Resource" (NICHT als "Embedded Resource") gesetzt werden. Die restlichen Einstellungen sind meist schon korrekt. So dürfen die Dateien nicht in das Output Verzeichnis kopiert werden ("Copy to Output Directory" = "Do not copy").

Wichtig für den weiteren Prozess des Ausprobierens ist es, noch kein Build durchzuführen. Bei einem realen Projekt würde dies allerdings nicht sofort nach Zufügen und setzen der Properties erfolgen.

Das Coding

Besonders komplizierter Source Code erwartet uns auf den ersten Blick nicht. Wir tragen folgendes in die Datei "Window1.xaml" ein.

<Window x:Class="EmbeddedResourceExample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Embedded Resources" Height="500" Width="520">

<StackPanel Margin="10">

<!--Use Font Embedded In Exe-->
<TextBlock FontFamily="/Fonts/#Federation" FontSize="25" Text="Embedded Font aus der Anwendung" />

<!--Use Font Embedded In Library-->
<TextBlock FontFamily="/EmbeddedResourceLibrary;Component/Fonts/#FederationDS9Title" FontSize="25" Text="Embedded Font aus der Bibliothek" />

<!--Use Picture Embedded In Library-->
<Image Name="xtopia" Height="375" Width="500" Source="/EmbeddedResourceLibrary;Component/Pictures/xtopia.jpg" />
</StackPanel> 
</Window>

Aber sofort nach dem Eintragen des XAML erhalten wir eine Menge von Fehlern, die darauf beruhen, dass die Resourcen Bibliothek "EmbeddedResourceLibrary" noch nicht erstellt wurde und daher nicht gefunden werden kann.

Das Ergebnis

Also werfen wir ein "Rebuild All" an, damit auch alles korrekt erstellt wird. Kurz daraufhin sehen wir folgendes Bild in Visual Studio 2008.

Wir sehen also, dass Visual Studio 2008 in der vorliegenden Beta 2 nicht die Fonts benutzt, die wir als Resourcen hinterlegt haben. Das gleiche Ergebnis erwartet uns in der Preview von Expression Blend 2. Die Fonts werden einfach nicht im Designmode verwendet.

Drücken wir aber "F5", so erhalten wir genau das, was wir wollten.

Tipps und Tricks

Als erstes will ich aufklären, warum Nicks Beispiel nur per Zufall funktionierte und leicht jeden anderen verwirren kann.

Fontnamen sind keine Dateinamen

Wie man im Coding und in dem Solution Explorer erkennt, unterscheidet der entsprechende Resource-Loader zwischen Fontnamen und Dateinamen bei Fonts. Es werden grundsätzlich Fontnamen ausgewertet, egal wie der Name der Datei lautet. Bei Nick war dies identisch, daher funktionierte es - ich wählte hier extra sehr unterschiedliche Namen.

Bibliotheken, Namen und Ordner

Bei der Verwendung von Bibliotheken für Resourcen, was ich unbedingt empfehlen würde, muss die Notation "/EmbeddedResourceLibrary;Component/" (also Bibliotheksname) beachtet werden. Ordnernamen kommen dahinter (siehe Coding).

Performanz und Speicher

Die übermäßige Verwendung von in Programmcode oder Bibliothekn eingebetten Resourcen sorgt zwar für ein schnelles Ladeverhalten bei der Darstellung, nicht aber beim Programmstart. DLLs werden geladen und verbleiben im Speicher. Wer darauf achten muss oder will, der sollte eine dynamischere Variante verwenden.

p.s.
Das Photo für das Beispiel entlieh ich aus Marc Thiele Flickr Bibliothek und zeigt mich und Carlo Blatz auf der XTopia 2007 bei unserem Track,

WPF4Beginners: verrückte Wege für das Layout gleichgroßer Elemente

jpkleinau — Mon, 25 May 2009 16:52:00 GMT

Es gibt 50 Wege die Freundin (den Freund) zu verlassen und etliche davon führen nach Rom. In einer Kaffeepause haben wir gegrübelt, wieviele Möglichkeiten es geben mag, gleichgroße Elemente in einem WPF Fenster unterzubringen. Hier sind die ersten Methoden. Für die gleichgroßen Elemente verwende ich in den Beispielen Buttons. Die Nachahmung ist nur bedingt zu empfehlen ;-)

Gridlayout

Über das Layout mit einem Grid kann die Größe durch die ColumnDefinitions und RowDefinitions festgelegt werden. Die Elemente werden durch die Zuordnung zu Spalten und Reihen in der Größe definiert. Will ich nun die Buttons verändern, muss ich die Spalten- und Reihendefinitionen verändern. Damit habe ich fast perfekt das Layout im Griff, allerdings immer noch mehr als eine Stelle, in welcher ich die Größe ändern muss.

<Grid x:Name="Sizer" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="10" />
        <ColumnDefinition Width="100" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="30" />
        <RowDefinition Height="10" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Button Grid.Column="0" Grid.Row="0"/>
    <Button Grid.Column="2" Grid.Row="0"/>
    <Button Grid.Column="0" Grid.Row="2"/>
    <Button Grid.Column="2" Grid.Row="2"/>
</Grid>

Das Ergebnis sieht so aus:

Layout per Style und Stackpanel

Das Stackpanel sortiert recht hübsch jeweils nach Vertikal oder Horizontal meine Elemente. Über Styles kann ich Werte eines Elementtypen festlegen. Dabei muss ich mich spezifischer dem Zieltypen (Tagettype) nähern, je typischer die zu beeinflussenden Eigenschaften (Properties) sind. Bei Höhe und Breite kann ich recht abstrakt bleiben und bin bei dem FrameworkElement noch gut aufgehoben.

<StackPanel >
    <StackPanel.Resources>
        <Style x:Key="Sizer" TargetType="FrameworkElement">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="30"/>
            <Setter Property="Margin" Value="0,0,10,10" />
        </Style>
    </StackPanel.Resources>
    <StackPanel Orientation="Horizontal">
        <Button Style="{StaticResource Sizer}"/>
        <Button Style="{StaticResource Sizer}"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal">
        <Button Style="{StaticResource Sizer}"/>
        <Button Style="{StaticResource Sizer}"/>
    </StackPanel>
</StackPanel>

Das sieht dann so aus. Der Nachteil wird dabei deutlich. Ich habe zwar nur eine Stelle, an der ich die Größe und die Abstände ändern muss, aber wenn ich später noch mehr Eigenschaften über Styles ändern will, muss ich sie kaskadieren oder mit BasedOn vererben und die Verwaltung und Organisiation von Styles in größeren Anwendungen ist ein Buchkapitel für sich.

Layout per DataBinding und WrapPanel

Das Wrappanel stapelt vorzugsweise horizontal und wenn das nicht klappt beginnt es eine neue Reihe. Die Breite, Höhe und Abstand der Elemente wird nun über ein Master-Element bestimmt, an dessen Properties die anderen Elemente sich orientieren. Die Orientierung erfolgt per Datenbindung. D.h. die gebundenen Eigenschaften des gebundenen Elements sind gleich der Eigenschaften des Masters.

<WrapPanel Width="220">
    <Button x:Name="Sizer" Width="100" Height="30" Margin="0,0,10,10" />
    <Button Width="{Binding ElementName=Sizer, Path=Width}" 
            Height="{Binding ElementName=Sizer, Path=Height}" 
            Margin="{Binding ElementName=Sizer, Path=Margin}" />
    <Button Width="{Binding ElementName=Sizer, Path=Width}" 
            Height="{Binding ElementName=Sizer, Path=Height}" 
            Margin="{Binding ElementName=Sizer, Path=Margin}" />
    <Button Width="{Binding ElementName=Sizer, Path=Width}" 
            Height="{Binding ElementName=Sizer, Path=Height}" 
            Margin="{Binding ElementName=Sizer, Path=Margin}" />
</WrapPanel>

Das ist mit Sicherheit die lustigste Art und Weise, gleichförmige Elemente zu erzeugen. Das Spannende daran ist, dass sie einiges an Vorteilen bietet: ich habe nur eine Stelle zum Ändern und alle nicht betroffenen Eigenschaften kann ich munter über Styles manipulieren. Der Nachteil (neben den schlecht lesbaren XAML Code) ist die kaum nachvollziehbare Struktur einer etwas komplexen Maske. Es gibt keine Darstellung, in welcher das Databindung erkennbar wäre.

Noch mehr Möglichkeiten?

Es sind uns noch andere Möglichkeiten eingefallen: von eigenen Controls (Custom, User), Templates in Itemlisten, ValueConverter für Größe und so weiter und so fort. Ob ich diese mal in einer ruhigen Minute aufzählen werde, weiß ich nicht. Die obigen Beispiele fand ich recht gut, um kurz und knackig mal die Layout Container, Styles und Databinding anzuschneiden. Wer Lust und Zeit hat, in dem eigenen Blog oder per Mail weitere verrrückte Wege für das Layout gleichgroßer Elemente aufzuzeigen, den verlinke ich hier gerne oder schreibe doch einfach einen Kommentar oder ein Trackback zu deinem Blog. Ich bin neugierig, ob sich jemand was wirklich schräges einfallen lässt.

WPF Animations On Slow Systems

jpkleinau — Tue, 10 Feb 2009 12:22:00 GMT

There is always the demand that the new fancy application with all the animations has to do exactly the same job on slow office machines as on high end gaming engines. There are serveral ideas and recommodations to reach that goal. But most of them will lead only to failure. And that is why.

Usually animations are measured in Frames. Let us start with a simple example (the following is harshly exaggerated but based on a real case with a complex animation. But for just making the point it is sufficient).The ball has to reach the wall dropping two times on the ground before. The Animation is shown in 15 Frames.

O				O	O				O	O				O
	O		O			O		O			O		O
		O					O					O
1	2	3	4	5	6	7	8	9	10	11	12	13	14	15

.
In a system capable of showing 10 frames per seconds the animation will be done in 1,5 seconds. A gaming system with 30 frames per seconds will be finished one second earlier. That is not what we want. After all the sound team developed a superb soundfile for two plopps and one bang with an exact duration of one second. So we use DoubleAnimation for our bouncing ball setting a duration and start again. And to no surprise it works in time. But alas the animation is looking awful like a robotic pacman on the gaming system and looks like that on the slow office system:

O				O					O					O
		O				O		O			O		O

1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
t = 1 second

.
So our next try is DoubleAnimationUsingKeyFrames and we are using SplineDoubleKeyFrames to make the ball bounce more realistic. Now it really looks cool on the gaming system, synchronous to the soundfile and everybody seems to be happy. But as old Murphy told us, something always goes wrong. In this case it is the old office system or the NVIDIA driver on the presentation Laptop. The ball does not bounce at all, it jumps.
.

O				O					O					O
					O						O
		O					O					O
1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
t = 1 second

.
Beside the fact, that this simple animation eats up 25 percent of CPU power, it still looks awful. And what do we learn? You cannot produce nice looking time-based animations on an old office system with WPF? Sadly that is true. There are some ways to work around that problem, using CompositionTarget.Rendering or develop a own animation class and manipulate the value based on timespans. But there is no way to create a clean and nice looking animation with standard classes for slow systems. You can always rely on the old Flash bag of tricks (e.g. using two animations based on clock controlled value changes with a second animation as a washed shadow of the moving ball). But like Iron Maiden singer Bruce Dickinson once stated: "Oh no sorry, you can't play heavy metal with a synthesizer."

As I said, this is highly exaggerated, and nobody should be afraid of bouncing a ball with WPF on any computer system capable of carrying Vista. But when it comes to complex 3D animations, stop the marketing department from spreading promises nobody can keep.

p.s.

Few years later since the album Somewhere In Time (1986) Iron Maiden started to use synthesizers.

Fade away - Opacity Blending von Masken

jpkleinau — Wed, 28 Jan 2009 11:57:00 GMT

Um Masken ein- oder auszublenden scheint die entsprechende Animations sehr simpel. Man nehme schlicht und ergreifend die Maske, schenke ihr eine DoubleAnimation und reduziere das OpacityProperty in einem angemessenen Zeitraum auf den Wert 0. Doch leider stellt man fest, dass die auszublendende Maske im Ausblenden genauso anklickbar ist, wie im normalen Maskenleben.

Einfallsreiche legen dann einen Canvas als Klickschutz darüber, um das Klicken zu unterbinden und es scheint, dass nun das unverklickbare Ausblenden gerettet ist. Doch damit das gut funktioniert müssen folgende Bedingungen gültig sein.

Der neue Klickschutz-Canvas muss im Z-Layer über allen anderen Masken liegen.
Die nun anzuzeigenden Masken (Einblendung) müssen im Z-Layer unter den alten Masken liegen.

Will man die gesamte Maske aus- oder einblenden, dann ist das noch relativ leicht machbar. Doch will man einzelne Masken nachladen und dabei einblenden, so muss man diese in einen neuen Canvas kopieren (parent, ist hier im Codebeispiel ein Panel, welches die auszublendenden Maskenteile enthält).

blender = new Canvas();blender.Width = ((Panel)parent).ActualWidth;
blender.Height = ((Panel)parent).ActualHeight;
newblender = true;UIElement[] arr =
       new UIElement[((Panel)parent).Children.Count];
((Panel)parent).Children.CopyTo(arr,0);
((Panel)parent).Children.Clear();
foreach (UIElement ele in arr)
{
    blender.Children.Add(ele);
}

Insgesamt eine recht einfache Sache, doch irgendwie lästig. Das geht auch eleganter.

Man nehme die wunderbare Klasse “RenderTargetBitmap”, verwende die festgezimmerte Bildschirmauflösung von 96dpi und mache einen Screenshot von den Elementen, die auszublenden sind.

void SnapIt(Panel blender){       

    RenderTargetBitmap rtb = new
               RenderTargetBitmap((int)blender.ActualWidth,
               (int) blender.ActualHeight,
               96d, 96d, PixelFormats.Pbgra32);       

    rtb.Render(blender);
    Image img = new Image();
    img.Source = rtb;      blender.Children.Clear();    
    blender.Children.Add(img);
    DoubleAnimation dba = new DoubleAnimation(1d, 0,
         new Duration(TimeSpan.FromSeconds(opacityBlendingSeconds)));       

    dba.Completed += new EventHandler(blender_Completed);
    blender.BeginAnimation(Image.OpacityProperty, dba);
}

Damit sich das auch sauber beendet wird noch am Ende der Animation der Eventhandler aufgerufen, der schließlich das Image wieder entfernt.

void blender_Completed(object sender, EventArgs e)
{       

    if (sender != null && sender is Image
        && ((Image)sender).Parent != null
        &&  ((Image)sender).Parent is Panel)
    {
        lock (sender)
        {
            ((Image)sender).Visibility = Visibility.Hidden;
            ((Panel)((Image)sender).Parent).Children.Remove(((Image)sender));
        }
    }
}

Nicht vergessen sollte man, dasss man mit mehreren Threads arbeitet, also munter Exception fangen und behandeln (hier im Codebeispiel verzichte ich aus Platzgründen auf die entsprechende Fehlerbehandlung).
Insgesamt kann man mit den Screenshots (genauer dem Rendern in eine Bitmap) recht gut arbeiten. Es sind eine Menge Effekte denkbar, nicht nur das Aus- und Einblenden.

WPF4Beginners: UniformGrid - wozu braucht man den?

jpkleinau — Tue, 25 Nov 2008 16:11:00 GMT

Die Klasse UniformGrid ist eine der wenig beachteten in dem .Net 3.5 Framework. Dabei ist sie recht praktisch in der Anwendung. Sie sorgt dafür, dass sämtliche darin enthaltenen Zellen und Spalten die gleiche Größe haben. Sie ist damit die einfache aber auch stark limitierte Version des bekannten Grids. Der typische Anwendungsfall ist die Tastatur eines Taschenrechners. Dabei fallen sofort zwei Sachen auf.

Es wird nur einmal der Platzbedarf eines Buttons definiert. Dieser gilt danach für alle weiteren, da die Zellenhöhe und -breite feststehen. Und es gibt auch nur einen Button.Click. Dieser wird in dem Grid verdrahtet und leitet als Routed Event das Klick Ereignis weiter. Dieses wird im Code Behind gefangen und die Quelle des Ereignisses wird überprüft.

private void UniformGrid_Click(object sender, RoutedEventArgs e)
{
    Button button = e.Source as Button;
    if (button != null && button.Content as string != null)
    {
        switch (button.Content as string)
        {
            // irgendwelche Mathefunktionen
            default:
                this.Textfeld.Text += button.Content as string;
                break;
        }
        
    }
}

Im Grunde also eine sehr einfache Sache, ein Bedienfeld irgendeiner Art zu gestalten.

XTOPIA 2008: WPF Anwendungen optimieren

jpkleinau — Mon, 17 Nov 2008 17:17:00 GMT

Ein für mich interessanter Track war derjenige von Dirk Primbs mit dem Thema "WPF Anwendungen optimieren". Dirk Primbs hat den Job als Evangelist bei Microsoft und soll Technologie Wissen unter das Volk bringen.

Dirk baute seinen Vortrag von Grund auf und erklärte das Threading Modell von WPF auf Dummy Niveau um das Retaining von WPF zu erklären. Dann ging er über die die Elemente des Visual Trees zu der Erklärung, warum viele Elemente langsam sind, da sie den Rendering Thread belasten. Dazu kommt noch, dass die Elemente mit Hittests und anderen UI Events das System belasten. Das stimmt zwar zum großen Teil, ist aber eigentlich eine Kinderweisheit. Aber man muss Dirk einfach recht geben, selbst "Kinderweisheiten" werden immer wieder missachtet.

Das kann Dirk auch an einem Beispiel zeigen. Er verwendet das Photo Demo aus dem SDK und zeigt anhand des SNOOP Tools, das sich an die WPF Anwendungen hängt. Mit dem Tool hält er sich eine Weile auf. Das Tool ist nicht allzuschlecht. Es ist eine WPF des Spy++ Fensterspions.

Das nächste Tool, das Dirk vorstellt, ist die WPF Performance Suite. Der optisch wenig gut gestylte Werkzeug enthält 5 gute Werkzeuge. Das Tool will als Admin starten und erwartet das auch von den Programmen. Mit dem "Perforator" Werkzeug schaut sich Dirk über "Launch Application" den Photostore erneut an. Der Perforator zeigt in mehreren Charts verschiedene Werte für die Anwendung an, unter anderem Frame Rate (wichtig für gut laufende Animationen), Video Speicher (die Menge des verbrauchten Video Speichers ist für Hardware und Software Rendering interessant), HWT IRT per Frame für Zwischenbitmaps beim Rendern, SW IRTs per Frame, Dirty Recht Addition Rate. Mit den Optionen kann man sich die Software Rendered Bereiche farbig anzeigen lassen. Farbig kann man sich auch die Aktualisierungen in der Oberfläche anzeigen lassen. Mit weiteren Optionen kann man sich die Auswirkungen von Optionen anschauen.

Ein weiteres Werkzeug aus der Performance Suite ist der Visual Profiler. Mit diesem kann man erkennen, welche Zeit in welchen Aktionen verloren geht. Spannend ist in dem Tool der "Unlabled Time" Block, der die Auswirkungen des eigenen Codes auf WPF anzeigt. Im Element Tree Hot Path kann man sich die Elemente anzeigen lassen, die heftig CPU Zeit verbrauchen.

Natürlich entdeckt Dirk in dem Photo Demo einen Bitmap Effekt. Diese werden in der aktuellen Version von .Net 3.x noch per Software gerendert. Dies wird sich voraussichtlich ändern. Bereits mit dem Service Pack für .Net 3.5 wird das Drop Shadow per Hardware erzeugt - weitere werden folgen. Doch aktuell bringt das richtig Performanz darauf zu verzichten.

Um uns ein wenig Spaß zu gönnen, wirft Dirk ein 80 Photos mit ordentlich Megapixel dem Photo Demo vor. Das dauert und dauert und schließlich zieht die Demo 1,2 GB an Speicher. Das Demo hat sich die Bilder als Vollformatbilder geholt und entsprechend aufgebohrt. Durch das einfache Databinding des Source des <Image /> an das Bild wird der Speicher verbraten. Durch die Verwendung des BitmapImage Objektes beispielsweise durch einen Konverter (IValueConverter) oder durch die Änderung des ObjectDataProviders also in den Daten. Dadurch reduzierte er die Daten auf auf 40 MB bei gleicher Datenmenge.

Dirk zeigte in seiner sehr guten Session, dass Anwendungen in WPF schlank und schnell sein können. Doch dazu muss man ein wenig Wissen über den internen Aufbau des .Net Frameworks haben. Wer einfach vor sich hin programmiert oder zeichnet, kann sehr schnell in Fallen laufen, die sich leicht hätten vermeiden lassen. Allerdings ist dazu zu sagen, dass Microsoft viele dieser Fallen bereits in Patches und zukünftigen Versionen adressiert hat und das Framework anpasst. Dies betrifft vor allen Windows 7 und .Net 4.x. Trotzdem schadet es auf keinen Fall, eine Anwendung ordentlich zu optimieren.

WPF TreeView und bubbling Events mal genauer

jpkleinau — Fri, 22 Feb 2008 13:29:00 GMT

Mein Kollege Nikolay R. Nikolov arbeitet mit mir gemeinsam an einem spannenden Projekt im Bereich der Steuern/Finanzen. Bei seinen Forschungen mit Visual Studio 2008 und .Net 3.5 findet er das eine oder andere Blümchen der Programmierkunst. Ich habe ihn gebeten eine besonders hübsche Blume zu pflücken und hier ist sie:

Wenn der Postmann zweimal klingelt

Die Entwicklung von WPF Anwendungen führt manchmal zu erstaunlichen Situationen, die jedoch logisch erklärbar sind. Ein nettes Beispiel ist das Abfangen von Events wie „DoubleClick“ auf ein TreeViewItem Objekt innerhalb eines TreeView’s. Ich hab es probiert und wurde geradewegs mit Folgendem konfrontiert:

Das Event kommt mehrfach (im konkreten Fall zwei mal) an. Der allererste Gedanke, dass man aus Versehen einen „SingleClick“ abgefangen hat, ist falsch.

Der zweite, dass man xxEventArgs (im Weiteren einfach args gennant), also args.Handled = true beim ersten Ankommen setzen sollte, erweist sich auch als falsch: denn beim zweiten Mal kommt es mit args.Handled == false wieder.

Der Programmierer schaut nun erst jetzt auf den sender Parameter und da hat man die Lösung des Rätsels: das erste Mal ist der Sender das „eigene“ TreeViewItem (oder this in C#), das zweite Event kam bei mir mit sender == root (oder die TreeViewItem-Wurzel).

Zufälligerweise lag im Moment das angeklickte Objekt in der ersten Verästelung im Baum, sonst würde das Eventsignal entsprechend der Tiefe des Knotens oft auftreffen. Und vollkommen logisch ist das zudem auch. Wenn man in Visual Studio mit Mole auf den physischen Baum (das VisualTree) schaut, lernt man, dass expandierte Knoten (TreeViewItem’s) im TreeView duch ein Expander realisiert sind, und der Expander enthält seine Kinder, d.h. wenn man auf die Fläche eines TreeViewItem’s klickt, klickt man auch auf die Fläche jedes anderen expandierten Knoten rückwärts in der Baum-Hierarchie. Die Reihenfolge der Events ist jetzt auch logisch: vom innersten zum obersten. Und mit „bubbling“ Events lässt sich dies nicht erklären, sonst würde beim Setzen von Handled=true das Ereignis als abgearbeitet gesetzt bleiben. Es sind eben die „persönlichen“ Events – der hierarchisch höher liegenden Knoten, die man normalerweise gar nicht abfangen will (zumindest nicht, bevor man den Nutzen darin erkannt hat).

Die Erkenntnis ist folglich (C# Fragment):

void OnDoubleClick ( object sender, MouseButtonEventArgs args )
{
    if ( sender != this ) // Ignore event when not for me (but for child items of mine)
        return;
    ...
    args.Handled = true;
);

Am Anfang der Behandlung des Event’s muss man darauf vorbereitet sein, dass es nicht nur für „mich“ passiert. TreeView sollte man als typisches WPF Control wahrnehmen. Bei seiner Benutzung lernt man, dass der innere Aufbau trotzdem nicht „gekapselt“ ist, sondern „nach außen durchschlägt“ und von Bedeutung ist.

Bitte beachten: Komplexere Fälle, z.B. dass ein TreeViewItem ein (oder mehrere) TreeView’s als Items direkt oder indirekt enthalten kann, wurden noch nicht untersucht. Es könnte nämlich sein, dass man so auch an „andere“ Events kommt, die man auch nicht vor hat, abzufangen.

WPF Rendern im Hintergrund

jpkleinau — Fri, 30 Nov 2007 14:35:00 GMT

Wer mit der Klasse "RenderTargetBitmap" arbeitet und für den Benutzer unsichtbar eine Oberfläche rendern will, der ist vor Überraschungen nicht geschützt. Will man die Bilder als PNG oder als JPG speichern, so kann man völlig überraschend vor einem schwarzen Bild stehen und dieses wird sich auch nicht so einfach ändern.

Ursache dafür ist die Optimierung bzw. die Multithreading Politik von WPF. Wir können die nachlesen in der Beschreibung der UIElement.Measure Method

Layout updates happen asynchronously, such that the main thread is not waiting for every possible layout change. Querying an element via code-behind checking of property values may not immediately reflect changes to properties that interact with the element's sizing or layout characteristics (the Width property, for example).

Wollen wir also erfolgreich und sicher rendern, dann wäre dies im Falle eines Canvas genau der richtige Weg:

canvas.Arrange(new Rect(new System.Windows.Point(0, 0), new System.Windows.Size(height, width))); canvas.UpdateLayout(); // render picture RenderTargetBitmap bmp = new RenderTargetBitmap(width, height, 96, 96, PixelFormats.Pbgra32); bmp.Render(canvas);

Damit verhindern wir MemoryLeaks durch Überreste in der Queue und zudem zwingen wir den Canvas über seinen Inhalt nachzudenken. Das folgende Speichern über einen BitmapEncoder wird mit Hilfe eines Streams zum Kinderspiel.

Cider - Tipps für WPF in Visual Studio 2005

jpkleinau — Tue, 30 Oct 2007 12:45:00 GMT

Wenn man in Visual Studio das WPF Designer Preview Cider verwendet, wird man auf einige Probleme stoßen. Ein erstaunliches ist dabei, die Blockade von DLLs, die man gerne kompilieren möchte. Dies passiert, wenn man eine vernünftige und unbedingt notwendige Designtime-Unterstützung in seinem Projekt für Blend erzeugt. Die Fehlermeldung lautet, dass die DLL nicht überschrieben werden kann, weil sie gerade verwendet wird. Dabei läuft augenscheinlich kein Prozess, der die gerade zu programmierende Anwendung verwendet.

Doch ein Prozess ist am Laufen, der Designer in Visual Studio. Dieser ist so hartnäckig, dass er die DLLs nicht freigibt, auch wenn die betreffende XAML Datei gar nicht mehr geöffnet ist. Das ist durchaus verständlich, gehört doch das Entladen von DLLs aus dem Prozess zu den wirklich kniffligen Dingen.

Nun, gibt es auch dafür eine einfache Lösung:

Man nehme den rechten Mausklick auf den XAML Files und verwende ein "Öffnen mit" ("Open with"). Dort kann man dann den XML Editor mit "Set as Default" einstellen und sich in Zukunft seines Lebens freuen. Denn Cider gewann bei mir in Verhältnis zu Expression Blend noch nie ein Rennen, stürzt leider öfter ab oder schafft die Masken nicht darzustellen. So habe ich mein IntelliSense und dank sauberem Schema bleibt auch jede Fehlermeldung und das Syntaxhighlighting perfekt.

Animierte GIFs aus WPF Animationen

jpkleinau — Wed, 27 Jun 2007 12:52:00 GMT

Um WPF Animationen in animierte GIFs umzuwandeln, stellt uns System.Windows.Media.Imaging die Klasse GifBitmapEncoder zur Verfügung. Diese macht unser Leben deutlich einfacher. Alles was wir nun noch machen müssen, ist die Animation Frame um Frame abzufotografieren. Das ist sicherlich keine allzu schöne Lösung, doch da es sich bei den WPF Animationen nicht um framebasierte Überblendungen von Einzelbildern handelt, müssen wir entsprechend des Aufbaus von GIFs ein wenig auf Optimierung und Schönheit zumindest bei der Aufnahme verzichten.

In meinem Beispiel verwende ich einen Viewport mit dem schönen Namen "Illusion", da ich darin eine Animation ablaufen lassen, die ich mir von IanG ausgeliehen habe. Dementsprechend habe ich das dazu passende Storyboard mit dem Namen "IllusionStoryboard" versehen. Das macht es mir einfacher die Fotos zu schießen.

Mein Fenster erweitere ich um ein DependencyProperty. Das macht den Umgang mit den WPF Animationsklassen deutlich leichter, wie man unten sehen wird.

public static readonly DependencyProperty FrameProperty =
DependencyProperty.Register(
                "Frame",
                typeof(double),
                typeof(Window1),
                new PropertyMetadata(new PropertyChangedCallback(FrameChangedCallback)));

Im Loaded EventHandler meines Fensters, lege ich verschiedene Member an. Nicht zu vergessen natürlich meinen GifBitmapEncoder. Aber auch die DoubleAnimation, um meine Fotos pünktlich zu schießen (man kann sowas auch ohne DoubleAnimation sehr gut und eventuell besser durchführen, aber wir befinden uns hier im XamlBlog - schon vergessen?).

void Window1_Loaded(object sender, RoutedEventArgs e)
{
  DoubleAnimation dbl = new DoubleAnimation(0, numberFrames, new Duration(TimeSpan.FromSeconds(2)));
  dbl.AccelerationRatio = 1;
  BeginAnimation(Window1.FrameProperty, dbl);
  encoder = new GifBitmapEncoder();
}

Da wir im eine PropertyChangedCallback angegeben haben, ist unsere Aufgabe nur noch darauf reduziert, dass wir dort die Fotos schießen und am Ende der Animation, diese Fotos auch abspeichern.

private static void FrameChangedCallback( DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    Window1 w = d as Window1;
    if (w != null) 
    {
        RenderTargetBitmap rtb = new RenderTargetBitmap((int) w.Illusion.ActualWidth, 
                                                        (int)w.Illusion.ActualHeight, 96d, 96d, PixelFormats.Pbgra32);
        rtb.Render(w.Illusion);
        BitmapFrame bF = BitmapFrame.Create(rtb);
        w.encoder.Frames.Add(bF);

        if ((double)e.NewValue == numberFrames)
        {
            Image img = new Image();
            int i = w.encoder.Frames.Count;
            FileStream stream = new FileStream("myAnimation.gif", FileMode.Create);
            w.encoder.Save(stream);
            stream.Close();
        }
        
    }
}

Das Ganze ist recht nett und schnell mal dahinprogrammiert, rein um die Möglichkeiten zu testen. Wenn man das ordentlich machen will, dann sollte man auf die Framerate des erzeugten GIFs eingehen und entsprechend die Animation auf Frames umstellen, damit man die Fotos korrekt schießt. Doch für's erste Ausprobieren soll das hier reichen.

Lange Animationen in Kapitel unterteilen mit ResourceDictionary und Wiederverwendung

jpkleinau — Wed, 18 Apr 2007 09:34:00 GMT

Das unten geschilderte Verfahren ist besonders für den Anwendungsfall gedacht, dass eine langläufige Animation mit sich wiederholenden Elementen erzeugt werden soll. Vor dieser Herausforderung stand ich Anfang 2007, mit einer Menge Arbeit und Beta Werkzeugen vor mir. Diese Lösung mag eventuell auch manchen Programmierer noch interessieren, der als Amateur-Designer vor der Aufgabe steht, eine optimierte, schnelle Animation zu erzeugen.

Für den Kommunikationsriesen in Magenta wurde Vista zu einem kleinen Alptraum. Schließlich liefen seine wunderbaren Flash-Animationen auf den Install-CDs nicht mehr. Diese teilweise minutenlange Animationen galt es neu zu gestalten. Aber endlose Animationen in XAML sorgen für recht aufwändig zu pflegende und kaum wartbare Animationsdateien. Zwar kann man mit Hilfe der <ResourceDictionary.MergedDictionaries> die Resourcen wunderbar aufteilen. Doch dann sind da immer noch die langen Laufzeiten, wenn man ganz am Ende seiner 3,5 Minuten Animation ein Bild drei Pixel nach links schieben muss und mit Opacity Blending ausblenden soll.

In der bunten Theorie der Werbeankündigungen, soll der Expression Blend uns dabei unterstützen. Aber was Timeline, Layer oder andere Nettigkeiten betrifft, ist das Werkzeug von Microsoft den Flashworkbenchs einfach unterlegen und war Anfang Januar 2007 wirklich nicht frei von Bugs. Was bleibt ist die Realisierung im Visual Studio oder mit Hilfe der freundlichen Pads - meine Wenigkeit bevorzugt Visual Studio - wen wunderts, ich bin in der Hauptsache Programmierer und in der zweiten Reihe Designer. Aufgeteilt werden muss eine Animation (meine bestand aus 8 Kapitel mit je rund 30 Sekunden) immer noch.

<Window.Resources>      

    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source=”Kapitel1.xaml”/>
        <ResourceDictionary Source=”Kapitel2.xaml”/>
        <ResourceDictionary Source=”Kapitel2.xaml”/>
        <ResourceDictionary Source=”Kapitel4.xaml”/>
        <ResourceDictionary Source=”Kapitel5.xaml”/>
        <ResourceDictionary Source=”Kapitel6.xaml”/>
        <ResourceDictionary Source=”Kapitel7.xaml”/>
        <ResourceDictionary Source=”Kapitel8.xaml”/>
      </ResourceDictionary.MergedDictionaries>
     </ResourceDictionary>      

  </Window.Resources>

Dann heißt es, die Startklasse meines Fensters mit zwei winzigen Funktionen zu versehen, die über den RoutedEvent “Loaded”

this.Loaded += new RoutedEventHandler(Start_Loaded);

gestartet werden .

#region Film
static int StartKapitel = 1;
static int AktuellesKapitel = -1;
static int EndKapitel = 8;
private Storyboard findMovie(string key)
{
    if (this.Resources.Contains(key) == true)
        return this.Resources[key] as Storyboard;   

    foreach (ResourceDictionary resourceDic in
    this.Resources.MergedDictionaries)
    {
        if (this.Resources.Contains(key) == true)
            return this.Resources[key] as Storyboard;
    }
    MessageBox.Show(“Kann “ + key + ” nicht finden”,
    “Schwerer Fehler”, MessageBoxButton.OK,
     MessageBoxImage.Error);
    return null;
}   

public void DoTheMovie(object sender, EventArgs args)
{
    if (AktuellesKapitel == -1)
        AktuellesKapitel = StartKapitel;
    if (AktuellesKapitel > EndKapitel)
        return;   

    string key = “Kapitel” + AktuellesKapitel;
    Storyboard movie = null;
    movie = findMovie(key);
    if (movie != null)
    {
        movie.Completed += new EventHandler(DoTheMovie);
        movie.Begin(this);
    }
    AktuellesKapitel++;
}   

#endregion

Klein aber fein suchen die Funktionen nach den Storyboards mit dem einfallsreichem Namen “Kapitel1″ bis “Kapitel8″. Werden die Storyboards gefunden, so werden sie gestartet nachdem sich die Funktion selber als Completed EventHandler eingetragen hat. Somit erfährt die Funktion selber, wann das Kapitel beendet ist und kann das nächste starten. Raffiniert wird es dann, wenn man seine Animation so plant, dass man in die späteren Kapitel springen kann. Doch dazu sollte man zwingend den Designer nun endlich aus der Hand legen.

Der Trick mit der Wiederverwendung

Bei der vorliegenden 3,5 Minuten Animation komme ich mit 33 graphischen GUI Elementen aus. Mehr verwende ich nicht. Der große Trick heißt Wiederverwendung der vorhandenen Elemente. Jedes Kapitel beginnt mit der gleichen Ausgangslage. Dafür sorgen am Anfang des Kapitels “DiscreteObjectKeyFrame”, die alle Objekte auf Hidden schalten, “DiscreteDoubleKeyFrame”, die Größe und Position setzen und “DiscreteStringKeyFrame”, die neue Texte einspielen. Dann werden mit “DiscreteObjectKeyFrame” die Hintegründe in Canvas eingebaut. Ich verwende grundsätzlich keine Image-Elemente, da Canvas weitaus flexibler einsetzbar sind. Somit verändert sich jedes Element während der Animation mehrfach, erhält neue Rollen und Aufgaben. Wird nahezu endlos wieder verwendet.

Was auf den ersten Blick umständlich und mühsam erscheint, wird schnell zu einer effektiven Erstellung der Animation. Denn durch die Unterteilung in Kapitel, die jeweils die gleiche Ausgangssituation haben, lässt sich bereits erstellter Animationscode kopieren und leicht modifiziert wieder verwenden. Ob nun das Bild “Fröhlicher Surfer.jpg” oder das Bild “Glücklicher Flatratnutzer.jpg” gezeigt wird, interessiert die Animation, welche sich mit dem Canvas “Bild1″ beschäftigt herzlich wenig.

In den meisten Fällen unterscheidet sich eine Animation von der vorherigen nur durch wenige Parameter, oft ist es nur der Hintergrund oder der Text. Somit kann man durch die Unterteilung in Kapitel, die man mit der Hand bearbeitet erstaunlich viel Zeit sparen. Die 3,5 Minuten Animation war nach 2,5 Tagen fertig und ging anstandslos durch die QS.

Play it again, XamlReader

jpkleinau — Tue, 20 Mar 2007 16:33:00 GMT

Für das Laden und Abspielen von XAML Dateien stellt uns Microsoft die Klasse XamlReader zur Verfügung. Mit Load und Save Funktionen vermittelt die Klasse den Eindruck, man könnte spielend XAML Dateien erzeugen und ablegen. Doch wenn man von dem im Beispiel geschildeten Fall eines einfachen Buttons absieht, dann erkennt man schnell, dass hier eine Menge an Funktionalität fehlt, die man mühsam dazu programmieren muss.

Ereignislos aber fehleranfällig

XAML Code ist grundsätzlich recht fehleranfällig, was in der Natur der Sache einer MarkUp Sprache liegt, die sich kontinuierlich weiter entwickelt. Wer jedoch erwartet, dass die XAMLReader Klasse verwendbare Fehlermeldungen spendiert, der sollte sich gegen Weihnachtsabend auf das Dach setzen, um den Weihnachtsmann zu begrüßen. Nur selten erhält der geduldige Entwickler eine Fehlermeldung, die auch mit dem ursächlichen Problem des XAML Codes einen sinnvollen Zusammenhang ergibt.

In Gegensatz zu der sonstigen WPF werden bei dem XamlReader mit Ereignissen recht sparsam umgegangen. Lediglich LoadCompleted erhalten wir als Nachricht, wenn ein Ladevorgang erfolgreich beendet wurde.

Will man also den XamlReader zu einem echten Player machen, dann wird man nicht umhin kommen einiges selbst zu programmieren. Vor allen dann, wenn man die vom Interactive Designer erzeugten XAML-ähnlichen Textdaten in verwendbares XAML verwandeln will.

XAML ist XML

Praktisch ist die Tatsache, dass man, um XAML Dateien lesen zu können, diese als XML schon laden muss. Daher ist die Umwandlung in ein XML Dokument ein Klacks:

XmlDocument doc = newXmlDocument(); doc.Load(meineDatei);

Wir sollten uns dann noch einen Namespace Manager basteln und befüllen:

XmlNamespaceManager nsMgr = new XmlNamespaceManager(doc.NameTable); XmlAttribute[] arrNamespace = new XmlAttribute[firstChild.Attributes.Count];foreach (XmlAttribute att in firstChild.Attributes) { if (att.Name.StartsWith(”xmlns:”)) { string prefix = att.Name.Substring(6); nsMgr.AddNamespace(prefix, att.Value); arrNamespace[i++] = att; } else if (att.Name.StartsWith(”xmlns”)) { string prefix = att.Name.Substring(5);nsMgr.AddNamespace(prefix, att.Value); arrNamespace[i++] = att; } else if (att.Name.IndexOf(’:') > 0 && att.Name.IndexOf(”Class”) == -1) { arrNamespace[i++] = att; } }

Und nun kann das fröhliche XAML-Umbiegen beginnen.

Klassen

Vom Visual Studio oder Interactive Designer werden in die XAML Dateien fröhlich Klassen eingefügt. Was dann auch zum einfachen Aufrufen der Maske recht nützlich ist. Doch in einem generischen Player stören die Klassen, die nicht implementiert wurden ziemlich.

// Klassen entfernen XmlNodeList nodes = doc.SelectNodes(”/*[@x:Class]”, nsMgr); foreach (XmlNode node in nodes) { node.Attributes.Remove(node.Attributes[”x:Class”]); }

Das obige Beispiel ist recht rigoros. Wer einen Anwendungsfall hat, bei dem Teile der Klassen wirklich auch implementiert wurden, der schaue sich mittels Reflection munter um.

Fonts, Bilder und Images

Relative Pfade sind nicht die Stärke des Interacitve Designers oder vom XAML im Allgemeinen. Zwar kann man mittels der URL tricksen, aber davon weiß der Grafiker am Nachbartisch recht wenig. Auch helfen eingebundene Bilder und Fonts recht wenig, da auch hier die Trennung zwischen Designtool und Programmierung nur auf dem Papier funktioniert. Entsprechend steht man vor dem Problem die Pfade umbiegen zu müssen, damit alles brav funktioniert.
XPath hilft uns da bei der Interpretation wunderbar: "//*[@Property='FontFamily']|//*[@Property='Source']|//*[@ImageSource]|//*[@Source]".
Man kann also leicht die betreffenden Nodes auslesen und die Attribute modifizieren. Mit Hilfe eines Dictionaries lassen sich auch recht leicht Mapper aufbauen, die dann später beim Caching helfen können (aber das ist eine andere Geschichte).

Resourcen

Resourcen lassen sich praktischerweise in ResourceDictionary.MergedDictionaries unterbringen. Doch das stellt den XAML Reader schon vor kleinen Problemen. Um hier sauber die zusätzlichen von der Datei angeforderten Resourcen zu laden, sollte man das ausprogrammieren. Dazu überprüfen wir die Anwesenheit des Tags "ResourceDictionary.MergedDictionaries" und falls es vorhanden ist, gehen wir auf die Node und holen uns alle Nodes mit dem XPath Ausdruck "//*[@Source]". Das Attribut auszulesen und die absoluten oder relativen Pfade zu wandeln ist Alltagsübung.
Weniger geläufig aber auch recht einfach ist das Mergen. Hier wird schlicht und ergreifend der Inhalt der XAML Resource Dateien als XML Document geladen, dann über ImportNode in das Document anstatt des Verweises importiert.

Window und Application

Die Tags “Window” und “Application” sind für das Laden über den XAML Reader nur bedingt hilfreich. Insbesonders wenn man das Geladene Maskenteil innerhalb einer vorhandenen GUI einbinden will. Daher müssen diese Tags durch etwas neutrales wie beispielsweise “Canvas” ersetzt werden. Das allerdings geht nicht im XmlDocument, denn den Namen eines Tags kann man nur lesend betrachten. Eine einfache String Ersetzung funktioniert aber problemlos.

Buttons und andere Eingabeelemente

Wenn man schon am Durchforsten ist, dann lohnt es sich auch auf die entsprechenden Ereignisse der Oberfläche reagieren zu können. Auch hier kann man die Elemente im XML finden und sie mindenstens mit einem Namen versehen, damit sie später bei einem GUI Event auch identifziert werden können. Doch ist Vorsicht geboten, da die Elemente in Listen mehrfach vorkommen können und dementsprechend mit multiplen Instanzen vorhanden sind. Das kann zu Anwendungsfehlern aber auch zu handfesten Exceptions führen.

Bäumchen durchsuche dich

Theoretisch einfach lassen sich diese Element abhandeln, wenn der XamlReader sein Tagwerk getan hat. Mit dem VisualTreeHelper sollte doch theoretisch jedes Element rekursiv findbar sein. Doch HALT, STOP! nicht alle Elemente sind gleich nach dem Laden durch den XamlReader da. Werden durch gebundene Daten Listen generiert, dann erscheinen die erst beim Erscheinen auf dem Bildschirm. Das ist eine wunderbare Performanzoptimierung, aber für das Untersuchen eines frisch geladenen Xaml Baumes ein Grauen. Die entsprechenden Listenelemente müssen mit dem Event ItemContainerGenerator.StatusChanged eingefangen werden und die ContentPresenter durch ApplyTemplate zum Befüllen gebracht werden. Auch bei FlowDocuments hilft der VisualTreeHelper nur bedingt. Denn in den FlowDocuments können sich ganze GUI Masken verstecken, die von Außen keiner findet. Hier ist ebenfalls ein wenig Handarbeit angesagt.

Fazit

Insgesamt lohnt sich das Laden von Masken über den XamlReader nur, wenn man eine große Menge von Masken parallel von Grafikern entwickeln will. In meinem Fall waren das über 600 Masken für die neue T-Online 6.0 CD. Hier konnten einige Grafiker sich im Expression Blend austoben. Die Masken wurden dann in dem von mir entwickelten XamlPlayer Framework geladen und konnten mit der Anwendungslogik verknüpft werden. Es wäre mein Wunsch gewesen, dass Microsoft von vorneherein hinsichtlich Trennung Design und Anwendung mehr mitbringt als nur eine einfache Klasse mit einer puren Ladefunktion.

Kurvig, separat und geradlinig (Animationen in WPF)

jpkleinau — Tue, 20 Mar 2007 16:27:00 GMT

Ein Artikel für XAML Anfänger

Dem geneigten XAML / WPF Animateur stehen drei verschiedene KeyFrame gesteuerte Animationen zur Verfügung, die sich anhand der DoubleAnimationUsingKeyFrames leicht erklären lassen.

DiscreteDoubleKeyFrame

Allen voran steht die recht einfache DiscreteDoubleKeyFrame Animation. Diese nimmt nur eine einzige Aktion vor, nämlich das fixe Setzen eines Wertes zu einem bestimmten Zeitpunkt, dem KeyFrame mit der Dauer von 0 Sekunden.

Geeignet ist diese Animation für das Positionieren eines Elements, die Veränderung der Größe oder als DiscreteStringKeyFrame den Textinhalt zu ändern oder als DiscreteObjectKeyFrame die Sichtbarkeit (Storyboard.TargetProperty="(UIElement.Visibility)" oder den Hintergrund (Storyboard.TargetProperty="(Canvas.Background)") zu setzen.

Benötigt wird diese Animation auch dazu, den Startzeitpunkt für die anderen Animationen festzulegen, die über eine Dauer, einen Wert manipulieren. Die Discrete…KeyFrame Aktion wird mit dem Zeitpunkt verwendet, der den Beginn der folgenden Animation beschreibt.

LinearDoubleKeyFrame

Mit dieser Animation wird ein Wert von einem in der Animation undefinierten Anfangswert zu einem definierten Zielwert zu dem im KeyFrame festgelegten Zeitpunkt verändert. Am genannten Zeitpunkt wird also der Zielwert erreicht werden. Der Anfangszeitpunkt wird entweder durch die klammernde Außenstruktur, in diesem Fall der DoubleAnimationUsingKeyFrames festgelegt oder empfehlenswert (wegen der Lesbarkeit) durch eine vorherige andere Animation wie dem DiscreteDoubleKeyFrame.

Der Anstieg oder Abstieg des Wertes verläuft linear. Das bedeutet, in jedem vergehenden Moment wird der Wert gleichförmig verändert. Das unterscheidet die Animation von der folgenden SplineDoubleKeyFrame.

Geignet ist die LinearDoubleKeyFrame insbesonders für das Ein- oder Ausblenden, weniger für Bewegungen (außer für Roboter), da die gleichförmige Bewegung sehr unnatürlich erscheint.

SplineDoubleKeyFrame

Auch in der SplineDoubleKeyFrame wird ein Wert zu einem bestimmten Zeitpunkt und zu einem Zielwert hin verändert. Ebenso wird die Animation durch den Beginn der außen definierten Klammer oder zu der vorliegenden Animation gestartet.

Die Wertänderung verläuft aber nicht gleichförmig sondern in einer Kurve. Am leichtesten lässt sich das mit einer Kugel erklären, die einen Berg herunterrollt. Je nach Beschaffenheit des Berges, wird sie schneller oder langsamer rollen.

Beginnt der Berg recht steil und flacht in einem weitem Tal ab, so wird die Kugel sehr schnell beschleunigt, gewinnt aber kurs nach dem Gipfel nur noch wenig an Geschwindigkeit. Kurz vor dem Erreichen des Zieles wird sie sogar an Fahrt verlieren, da der Reibungsverlust die Beschleunigung überschreitet und somit wird die Kugel gebremst.

Ist der Berg jedoch durch Eiszeiten abgeschliffen und im Gipfelbereich eher ein Hügel, jedoch das Tal durch Erosion sehr tief und steil eingeschnitten, wird die Kugel erst langsam anrollen, dann aber immer schneller werden und schließlich kurz vor dem Ziel am schnellsten sein. Aber auch hier wird sie schließlich am Ende gebremst werden (auch wenn das bei den meist kurz dauernden Animation visuell nicht wahrgenommen werden wird).

Fachlich wird die “splined interpolation” durch eine so genannte Bezier Kurve bestimmt. Zwei Kontrollpunkte definieren den Kurvenverlauf:
KeySpline="0.6,0.0 0.9,0.00".

Diese durch ein Leerzeichen getrennten Punkte sind sich in einem Koordinatensystem zu denken, das mit 0,0 beginnt und mit 1,1 endet. Daher werden die Punkte in X- und Y-Koordinaten als Double ausgedrückt (das Beispiel beginnt recht langsam und wird gegen Ende ziemlich schnell). Splines sind sprachhistorisch gesehen dünne Holzlatten, die man auf Schiffsskelette genagelt hatte und die sich aufgrund der holzeigenen Beschaffenheit sauber in einer Kurve gebogen haben.

Geeignet sind SplineDoubleKeyFrame für alle Bewegungen, denn sie geben der Animation ein natürliches Verhalten von Beschleunigung und Abbremsung.

DiscreteMatrixKeyFrame

Wer sich noch nicht mir 2D Matrix Transformationen beschäftigt hat, der wird vor der DiscreteMatrixKeyFrame etwas zurück schrecken. Das scheint allerdings unbegründet.

Mit Hilfe des RenderTransform Properties wird das Verändern von Position und Größe ein Kinderspiel. Dieses sollte in dem entsprechenden Element definiert sein. Die einfachste Animation erreicht man mit . Damit verschiebt man das Element auf die entsprechenden Koordinaten. Komplizierter wird es mit den weiteren Feldern der Matrizen Multiplikation. Zwar lässt WPF nur Affine Transformation aber auch die Verwendung von m11, m12, m21, m22 ist nur etwas für Cracks und wird vielleicht einen andern Blogeintrag füllen. Hier soll allein auf die praktische Möglichkeit hingewiesen werden, dass man mit den Matrix Animationen sehr einfach das Objekt verschieben kann. Denn selbst das einfach Größeändern mit m11 führt zu einer unscharfen Darstellung, da die Vektoren in Pixel umgerechnet werden und dann von der Grafikkarte durch Unschärfe auf mehrere Pixel verteilt werden.

Die oben genannten Animationen stellen das Basiswissen für den XAML Anfänger dar. Hiermit lassen sich 90% der Flashfilme, welche man aktuell im Internet findet, mit XAML realisieren. Dabei stellen sie nur einen Bruchteil der Animationsmöglichkeiten der WPF dar. Das Potential der Möglichkeiten in WPF ist dementsprechend beeindruckend.