Using a Tile Brush in Expression Blend

A couple years ago I wrote a post regarding the WPF VisualBrush. As part of that post I discussed the TileBrush.

TileBrush is abstract and defines a number of useful properties for creating a repeating pattern.  For example you could set the source of the ImageBrush to a picture of a flower, then set properties to repeat the picture in five columns and three rows.

Expression Blend and TileBrush

Now that more developers and designers are adopting  Expression Blend it seems like a good idea to learn how Blend handles Tile brushes.  For this example I am using an ImageBrush but the similar techniques apply to the DrawingBrush and VisualBrush.

Add an Image to a Blend Project

The first step is to add an image to a Blend project.  Right-click the project in Project tab and choose "Add Existing Item".  Find an appropriate image and return to the Blend UI.

Insert an Image

Right-click the image in the project tab and choose "Insert".  This will add the image to the ArtBoard.

Convert to Brush Resource

Press the ‘V’ key to activate the Selection tool and click the image in the ArtBoard. Choose the "Make ImageBrush Resource" menu item as shown below.

Provide a key (Name) for the ImageBrush resource.

Using the Brush Transform Tool

Delete the existing Image from the ArtBoard.   Add another element to the ArtBoard, for this example I am using an Ellipse. 

Select the Ellipse with the Selection tool (press the ‘V’ key then click the Ellipse).  Select the Properties tab and then choose the Brush Resource.

 

 

The ellipse is filled with the ImageBrush.

Transform the ImageBrush

Now it finally time to add columns and rows to the ImageBrush.  The Brush Transform tool (press the ‘G’ key) is the tool you are looking for.

 

Finally choose the TileBrush button in the Properties window and then choose a TileMode value.

You can continue to manipulate the tile in the Artboard. Resizing the Tile smaller adds more columns and row to the result.  Dragging the tile in the ArtBoard changes the top/left position of the tile.  Lastly you can skew and rotate the tile with the Brush Transform tool

Read Full Post »

New WPF Themes released

For the last year I’ve been talking about the need to make a set of themes and templates available for WPF developers.   There are plenty of companies who want nice looking WPF applications (other than the default Windows XP/Vista look) but don’t know where to start.  I’ve argued, to anyone who’ll listen, that we need a community site that showcases the power of WPF templates.

CSS Zen Garden

I suspect that many of you are familiar with the CSS Zen Garden.

The goal of the site is to showcase what is possible with CSS-based design. Style sheets contributed by graphic designers from around the world are used to change the visual presentation of a single HTML file, producing hundreds of different designs. Aside from reference to an external CSS file, the HTML markup itself never changes. All visual differences are the result of the CSS (and supporting imagery).

The magnitude of the changes you can make to a prototype website by swapping the CSS is staggering.  CSS Zen Garden permits designers to show how creative they can be with CSS and allows other to use these CSS files as starting points for their own development.

Where is the WPF/Silverlight Zen Garden?

Both WPF and Silverlight support templated controls.  Templates allow us to completely change the way a control looks, while keeping the same behavior.  This is a powerful concept that allows developer to change a button from

to

My dream is to have a community site where designers can display their templates for WPF/Silverlight controls and others can peruse the catalog looking for design ideas and samples.

WPF Futures releases new control templates

Microsoft has made a few small steps in publishing control templates. A few months ago Microsoft released a set of control templates for Silverlight.  Those templates have been modified to work with WPF controls and were released last week for your consumption.

Read Full Post »

Super Secrets to be Revealed at Mix09

Attend a keynote at a big Microsoft conference and at some point in the presentation you will hear a musical fanfare followed by a breathless product announcement.

Depending on the show and the time of year the announcements can be hum-drum or spectacular.  Do you remember when Microsoft announced a new development framework called .NET a few years ago? 

 

Of course Scott Guthrie’s keynotes tend to be a little more fun.

 

How to Top Mix08?

Silverlight 3 is going to be the brightest light in the Mix09 marquee this year.  Expect to hear a flurry of announcements regarding new features in Silverlight.  Silverlight 2 is impressive but Microsoft needs to show improvements in many areas to offset the advantages of their competitors RIA frameworks. 

The tools in Expression Suite get little love from Adobe devotees. The designer wars are heating up however and Microsoft will show some startling improvements in Expression Blend.  You definitely won’t want to miss the Expression Blend announcements.

WPF and XAML are also gaining significant improvements, some of which will be shown at Mix.  I saw a preview of what’s coming in Silverlight, Expression Blend and WPF while at the MVP summit earlier this month. What I saw at the summit was very exciting and I expect it will be thoroughly covered during Mix sessions this week.

I know that there are even more surprises coming, including one super NDA Silverlight secret, so keep your ears open.

Expect live coverage of the Mix event here at the WpfWonderland blog.

[update]

Mix09 is over and the secrets have been revealed.

Tim Heuer has a nice summary of Silverlight 3 features.

http://timheuer.com/blog/archive/2009/03/18/silverlight-3-whats-new-a-guide.aspx

Read Full Post »

Nice Sushi application for the Surface

Are you a sushi veteran?   If so it is probably hard to remember your first few trips to a sushi bar.   Looking at the names, wondering what to order.  Nigiri, Onigiri, Temaki.   Wouldn’t it be wonderful to have an expert on hand to guide you step by step through your dinner order?

 

Phenomblue, a consultancy in Omaha Nebraska, has created a Microsoft Surface proof of concept application for a sushi bar.  The application shows you the sushi items available on the menu (in a rich graphical way), lets you watch videos of the chef preparing the entry and simplifies the ordering process.  Watch the video here.

Nice touches in the application

You can tell that a lot of work went into the UI for this application.  Creating a Surface application forces you to rethink your UI design.  There are many elements to consider, but l want to touch on two of them in this post.

Surface is a 360 degree environment.  People can approach the Surface from from any side.  A traditional top oriented UI will disappoint at least 75% of the people working at the table.  In this app small wooden boats float in from opposite directions and stop in front of the user on either side of the  table.   Watch the user touch the boat, it sinks a little into the water.

Do not show help files.   Surface applications strive for an immersive and intuitive experience.  The application should lead the user through the learning process whenever possible.  Observe what happens when the diner drags the sushi to the center platter.

First, a nice animation of a fan appears.

Then the orange slider moves up and down, showing the hungry diner how easily they can order five rolls instead of one.   Nice attention to details. The key is that the application works with the patron by using animation in a practical way.

Kudos to Phenomblue.

 

 

---

Mastering Microsoft Surface Development with WPF

Learn to program the Microsoft Surface today.
Take our intensive five day course

 

A multi-faceted course that delivers loads of content in an instructor-led format. You get lots of lab time and thousands of lines of sample code to take back to work with you. Best of all we bundle the Microsoft Surface™ and WPF content into to one convenient package, so you can learn everything you need in one information packed week.

Next class:

• Dallas TX
• April 20-24th
• Register for an upcoming class

Read Full Post »

Adding Console Window to WPF Application

I’ve had several WPF projects which required showing a log window.  The idea is to log a constant stream of status messages for a admin to monitor.  You could write your own LogWindow and pass messages into the window but there is an easier way.  Tell your WPF application to run as a ‘Console’ application.

Now this sounds funny but it is easy to do and doesn’t impact your WPF application.

• Right click the Project Properties node in the Solution explorer or choose the Project menu.

• Change the project Application Type to ‘WPF Console Application.

Run the application, you will see two windows; the main WPF window and the console window.

Using Console

To write to the console window use Console.Write or Console.WriteLine.  You can also control the size and position of the window and change the font color.

  1:     Console.SetWindowSize(40, 20)

  2:     Console.SetWindowPosition(0, 0)

  3:     Console.Title = "Log Window"

  4: 

  5:     Console.ForegroundColor = ConsoleColor.Yellow

  6:     Console.WriteLine("Log: Something happened")

  7:     Console.ForegroundColor = ConsoleColor.Red

  8:     Console.WriteLine("Details: Database initialized")
 

					
Read Full Post »
				

Play Beanbag Toss on Microsoft Surface

What type of application would you create if your target device is a 30 inch table?  Did I mention that it has a hardened top that can take some serious abuse?

Would you have considered a bean bag game?

The clever folks at Razorfish are churning out some interesting Surface apps.  Check out their video archive for more applications.

 

---

Mastering Microsoft Surface Development with WPF

Learn to program the Microsoft Surface today.
Take our intensive five day course

 

A multi-faceted course that delivers loads of content in an instructor-led format. You get lots of lab time and thousands of lines of sample code to take back to work with you. Best of all we bundle the Microsoft Surface™ and WPF content into to one convenient package, so you can learn everything you need in one information packed week.

Next class:

• Dallas TX
• April 20-24th
• Register for an upcoming class

Read Full Post »

MS Demos Surface Physics Engine

James Wood has been quietly hacking away on a new Surface physics engine.  His job is to visualize and create proof of concept applications for Microsoft UK and this is his latest project.

A couple weeks ago James released some videos of his latest research.  Take a look, what do you think?  There are more videos on his site.

In the last couple months there have been  number of excellent Microsoft Surface applications released.  Vertigo, IdentityMine , RazorFish and InterKnowlogy are just a few of the companies creating fascinating Surface applications.  Most of these apps are written in WPF and show how beautiful a WPF interface can be.

 

---

Mastering Microsoft Surface Development with WPF

Learn to program the Microsoft Surface today.
Take our intensive five day course

 

A multi-faceted course that delivers loads of content in an instructor-led format. You get lots of lab time and thousands of lines of sample code to take back to work with you. Best of all we bundle the Microsoft Surface™ and WPF content into to one convenient package, so you can learn everything you need in one information packed week.

Next class:

• Dallas TX
• April 20-24th
• Register for an upcoming class

Read Full Post »

True multi-monitor support in Visual Studio 2010

If you have ever been frustrated with the mutli-monitor support in Visual Studio 2008  you’ll be pleased to see what’s coming in VS 2010.

VS 2010 will sport a new WPF IDE.  Since the IDE is getting a complete rewrite it allows Microsoft to rethink multi-monitor.  Every window in VS will be ‘tear-off’.  Drag the properties window to mon2, drag the thread window to mon3.  Total freedom and very useful.

Read Full Post »

Visual Studio 2010 gets WPF facelift

WPF has been out for a couple years.  That’s long enough that new releases of Microsoft products are sprouting WPF interfaces. 

Last year at PDC Microsoft announced that the code editor in Visual Studio would be re-written in WPF.   Microsoft didn’t stop at the code editor though.  Today Jason Zander, GM for Visual Studio, revealed the new WPF based IDE. 

My first impression;  very clean look, pleasant to work with.  No, it’s not dark and moody like the Expression Blend interface.

See Jason’s blog for more screen shots.

Read Full Post »

Building a WPF Search Text Box

I’m sure you have encountered a search box that looks like the following.

 

This type of search box reminds me of a ComboBox.  It takes up very little space in your application and combines many constituent controls into a single control.  In this example the search text box contains a textbox, label and search/clear buttons. 

Unfortunately neither the standard WPF or Winform control libraries contain a Search control.

You’re in luck however.  David Owens II has a lengthy article describing how to make your own custom SearchTextBox control. 

 

Read Full Post »

Feel the Power of WPF ListBox Templates

I teach a lot of WPF classes. During each class there comes a moment, usually on the third or fourth day, when the questions change and a sense of excitement rises in the room.  Suddenly all the pieces come together in the students mind; the dependency system, data binding and data templates, styles, control templates and everything else they’ve seen during the week.

The drums start pounding…

“I feel the power of WPF.”

A chant soars though out the room…

“I feel the power of WPF.”

I can see it in their eyes….

“I feel the power of WPF.”

I can hear it in their voices…

 “I feel the power of WPF.”

Clap, clap, clap, clap…

“I feel the power of WPF.”

Clap, clap, clap…

“I feel the power of WPF.”

 

 

 

 

 

 

Reality fights back

OK. that was a bit of a stretch but the point is valid. 

At some point when learning WPF you realize how flexible and powerful  the framework is, and it opens your mind to the new possibilities.  Here’s a simple example. One of the surprising areas in WPF is the limitless ways to restyle the lowly ListBox.

Listboxes in WPF are different

Items Controls are the basis of all list controls in WPF.  Dr. WPF has a great series about ItemsControls which is very helpful in learning about this powerful set of controls.

ListBox Control Template example

Here’s a interesting example of the drastic extent you can change the appearance of the ListBox. This map of the U.S.A is really a ListBox.

http://richapps.wordpress.com/2009/02/12/advanced-styling-wpf/#

Read Full Post »

Microsoft Semblio – Education content creation tool

Microsoft has had an academic division for a long time.  Some years it seems more active in producing material for schools and teachers than in others.  I’ve had some experience working in this area. About six years ago I did some work producing a .NET Train the Trainer course for college professors.  I also worked with Microsoft Press and University of Singapore to develop a .NET course around the same time.

There have been other Microsoft attempts to get .NET in academic classrooms over the past few years but today I want to talk about Semblio.

Introducing Semblio

It appears that Microsoft is entering the academic content creation tool market.  Semblio, released without much fanfare, is a WPF based content creation tool. 

Using Microsoft Semblio, you can create rich, immersive multimedia learning material that’s highly interactive and fosters exploratory learning that teachers can customize, and that promotes collaboration. Because Semblio takes a platform approach to content creation—leveraging the flexibility of the Microsoft .NET Framework—it works across software, services, and learning management systems. This allows you to meet the demand for more customized solutions, while still providing you with control over how your material is adapted.

The Microsoft Semblio Software Development Kit (SDK) is built on Windows Presentation Foundation and provides a programming model and tools that facilitate the packaging and arrangement of .NET-based content such as:

• Semblio content elements, from simple buttons to highly complex activities
• Templates, wizards, and other supporting tools for use with the assembly tool
• Complete interactive courses

But Semblio is not just a developer tool; it will also include an assembly tool, released with the next version of Microsoft Office. This will allow multiple content types to be combined into a single, rich, multimedia presentation, all in a single, familiar, and easy-to-use Microsoft Office-like application for educators. Also included is a player that students and educators can use to view and interact with presentations.

This looks quite promising.  I’ll have to download the SDK and learn more.  So far I don’t see any licensing cost for using it.

You might have heard of this tool under another name. It was code-name Grava during the development phase.

Read Full Post »

Ginipic – Dockable WPF Picture Integration Tool

You know the drill.  You’re working on a presentation or document and you need a picture.  If you want to search locally you pull up Windows Explorer and enter a search term.  If you are lucky you find the picture you want an paste into your application.  Actually I use Copernic Desktop Search instead of the Windows Explorer, but that is a topic for another day.

What if you’re looking for an image on the web?  There are a lot of sites that contain images that you can use in your application and many search engines that help you find those images.  You may spend a lot of time navigating to the different sites and entering the search terms and still not find what you are looking for.

New Image Search Tool and Integrator

Ginipic claims to offer a better way to find images and use them in your applications. Let’s take a look and see what it can do.

Ginipic is a WPF application that runs locally on your computer, not through a browser. It can be docked to the sides of your window, which makes is simple to copy and paste pictures into your application.

Here you can see it docked next to Live Writer.

 

 

When you click on an image in the search results a preview window appears. 

Not only do you get image details like size, title, file type, dimensions, and date taken, you get the author of the image and information about licensing.

If you like the picture, you just drag the image to your app, like I did with this picture of a Red-Billed Hornbill.  It’s just that simple.

You can also grab an link for you website like this;

http://farm3.static.flickr.com/2061/2147471224_7da5d33af2_m.jpg

or grab more detailed HTML like this;

<div style=”font-family: verdana; font-size: 14px”>
    <div>
        <img alt=”Red-billed Hornbill” src=”http://farm3.static.flickr.com/2061/2147471224_7da5d33af2_m.jpg” border=”0″/>
      </div>
      <div>
        <small>
            <a href=”http://www.flickr.com/photos/21923086@N05/2147471224/”><strong>Red-billed Hornbill</strong></a> by <a href=”http://www.flickr.com/people/21923086@N05/”><strong>Stephen Oachs</strong></a>
        </small>
      </div>
      <div style=”margin-top: 5px; font-size: 14px”>
          <div style=”float: left; margin-top: 3px”>
            <small>* Found with</small>
          </div>
          <div style=”float: left; margin-left: 5px”>
              <a target=”_blank” href=”http://www.ginipic.com/” linkindex=”124″ set=”yes”>
                <img alt=”Ginipic logo” width=”90px” height=”23px” style=”border: 0px;” src=”http://static.ginipic.com/img/ginipic_logo_small.png”/>
            </a>
          </div>
      </div>
</div>

You can go to the original photo site or set the image as your desktop wallpaper from the Ginipic interface.  If you into the social web you can also send the image to any of these services.

Search

You can search up to ten sites at one time from the Ginipic interface.  It can also search your local drives.

Price

Best of all, this is a free application. It’s found a place on my program list.

Read Full Post »

WPF and Silverlight – Control Browser

Mike Taulty had a small problem.  He wanted to demonstrate the power of the WPF controls in action.  There are so many controls available that exploit the power of WPF.   Obviously there are the ones built into WPF, and the ones in the WPF toolkits. Don’t forget all those third party control suites from IndentyMine, DevExpress, Infragistics, Xceed, Syncfusion Telerik, Component One and ActiPro. Got to show those too.

Hold on, what about Silverlight controls?   There is some interesting work being done in the Silverlight control space. Better add them to the list. 

Is there a tool to showcase these controls?  Well there wasn’t when Mike went looking, but there is now!

 

The Control Browser

This is a WPF application (Click-Once) that makes clever use of the WPF WebBrowser control.

Read Full Post »

WPF Data-binding Cheat Sheet

Do you find yourself struggling to remember all the settings for WPF bindings?   Perhaps taping this three page cheat sheet to your office wall would help.

http://www.nbdtech.com/Free/WpfBinding.pdf

Sample

Edit:  Cheat sheet created by Nir Dobovizk

Read Full Post »