Search results matching tag 'WPF'

Converting a Vector PDF image to a XAML Drawing Brush

NathanZaugg — Wed, 02 Oct 2013 21:18:44 GMT

A couple of weeks ago I listened to a presentation by Scott Hanselman about scaling your life. One of the many great pieces of advice is to blog about something rather than email an answer.

So this afternoon my good friend Alex asked me how we used to convert Vector PDF images to XAML Drawing Brushes so they can be applied to objects as a background, for instance. The vector part of that sentence is important because any rasterized portions of the PDF will be excluded in this process.

Well, there really isn’t a lot to it, so here are the instructions:

Open up your vector image in Inkscape. Inkscape can open a wide variety of images, including PDF.
Click File –> Save As. Drop the Save as Type to “Microsoft XAML (*.xaml)” and save the file as XAML. Once the file is saved you can open it up in Internet Explorer to see how the conversion process went. The problem though, is that this is painting directly to a canvas and is not packaged to be used as a background.
Open up Microsoft Expression Blend. Create a new project. Open up the XAML for the main file and replace it with the contents from your file from step 2.
Select all parts of the drawing then select Tools –> Make Brush Resource –> Make Drawing Brush Resource. This will pop open a dialog that will give you some options about where to define this resource and what it should be named.

So now your technically done. The contents of the Resource Dictionary now contain your new Drawing Brush Resource. To test it out clear all content from your main window except for the Window and Grid objects. Click the whitespace and open the properties inspector. Click the square dialog button for the Background and select Local Resource and the name you gave your brush. You should now be able to see your image:

The reason it is stretched is because your drawing brush will stretch to fill it’s contents. If you have a look at the XAML of the main window shows you will see the following XAML:

<Grid Background="{DynamicResource MindfireBackground}">

That’s pretty much it!

CSMediator Mediator Pattern Implementation in C#

NathanZaugg — Mon, 12 Jul 2010 22:31:23 GMT

This contains the source for the implementation of the Mediator pattern for M-V-VM, MVC, or MVP architectures.

6 Things I Bet You Didn't Know About Data Binding in WPF

NathanZaugg — Wed, 21 Jan 2009 22:26:00 GMT

I fell in love with WPF the first time I saw it in action! WPF is a thing of pure beauty! Anyway, from the second I saw how the data binding worked I knew that there was going to be a lot to figure out there! It also seems as though there is no real data binding expert -- or the experts don't blog too much about it. I created my XAML Cheat Sheet shortly after feeling like I had some kind of grasp on the concept. It is still a great reference for basic bindings, but when you are real serious about binding you'll have to do better than that.

So I have been working on a project in my spare time called SmartForms 2.0 (more on that later) and I have had to do some very difficult things using bindings. In my previous experience with WPF I would either create a cleaver type converter and/or just give up and set the value/state of the controls in code (eww!). This time is different and I have to make data binding work.

Example #1

Lets say that you need to bind a bool? (nullable boolean) type to a checkbox.

<CheckBox IsChecked="{Binding SomeBooleanField}">Checkbox</CheckBox>

Produces:

You will notice that the checkbox is in a neither checked nor unchecked state. Setting IsThreeState="False" doesn't help you as it is false by default. I want the checkebox to be unchecked by default but have no control over the type or the initialization of the type. Check this out:

<CheckBox IsChecked="{Binding SomeBooleanField, 
              TargetNullValue=false}">
     Checkbox
</CheckBox>

And now we have normal looking checkboxes! The best part is that this method doesn't mutate our property. This was exactly what I was looking for!

Example #2

The following XAML is pretty straight forward. It is simply a text box that we expect to put a city into.

<StackPanel Width="130" Height="40" HorizontalAlignment="Left" 
              VerticalAlignment="Top">
    <TextBlock>City</TextBlock>
    <TextBox Text="{Binding SomeTextField}" />
</StackPanel>

Produces:

What if the item we are attempting to data bind to is not available. It's not going to be null, the binding will just fail. This should work well:

<StackPanel Width="130" Height="40" HorizontalAlignment="Left" 
            VerticalAlignment="Top">
    <TextBlock>City</TextBlock>
    <TextBox Text="{Binding SomeTextField, 
            FallbackValue=UNBOUND}" />
</StackPanel>

Produces:

Example #3

This is a much more common occurrence. You have a number that you need to format in a textbox. This example shows the decimal value with no real format at all.

<StackPanel Width="130" Height="40" HorizontalAlignment="Left" 
            VerticalAlignment="Top">
    <TextBlock>Cost</TextBlock>
    <TextBox Text="{Binding SomeDecimalField}" />

</StackPanel>

Produces:

There are a few ways to get the format we desire. The first example uses a static resource:

xmlns:clr="clr-namespace:System;assembly=mscorlib"

<StackPanel Width="130" Height="40" HorizontalAlignment="Left" 
            VerticalAlignment="Top">
    <StackPanel.Resources>
        <clr:String x:Key="formatStr">{0:C}</clr:String>
    </StackPanel.Resources>
    <TextBlock>Cost</TextBlock>
    <TextBox Text="{Binding SomeDecimalField, 
             StringFormat={StaticResource formatStr}}" />
</StackPanel>

You can put the string inline but it looks really funny and for some reason the there has to be a non-whitespace character before the formatting expression which you may not want:

<TextBox Text="{Binding SomeDecimalField, 
         StringFormat=Cost: {0:C}}" />

This formats the string to look like "Cost: $1,2398.00". You can see how that could cause lots of confusion and would be undesirable. There is a way we can get the binding to work a little better:

<TextBox Text="{Binding SomeDecimalField, 
             StringFormat={}{0:C}}" />

<TextBox>
    <TextBox.Text>
        <Binding Path="SomeDecimalField" 
              StringFormat="{}{0:C}" />
    </TextBox.Text>
</TextBox>

The result is a nicely formatted output:

Notice how the binding was applied? This is how you apply MultiBindings which is the next topic.

Example #4

What if you want the value of one or more fields to exist in a single binding? That is where MultiBindings shine! Check out this very easy example:

<StackPanel Width="130" Height="40" HorizontalAlignment="Left" 
             VerticalAlignment="Top">
    <TextBlock>Name</TextBlock>            
    <TextBox>
        <TextBox.Text>
            <MultiBinding StringFormat="{}{0}, {1}">
                <Binding Path="LastName" />
                <Binding Path="FirstName" />
            </MultiBinding>
        </TextBox.Text>
    </TextBox>
</StackPanel>

Results:

Example #5

Validation can happen at the point of binding. This can be handy if the objects you are binding to have logic built in. For example, lets say you have a property for birth date. Obviously the person can not be born in the future! Here is how we avoid such rotten input!

public DateTime birthdate;
public DateTime BrithDate {
    get { return birthdate; }
    set {
        if (value > DateTime.Today)
            throw new ArgumentException(
               "Person can not be born in the future!");
        birthdate = value;
    }
}

And the XAML:

<StackPanel Margin="5" Width="130" Height="40" 
           HorizontalAlignment="Left" 
           VerticalAlignment="Top">
    <TextBlock>Birthdate</TextBlock>
    <TextBox Text="{Binding BrithDate, 
                            Mode=TwoWay, 
                            StringFormat=d, 
                            NotifyOnValidationError=true, 
                            ValidatesOnExceptions=true}" />        
</StackPanel>

Result:

The error can also be styled if required. Shown is the default style (nothing custom).

Example #6

The last example is for something called PriorityBinding. This is poorly named in my opinion as it would be better called CascadingBinding. The point to PriorityBinding is to name multiple data bindings in order of most desirable to least desirable. This way if the first binding fails, is empty and/or default, another binding can take it's place. You may have to be a little imaginative to think of such a scenario, but this kind of thing could be useful so I'm glad it's there. Just for fun, I am using the IsAsync field as well. This tells WPF to use a thread other than the GUI thread to retrieve this property. This is important for properties that take a long time to return as it will leave your app unresponsive until the value is bound. In the case of this example without that attribute the window will not show until the 5 seconds had elapsed.

private string fname;
public string FirstName {
     get {
          Thread.Sleep(5000);
          return fname; 
     }
          set { fname = value; }
}

Xaml:

<StackPanel Margin="5" Width="130" Height="40" 
            HorizontalAlignment="Left" 
            VerticalAlignment="Top">
    <TextBlock>Name</TextBlock>
    <TextBox>
        <TextBox.Text>
            <PriorityBinding>
                <Binding Path="LastNameNonExistant" 
                     IsAsync="True" />
                <Binding Path="FirstName" 
                     IsAsync="True" />
            </PriorityBinding>
        </TextBox.Text>
    </TextBox>
</StackPanel>

Result:

Another neat little thing to know is that the Hierarchy for Binding is Binding -> BindingBase -> MarkupExtension -> Object. Unlike much of the rest of the .NET Framework you can actually inherit from any of these classes and provide support for your customized binding needs. That is exactly what I am doing for SmartForms 2.0! I created a binding class called DataBinding and it looks a little like this:

xmlns:db="clr-namespace:SmartForms2.Binding;assembly=SmartForms2"

<TextBox Name="firstName" Width="175" 
         Text="{db:DataBinding Data, DataSource=DB1}" />

My DataBinding class inherits directly from MarkupExtension so all I had to do is implement the abstract method ProvideValue.

Silverlight 3 Announced

NathanZaugg — Thu, 18 Dec 2008 19:42:05 GMT

This announcement on Scott Gu's blog touts the success of the launch of Silverlight 2.0 and announces Silverlight 3.0. Out of the success stories noted on the blog one of the coolest applications is the new Netflix player! Having worked only a little in Silverlight but a lot in WPF I have been very disappointed with the lack of databinding in Silverlight 2.0! It sounds like I am not alone in this line of thinking so Silverlight 3.0 promises to fix a lot of that. Another great feature is hardware acceleration (using OpenGL?) which would be really sweet! These tools should be available early next year.

Here is a screen shot (taken from Scott's Blog):

I really hope that they bring WPF and Silverlight more in line with each other -- increasing capability and compatibility! It's ridiculous to think that we have three different but strikingly similar tools that don't interop! Of course the three being WPF, Silverlight and MCE Media Center.

Great WPF Editor

NathanZaugg — Tue, 09 Dec 2008 16:48:12 GMT

There is Expression Blend, Visual Studio, XamlPad that we are all aware of and use on a regular biases for creating our XAML. One that I am adding to the top of my XAML editor list is Kaxaml! This is the lightest weight most useful XAML editor I have ever seen! It's got a great WPF/Blend look and is light and fast. No more waiting 10-30 seconds for Visual Studio to fail to load your XAML documents! If there were a way to replace the Visual Studio editor with this I would totally do it!

Unlike Blend it has code insight. Unlike Visual Studio 2008 it is fast and functional! My favorite feature is the XAML Scrubber which will "pretty up" your XAML by organizing the tags and attributes. It will even put the most important attributes at the start of the tag. It removes much of the pressure of writing XAML!

Hopefully some future versions will include a visual tree and perhaps even a feature where you can click on an click on an object and be taken to the applicable part in the XAML. The XAML Scrubber only uses spaces and I am a tab guy -- oh how I wish it supported tabs! Also, I noticed that once I added an event to a control it said I had to compile the XAML -- not sure what that means. That means it's probably mostly useful for creating the user interface before you start hooking code into it.

If you need a good place to hammer out some design -- this may be your best bet!

WPF In Depth Presentation

NathanZaugg — Tue, 18 Nov 2008 21:17:21 GMT

This is the WPF In Depth Presentation I gave at the Fall 2007 Utah Code Camp.

Utah DNUG :: UI Design Patterns

NathanZaugg — Fri, 14 Nov 2008 02:21:59 GMT

Presenter: Joe McBride

Date: Thursday November 13, 2008

Place: Neumont University

I am pretty excited about this. I am a big fan of design patterns and the presentation promises to cover MVC and MVP design patterns and those are not well understood architectures and I was also interested to see how it was applied to WPF. There is also an additional pattern described called "Model View ViewModel"(MVVM).

Model View Controller (MVC)

This model seemed to be presented a bit differently than I expected. The slide suggested that the Model could somehow be used circumventing the presenter. Regardless, the MVC was described much like an API that is available for the view to consume passing nicely typed domain objects back and forth. This is a pretty straight-forward design pattern and has a lot on common with nTier.

One of the good things about MVC is that it is much easier to test.

Model View Presenter (MVP)

The view can raise events to the presenter and everything is marshaled through the presenter. One of the pro's about MVP over MVC is that data binding is made possible. The presenter becomes the gateway for any logic -- the object you are using to bind with doesn't need to be a domain object but can be a UI object. Data binding is the coolest and least understood part of WPF and I believe that Data binding could have been applied with the MVC pattern but the MVP is clearly easier. The binding statements were very simple and the code looked pretty clean.

One thing that I might not like about MVP is that the objects returned may be too customized for a particular view and if you plan to deploy this code with multiple views, for WPF and ASP.NET for example, may need entirely different types of objects for data binding.

Command Pattern

The command pattern is a lot like a fire alarm. When there is a fire someone pulls the fire alarm and everyone exits the building. In this analogy the fire alarm is the "command", it is invoked by someone pulling it and anyone could pull it. When it is pulled everyone interested in the fire alarm takes appropriate action. This is actually an analogy I came up with on the fly but I think it's a great way to describe a pretty abstract concept.

Model View ViewModel (MVVM)

This is a new pattern to me -- I have never even heard of it before. I do think that this approach could have some advantages where the ViewModel could be customized to work better with the actual view. This is also a good place to implement the command pattern. It is also a very useful that commands can be disabled which makes will actually update the WPF UI! That is pretty awesome! The only potential downside (if you choose to call it that) is that there seems to be mode code involved even if it is somewhat abstracted away from the UI.

Testability

Part of a good measure for any presentation design pattern is how testable it is. I really believe that if you can keep your UI code to a bare minimum that the unit tests will be substantially more effective.

Observations:

I like the microphone.
Great turnout. I counted about 45 people in attendance
It's very un-impressive when in the first 30 seconds of the presentation the code is broken; it was fixed very quickly though.
Too much on a single slide. Could have done well to split them out into two or three slides.
Pizza was gone by the time I got there....bummer! Probably makes my review more critical -- I need Pizza!
I think it could have been possible to do this almost entirely via Commands which would eliminate any code required on the code-behind for the view. That might be an interesting thing for me to try later.
I was shocked when Charles Petzold's book was not mentioned as a good WPF resource! Geesh! Also, I don't believe Adam Nathan's book (WPF Unleashed) is difficult and fast-paced. I actually found it a quite addicting read. Maybe not so much for the writing style (Petzold is clearly the literary master of the two) but because WPF is just such an interesting subject.
I couldn't believe how few people know what the Command Pattern is.
I would like to have seen more interfaces and loose cohesiveness. Okay -- Nevermind! Just as I typed this he showed that he was using an interface.
I was very disappointed to see the use of var where objects are not anonymously typed.
The presentation didn't seem to flow too well at times. I was also hoping to see a bit more of the mock objects and how to create those for unit testing.

Summary

Thanks Joe! Great presentation. Very good demonstration code used and it was very simple and small. I have to admit I am a little jealous of your blog domain and I think it's cool that he got it and that he actually uses it. Hopefully we can link to each other more in the future.

Routed Event Code Snippet

NathanZaugg — Wed, 15 Oct 2008 19:51:45 GMT

I find it really strange that there are code snippets for Dependency Properties but not Routed Events! Routed Events allow events to tunnel (preview) events up a visual tree and bubble them back down the visual tree. Any control along the tree can subscribe to these events and handle them. You can also choose to see events even if they have been handled.

This makes RoutedEvents very nice for use in XAML! For example, lets say you have a StackPanel and you want to know about any button clicks happening in that panel, you could simply use the following XAML:

<StackPanel ButtonBase.Click="MyButtonEventHandler">
    <Button Height="50" Content="Button 1" />
    <Button Height="50" Content="Button 2" />
    <Button Height="50" Content="Button 3" />
    <Button Height="50" Content="Button 4" />
</StackPanel>

Now when any one of the buttons are clicked, the stack panel will receive notification. Just like Attached Properties, the stack panel does not need to have a Click event. If a button does not exist inside of the stack panel there is no problem, you just won't receive any notification. The buttons do not even have to be direct children of the stack panel for this to work so if we wanted we could put them inside of another stack panel or any other content control.

I really think it strange that there was no snippet for Routed Events (being as handy as they are) so I took the time to write one.

Lets make a code snippet for a Routed Event, here is how:

Create a Custom Snippet

Find a snippet you plan to modify in the Manage Snippets Dialog (Tools -> Code Snippets Manager)
Open the Snippet using File -> Open File and open the file:
C:\Program Files\Microsoft Visual Studio 9.0\VC#\Snippets\1033\NetFX30\propdp.snippet

Edit the declarations (like):

      <Literal>
          <ID>name</ID>
          <ToolTip>Event Name</ToolTip>
          <Default>MyEvent</Default>
      </Literal>

Edit the snippet using $name$ for any literal replacement.
Be sure to change the shortcut in the XML to "revent".
Save the file as "revent.snippet"
Your visual studio instance should now see the snippet.

Here is the snippet code I used:

<?xml version="1.0" encoding="utf-8" ?>
<CodeSnippets  xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
    <CodeSnippet Format="1.0.0">
        <Header>
            <Title>Define a RoutedEvent</Title>
            <Shortcut>revent</Shortcut>
            <Description>Code snippet for a event using RoutedEvent</Description>
            <Author>Nathan Zaugg</Author>
            <SnippetTypes>
                <SnippetType>Expansion</SnippetType>
            </SnippetTypes>
        </Header>
        <Snippet>
            <Declarations>
                <Literal>
                    <ID>eventhandlertype</ID>
                    <ToolTip>Event Handler Type Type</ToolTip>
                    <Default>RoutedEventHandler</Default>
                </Literal>
                <Literal>
                    <ID>name</ID>
                    <ToolTip>Event Name</ToolTip>
                    <Default>MyEvent</Default>
                </Literal>
                <Literal>
                    <ID>ownerclass</ID>
                    <ToolTip>The owning class of this Property.  
                           Typically the class that it is declared in.</ToolTip>
                    <Default>ownerclass</Default>
                </Literal>
                <Literal>
                    <ID>routingstratigy</ID>
                    <ToolTip>The routing stratigy for this event.</ToolTip>
                    <Default>Bubble</Default>
                </Literal>
            </Declarations>
            <Code Language="csharp">
                <![CDATA[

// Provide CLR accessors for the event
public event RoutedEventHandler $name$
{
        add { AddHandler($name$Event, value); } 
        remove { RemoveHandler($name$Event, value); }
}

// Using a RoutedEvent
public static readonly RoutedEvent $name$Event = EventManager.RegisterRoutedEvent(
    "$name$", RoutingStrategy.$routingstratigy$, typeof($eventhandlertype$), typeof($ownerclass$));

$end$]]>
            </Code>
        </Snippet>
    </CodeSnippet>
</CodeSnippets>

When you are done it should look like this:

If you don't want to bother writing it yourself, you may download my routed event snippet here. I plan to create a code snippet for Dependency Properties that have coercion, event changed notification, and validation methods implemented so they may be overridden in descendent classes.

Routed Event Snippet

NathanZaugg — Wed, 15 Oct 2008 19:35:22 GMT

This is a snippit "revent" that creates a routed event declairation in your form.

Copy this file to:
C:\Program Files\Microsoft Visual Studio 9.0\VC#\Snippets\1033\NetFX30

Silverlight 2 RC0 Released

NathanZaugg — Fri, 10 Oct 2008 05:41:16 GMT

Silverlight 2 is not far from reality! With the first RC coming just months after the beta 2 release and promises of a full release coming soon we can start migrating existing beta 2 code to RC0 which is supposed to be compatible with the actual release. The announcement is posted on Scott Gu's blog here. I am excited to read that some of the major changes are making WPF and Silverlight. Also, they have promised a bunch of new controls which will make Silverlight more control rich than WPF (with some exception).

My computer is still messed up from the Beta 2 release so I'm hoping that installing the RC0 release will fix some things up -- I'll post on that later.

Search results matching tag 'WPF'

Converting a Vector PDF image to a XAML Drawing Brush

CSMediator Mediator Pattern Implementation in C#

6 Things I Bet You Didn't Know About Data Binding in WPF

Example #1

Example #2

Example #3

Example #4

Example #5

Example #6

Links:

Silverlight 3 Announced

Links:

Great WPF Editor

Links:

WPF In Depth Presentation

Utah DNUG :: UI Design Patterns

Model View Controller (MVC)

Model View Presenter (MVP)

Command Pattern

Model View ViewModel (MVVM)

Testability

Observations:

Summary

Links:

Routed Event Code Snippet

Create a Custom Snippet

Here is the snippet code I used:

When you are done it should look like this:

Links:

Routed Event Snippet

Silverlight 2 RC0 Released