You had me at "Hello World!" : XAML

XAML PowerToys for VisualStudio - Speed up Development of Business Apps and Just Edit XAML Faster!

nikola — Mon, 06 Oct 2008 02:40:00 GMT

Check them out - including screenshots - on Karl’s (one of my friends) site:

http://karlshifflett.wordpress.com/xaml-power-toys/

XAML Power Toys

Speed up production of Business (LOB) Applications in WPF and Silverlight!

Automatically create XAML views from VB or C# Code:

· Create WPF or Silverlight DataGrid For Class - quickly create a WPF DataGrid complete with bindings that are easily associated with properties on the source class

· Create WPF ListView For Class - quickly create a ListView complete with bindings that are easily associated with properties on the source class

· Create Business Form For Class - quickly create a form complete with bindings that are easily associated with properties on the source class

· Create Business Form - quickly create a form complete with bindings if desired

· Drag and Drop class fields to create controls - display a list of class fields similar to Microsoft Access, then drag fields to create controls

Speed up common XAML editing tasks

· Group Into - allows selecting one or more controls and group them inside a new parent control

· Minimize XAML - allows selecting of one or more controls and will remove all MinWidth, MinHeight, x:Name, Name, Margin properties and will set all row and column definitions to Auto.

· Remove Margins - allows selecting one or more controls and removes the Margin property from them

· Quickly Add/Remove Grid Column and Rows - allows selecting a grid and then add or remove rows and columns

· Specify Defaults For Created Controls - allows customizing the initial properties that are set when the software creates a new control

http://karlshifflett.wordpress.com/xaml-power-toys/

Optimizing WPF 3D scenes for Tier-2 Hardware (roughly Pixel Shader 2.0+)

nikola — Fri, 01 Jun 2007 20:58:00 GMT

I just found this very nice blog entry with hints for WPF 3D

Summary of the hints that I found more interesting/not common:

1. Set Viewport3D.IsHitTestVisible to false. It's true by default, which means that hit testing for 3D content is performed on mouse over.

2. GeometryModel3D - prefer using a single large model rather than several models with the same Material and Transform.

3. MeshGeometry3D - to speed up changing individual vertices, detach the mesh from the visual tree.

4. Use Images instead of live 3D text, when the text will not be changing.

5. BitmapEffects force all affected content to be rendered without HW acceleration.

The complete post is here:

http://blogs.msdn.com/wpfsdk/archive/2007/01/15/maximizing-wpf-3d-performance-on-tier-2-hardware.aspx

Converting RTF on the Clipboard To XAML

nikola — Mon, 19 Feb 2007 05:55:00 GMT

Here is a simple function that will convert RTF data on the clipboard to XAML:

/// <summary>

/// Returns the text contents of the clipboard as XAML

/// </summary>

/// <returns></returns>

public static string GetFormattedXamlFromClipboard() {

System.Windows.Controls.RichTextBox box = new System.Windows.Controls.RichTextBox();

box.SelectAll();

box.Paste();

box.SelectAll();

box.Copy();

return System.Windows.Clipboard.GetData(System.Windows.DataFormats.Xaml).ToString();

}

Now you can easily copy-paste C# code and retrieve it as XAML, syntax highlighting preserved.

A better example would be converting an RTF file to XAML. To do it you have to load the file in a RichTextBox and then use this line:

return System.Windows.Clipboard.GetData(System.Windows.DataFormats.Xaml).ToString();

to extract the XAML.

For information on working with WPF RichTextBox: loading, saving data and such - see here.

Blobbying #1 - Introducing Blob the Builder

nikola — Wed, 02 Aug 2006 22:12:00 GMT

Do you remember long time ago when you (or someone else) used to play with small and cute snails, dirt, and sticky, slimy things?

The blobs are here again!

Remember your most precious childhood memories (where applicable) with this short blobbyfying experience.

Above is what we are going to do. I tried to pick up nice names for each of the blobs.

I like the Ema blob most thus Ema can be clicked and respond to the click.

Now the surprise (???): Each of the blobs is made of just one <Border> tag!!

Can it get easier than this? You weren't surprised, were you?

Here's the code for Ricky:

<Grid>

<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Ricky</TextBlock>

</Grid>

</Border>

As you can see it's just a border with the CornerRadius set to some values.

If you can't wait to experiment jump to the sample code .

Or you can have more patience and do not rush to brutally modify the blobs.

Let's start with Ema:

<Border.Background>

<RadialGradientBrush.GradientStops>

</RadialGradientBrush.GradientStops>

</RadialGradientBrush>

</Border.Background>

<Grid>

</Grid>

</Border>

Looks like:

How did she become so pretty?

1. Using brushes opacity less than 1 usually looks cool.

2. Radial gradient brushes with GradientOrigin other than center look nice

Agreed?

Now a simple tweak to make her even more beautiful!

Just copy the Background to the BorderBrush:

<Border.BorderBrush>

<RadialGradientBrush.GradientStops>

</RadialGradientBrush.GradientStops>

</RadialGradientBrush>

</Border.BorderBrush>

<Border.Background>

<RadialGradientBrush.GradientStops>

</RadialGradientBrush.GradientStops>

</RadialGradientBrush>

</Border.Background>

<Grid>

</Grid>

</Border>

And...

Nicely plopped on the form!

Instead of having to copy the brush you could as well try:

BorderBrush="{Binding RelativeSource={RelativeSource Self}, Path=(Control.Background)}"

And see if it works.

Animating Our Blob

Imagine pressing a keyboard key. As my fellow Cider Comrade Richard mentioned: "the light goes to the right and bottom".

This means that we'll animate the white dot in the radial brush (which is the GradientOrigin to go "down and right". We'll move it from 0.2, 0.2 to 0.24, 0.24.

We'll also make the white appear a little smaller by animating the (RadialGradientBrush.GradientStops)[0].(Offset) - that's one of the gradient stops from 0.1 to 0.0.

All of this happens on mouse down ({StaticResource Enblob}), on mouse up we'll do the reverse ({StaticResource Deblob}).

We'll also need to move the "Ema" text to the bottom and right. To make it easier we'll place the text in a ViewBox and move the ViewBox instead. This way we can place anything in the ViewBox and it will be moved automatically.

...

<Grid>

<Grid>

</Grid>

</Viewbox>

</Grid>

</Border>

The ViewBox is moved by animating its Margin property from 0,0,0,0 to 4,4,0,0.

The actual animation code:

Moving the GradientOrigin down and right:

<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Ema"

Storyboard.TargetProperty="(Control.Background).(RadialGradientBrush.GradientOrigin)" >

<PointAnimationUsingKeyFrames.KeyFrames>

</PointKeyFrameCollection>

</PointAnimationUsingKeyFrames.KeyFrames>

</PointAnimationUsingKeyFrames>

Animating the gradient stop to make the white smaller:

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Ema"

Storyboard.TargetProperty="(Control.Background).(RadialGradientBrush.GradientStops)[0].(Offset)" >

<DoubleAnimationUsingKeyFrames.KeyFrames>

</DoubleKeyFrameCollection>

</DoubleAnimationUsingKeyFrames.KeyFrames>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

Moving the container ViewBox by 4, 4 to the down and right:

<ThicknessAnimation Storyboard.TargetName="Boxy"

Storyboard.TargetProperty="(Control.Margin)"

Duration="0:0:0.1" FillBehavior="HoldEnd" From="0,0,0,0" To="4,4,0,0" />

That's how we got the Ema clickability.

The example XAML can be opened in the Cider designer (JuneCTP should do).

Disclaimer: No blobs have been harmed in any way while writing this blog entry. The views expressed here are solely mine and not Microsoft's. The code snippets, blobs and everything is provided "as is". There are no warranties for fitness of the blobs and/or code snippets for particular use. The names used here are not names of actual blobs and/or people. Any resemblance to real life events is a pure coincidence.

XAML Load support in Cider May CTP Release. Sample app.

nikola — Tue, 20 Jun 2006 23:12:00 GMT

You would be glad to know that some of the improvements in May CTP include:

- Support for x:Static

- Traversing properties, for example:

TargetProperty="(Control.Background).(LinearGradientBrush.GradientStops)[1].(Offset)"

- Improved resolution of Control Templates, Bindings, Resources and Styles

- Improved error reporting for XAML files that contain errors

- Basic usage of Storyboard

Parts of the above features are demonstrated in the following sample. I chose to create a simple single-feed RSS reader with only XAML (no code behind).

Our XAML Load Support is not yet complete. Should you encounter XAML related issues, please report them here: http://connect.microsoft.com/default.aspx

Your feedback is valuable and appreciated.

To ensure that you report unknown issues only, please check our list of known May CTP limitations here: http://channel9.msdn.com/wiki/default.aspx/Cider.MayCTPXAMLLoadLimitations

Let’s go ahead and do the sample application.

Task 1: How will it look?

I decided to make it look something like this:

[RSS News Title 1]

**************

News data1

…

**************

[RSS News Title 2]

**************

News data2

…

**************

Task 2: Find RSS feed

Let’s take the MSNBC entertainment feed: http://rss.msnbc.msn.com/id/3032083/device/rss/rss.xml

Of course you can choose any feed you want.

If you open the link you can see the RSS feed contains the following:

<channel> named “MSNBC.com: Entertainment” (on top)
a collection of items in the following format:

<item>

<title>Best and worst of summer reality TV</title>

…

…

</item>

I decided that <title> and <link> are the things we’ll be using, you can choose to display other information as well.

Our application would now look like:

[insert item.title here]

***********************

…

***********************

[insert the next item.title here]

***********************

…

***********************

…

Can you imagine it? I almost can.

Task 3: Now we pretty much know what we want, let’s take a look at the final sample application and break it down into pieces in a moment.

Now is the time to click here to take a look at the sample if you haven't done it already!

First let’s try to get the XML from the feed and display some part of it.

Start with a Window that has an empty Grid, and add the XMLDataProvider:

<Window.Resources>

</Window.Resources>

<Grid >

</Grid>

At this point we expect the XmlDataProvider to provide us with XML, let’s see if it really does.

Note that we specified that the provider will get the XML starting at the rss/channel node (that’s where we saw the <item>-s are).

Try using the provided XML data (note that the updates are in bold)

<Grid>

<TextBlock Text="{Binding Source={StaticResource RssData}, XPath=item}" TextWrapping="Wrap" />

</Grid>

We specified a block of text that is using the RssData as source and picks up a single item from it.

Switching to the designer shows us this picture:

Seems like its working. Great! Let’s continue with this:

<Grid>

</Grid>

Pretty much what we wanted.

It seems that the XML data provider is working. Now you can go on and do some experiments or you can stay with me for the next step which is:

<Grid>

<ListBox ItemsSource="{Binding Source={StaticResource RssData}, XPath=item/title}" />

</Grid>

We replaced the textbox with listbox.

We got all the RSS Feed titles. Could we do better with 2 lines of XAML?

We know how to use the RSS data to “feed” our listbox. Now let’s focus on the eye candy part.

A ListBox is usually defined like the one below:

<Window.Resources>

</Window.Resources>

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<ListBox Grid.Row="1">

<ListBoxItem Content="Item 1" />

<ListBoxItem Content="Item 2" />

<ListBoxItem Content="Item 3" />

</ListBox>

</Grid>

Each of the ListBoxItem-s can be customized to look the way we want.

To do this we’ll use ControlTemplate:

<Window.Resources>

<Style TargetType="{x:Type ListBoxItem}" x:Key="RSSFeedItem">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ListBoxItem}">

<TextBlock Text="{TemplateBinding Content}" FontSize="16pt" />

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Window.Resources>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</ListBox>

</Grid>

Above we setup a style that sets a template for a ListBoxItem. Then we specified this style to be used in our ListBox.

One interesting thing is the Text="{TemplateBinding Content}". It’s the same as saying: “put in the Text whatever is in the ListBoxItem.Content”.

We got this:

Let’s try to get something like this:

Above we changed the Xpath so that the ListBoxItems will get all the item information (not the item/title as before) and we added our styling to the ListBox.

Now, let’s restyle the listbox items to separate the Title and the Link of the news:

<Window.Resources>

<Setter.Value>

<StackPanel>

<TextBlock Text="{Binding XPath=title}" FontSize="10pt" FontWeight="SemiBold" />

<TextBlock Text="{Binding XPath=link}" FontSize="10pt" />

</StackPanel>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Window.Resources>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<ListBox Grid.Row="0" ItemsSource="{Binding Source={StaticResource RssData}, XPath=item}"

ItemContainerStyle="{StaticResource RSSFeedItem}"/>

</Grid>

The changes we made are –

We replaced TemplateBinding with Binding XPath, because we wanted to bind to the <item> in the RSS feed instead of binding to a property of ListBoxItem.
We replaced XPath=item/title with XPath=item in the definition of the ListBox items source.

We may want instead of displaying the link to display what is in the link. We may want to have an expand and collapse behavior for each of the items.

<Grid>

<Expander Header="{Binding XPath=title}">

<Frame Source="{Binding XPath=link}" />

</Expander>

</Grid>

</ControlTemplate>

Above we replace the two TextBlocks and the StackPanel with a Grid, Expander and Frame. Here’s what we got:

I guess you already built and ran the above. Seems OK, but the frame is not quite what we want (some people may want it like this). Otherwise we’ve got our reader in a [kind of] usable state.

Congratulations!!!

We can now prettify our solution.

To be continued…

Continuing. Did you really think we’d stop here?

We can:

Modify the Expander and/or Frame so that the frame is bigger
Make the Expander look nicer

Of course you can do a lot of other stuff and make it even better – would be very nice to see what you did.

We’ll go fast forward from now on.

If you read up to here you already know how to use ControlTemplates, Styles and DataBinding, as well as using the XML Data Provider to get XML from somewhere. Well done!

I created a template for the Expander:

…

</ControlTemplate>

You can find the template code in the final example solution.

I’ll briefly explain the things that interested me.

<ControlTemplate.Triggers>

<EventTrigger.Actions>

</EventTrigger.Actions>

</EventTrigger>

</Trigger>

</ControlTemplate.Triggers>

The above code is part of the ControlTemplate for the Expander. You can see that it has two types of triggers. The EventTrigger is probably obvious. The IsChecked trigger is more interesting -> it will change the arrow of the expander to “collapse arrow” if the Expander is expanded and will revert it back to “up arrow” when the Expander is collapsed. Get it? The first trigger will occur each time an event occurs, while the second one will change a value and revert it back based on a condition.

Animations

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="AniControl"

Storyboard.TargetProperty="(Control.Background).(LinearGradientBrush.GradientStops)[1].(Offset)">

<DoubleAnimationUsingKeyFrames.KeyFrames>

</DoubleKeyFrameCollection>

</DoubleAnimationUsingKeyFrames.KeyFrames>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

What we express in the XAML above is:

Find the control named AniControl
Find the property: "(Control.Background).(LinearGradientBrush.GradientStops)[1].(Offset)"

This will be the property that will get its value changed (the animated property). We could as well say “Control.Width” here if the control was Button for example.

If we change the Width property of a Button from 100 to 200 in 5 seconds and then back to 100 do we get animation? We get a “squishing” button. Is this cool or not?

You already know what the above animation is supposed to do: it is supposed to change some Offset of a gradient somewhere from 0.1 to 0.4 in about 0.6 seconds.

I should mention the purpose of the KeySpline here:

But I won’t. Feel free to try different values like KeySpline="0.2,0.2,0.9,0.6".

<EventTrigger.Actions>

</EventTrigger.Actions>

</EventTrigger>

The above code says “when MouseEnter start the animation”.

Another thing you might find interesting is (this code is not part of the sample):

<Button.Background>

<LinearGradientBrush.GradientStops>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</Button.Background>

Click me, click me now

</Button>

All I want to say about LinearGradientBrush-es: they seem to work really well with Opacity less than 1.

Bye-bye!