|
|
These blog entries are written by industry experts and leaders. We consider this content to be a good read for any software developer or web technologist.
Browse by Tags
All Tags » .NET » WPF/E (RSS)
-
Silverlight 2 provides a rich platform for building cross-browser/cross-platform RIA applications. One of the things that makes Silverlight so powerful is the ease with which developers and designers can collaborate together on projects. Developers can use Visual Studio to open and edit Silverlight 2 projects and get a powerful code-focused .NET development environment, and designers can use Expression Blend 2 SP1 to open and edit the exact same project and use a creative tool to sculpt and create optimal user experience designs. The WPF UI framework shipped in Silverlight further enables a great designer/developer workflow by supporting concepts like layout management, controls, styles, templates, and resources - which help avoid scenarios where designers and developers end up tripping over each other when integrating functionality, behavior and expressive design. Silverlight 2 Twitter Sample Last month I posted an in-depth blog tutorial on how to build a Silverlight 2 Digg application which you can read here. This tutorial was aimed primarily at developers, and focused on introducing the fundamental programming concepts involved when building a Silverlight 2 application. Today Celso Gomes and Peter Blois posted a cool 10 minute video tutorial that shows off using Expression Blend to stylize a Silverlight 2 Twitter Messenger application. You can watch the video here. You can download the source code for the completed Silverlight Twitter application here. The video does a nice job demonstrating how designers can re-style a Silverlight application without having to mess with the code behind it. In the process it shows some of the power and capability that Expression Blend 2 provides to build really rich user experiences. Celso starts with a developer version of the application, and then customizes and sculpts the UI to have a fun twitter character theme:  
The Application Model The Silverlight Twitter client is hosted within an ASP.NET server application that exposes a web service that enables the Silverlight Twitter application to communicate to the Twitter service (since Twitter does not allow direct access from client applications). Communication between the Silverlight client and the ASP.NET web server is done using Windows Communication Foundation (WCF). The client application uses a Model-View-Presenter (MVP) pattern (also known as the Model-View-ViewModel pattern) which is commonly used in large WPF applications. Even though this is a fairly simple application they wanted to take advantage of the flexibility that MVP allows and allow room for future growth. Maintaining the separation between the visuals and the application logic also enables designers to make fairly complex visual changes without impacting the basic application flow. The video goes through some examples of the styling flexibility this architecture facilitates. The Styling Process In the video, Celso highlights how Resources can help designers quickly change colors. A common Brush Resource, for example, can be used to change the color of all the text elements in the application: 
Celso shows how easy is to create new User Controls from graphics using Expression Blend 2 SP1 (just select multiple elements in the designer, right-click, and choose the "Make Control" menu option): 
And also how to create new states inside this new User Control (using the Visual State Manager feature - which is also now supported with WPF), to animate the bird (fly, blink, etc...) 
Celso also shows how to create animations for each state, changing advanced properties like Key Spline curves, and Repeat Behavior: 
He also shows how to create custom buttons from drawings (which can come from XAML or any other design tool like Photoshop or Illustrator). All the states of a Button Control are available out of the box. 
Expression Blend also enables you to easily change complex controls like List Boxes. Designers have access to all Styles, Templates, and states - and can completely customize all the parts of a List Box without having to write any code: 
You can watch the video and download the code to check out the above Twitter application. To learn more about Expression Blend, I also recommend watching the Expression Blend: Tips and Tricks presentation from the PDC conference two weeks ago. Hope this helps, Scott 
|
-
I'm just about to hop on the flight back to Seattle after finishing up a 10 day business trip to Europe where I spoke at conferences and user group events in Budapest, Amsterdam and Zurich. Although trips like these are a little exhausting, I find them really valuable as a way to connect with developers from around the world, as well as provide me the opportunity to create and deliver new presentations and samples. One of the talks I delivered on this trip was a new "Building Silverlight Applications using .NET" talk that people seemed to really like. Building Silverlight Applications using .NET Talk I tried to keep the format and samples in this talk simple, and used a model where I used a few slides to explain each programming model concept in Silverlight, and then showed a very simple sample for each concept that helped demonstrate concretely how it worked. In the talk I covered: - XAML
- Using Shapes and Text
- Using Controls
- Layout (Canvas and Layout Managers)
- Brushes
- Transforms
- Handling Events and Writing Code
- Building Custom UI Controls
- Reaching out and Programming the HTML of a page from a Silverlight control
- Handling HTML Events in Managed Code (e.g. html button click handled in C#/VB on the client)
- Exposing managed APIs to HTML JavaScript in the browser
- Using the File Open Dialog support
- Using the HTTP Network APIs
- Using the Web Service APIs
- Isolated Storage for local data caching
The slide deck comes to 83 slides - but I think does a good job of explaining everything step by step (it is also an easy deck to read - so even if you don't want to run the samples locally I'd recommend taking a look through the deck since I think you'll find it useful). You can download the slides + demos of this talk below: Included in the .zip download are readme instructions on how to run all of the samples on your own machine. Quick Answer to a Common Question about .NET with Silverlight One of the most common questions I received when giving the talk was - "do I need to have the .NET Framework installed in order to use Silverlight?". The answer to this is no - a cross platform version of the .NET Framework is included in the 4MB Silverlight 1.1 download, which means you do not need to have anything extra installed on the client in order to program Silverlight with a .NET programming model in the browser. The Silverlight version of the .NET framework includes the same CLR engine (same GC, type-system, JIT engine) that ships with the full .NET Framework, and a subset of the .NET Framework namespace libraries. You can see the full list of all classes/namespaces that are included by opening up the Object Browser when you create a new Silverlight application using Visual Studio (click here for a sample screen-shot of this). People are usually pretty stunned/confused to hear that it is possible to get this much stuff in so small and quick an install package. Let me just say it wasn't easy. <g> Other Silverlight Talks and Blog Posts For a broader overview talk of Silverlight, as well as some cool (more complete) samples you can download, please check out my previous "Lap Around Silverlight" talk and blog post here. You can learn even more about Silverlight from my summary post here. And you can watch me build a Silverlight application using .NET from scratch in this video here. The talk above borrowed a number of slides from a few other Silverlight and WPF/E talks that others and I have given (although almost all of the code samples I showed in my talk are new). In particular, my WPF/E talk from earlier in the year, Jamie Cool and Nick Kramer's Two Talks at MIX, and Stefan Schackow's Extending the Browser Programming Model with Silverlight talk at MIX. You can watch Jamie, Nick and Stefan's talks online (along with all of the other MIX talks) for free here. Hope this helps, Scott 
|
-
One of the nice features that Silverlight supports is the ability to go "full screen" and effectively take over the entire screen of a computer (hiding everything else from sight - including the browser frame). This can be very useful when building immersive UI experiences, games, rich video players, etc. For a nice example of this feature in action, make sure to check out the Fox Movies Sample on www.silverlight.net: 
Once the page loads and the movie starts playing, double-click on the video surface in the middle to switch into full-screen mode (note: the screen-shot above is not in full-screen but rather browser mode). You can then hit the escape key to switch back into normal browser viewing. How to Implement Full Screen Mode with Silverlight 1.1 using .NET One of the questions I've seen a few people ask is "how can you implement full screen-mode when building Silverlight applications using .NET?" The good news is that the answer is actually pretty easy: 1) First add an input driven event handler to your application (for example: a mouse down or keyboard event handler). For security reasons Silverlight doesn't allow developers to switch an application into full-screen mode on first application load (you don't want an application to spoof you). So you'll instead need to trigger full-screen mode in response to a user action. 2) Within your input event handler set the BrowserHost.IsFullScreen property to true (note: the BrowserHost class lives within the System.Windows.Interop namespace). This will cause Silverlight to switch into full screen mode. Setting this property to false will return it back to normal browser mode. Simple Full Screen Mode Sample You can download a simple Silverlight full screen-mode sample I put together written in C# here. When you run the sample it will load a super simple Silverlight application within the browser and display a text message prompting you to click it to switch into full-screen mode: 
If you click the "Click for Full Screen" text, the application will switch into full-screen mode - which will hide everything else running on the system and take over the entire screen: 
When you switch into full-screen mode, Silverlight will display a user message blurb that will pop-up on the screen for a few seconds and instruct the user that they can press the escape key to switch back into browser mode. After a few seconds this message will disappear and only your content will be visible. In my sample above I also allow the user to click on the "Click to Return to Browser" text and switch back into browser mode as well. Walkthrough the Simple Full Screen Mode Code The code to implement the above sample is pretty simple. To begin with we can open and edit the root .XAML file for the application, and add a UI element to it that we want to use to trigger the full-screen mode. In the sample above I used a <TextBlock> control that I named "MyMessage". Below is all of the XAML for the entire application: 
The below screen-shot shows the code-behind for the .XAML file above - and contains all of the code for the entire application: 
Within the application's Page_Loaded() event handler above I am wiring up two event handlers: MyMessage_MouseLeftButtonDown - This event handler will execute anytime a user clicks on the TextBlock message control I added into my XAML file. Within this event handler I'm simply toggling the BrowserHost.IsFullScreen property to true or false depending on whether or not it is already in full screen mode. BrowserHost_FullScreenChange - This event handler will execute anytime Silverlight switches between full screen and browser mode. It provides a good place to add logic to update the UI when this happens. In the example above I am changing the text on the TextBlock control. I could also have optionally resized controls and/or moved them around the screen to new coordinate positions. Currently the Silverlight 1.1 Alpha doesn't have layout manager support, so controls won't automatically re-position unless you write code to manage this yourself (don't worry - layout manager controls for Silverlight like in the desktop WPF version are coming). In addition to the IsFullScreen property, BrowserHost class has a number of additional properties and events that are very useful: 
The ActualHeight and ActualWidth properties are particularly useful to lookup the screen dimensions when you switch into full-screen mode - which you can then use when positioning and scaling your UI controls on the page. Summary Supporting full-screen mode within Silverlight applications is pretty easy to enable, and offers the ability to provide a nice, immersive user experience. To learn more about Silverlight, please read my comprehensive Silverlight announcement post as well as visit the www.silverlight.net community site. To watch me walkthrough building a Silverlight application from scratch using .NET and Visual Studio "Orcas", please watch this video here. Hope this helps, Scott 
|
-
Last December Microsoft announced the new Expression Studio products. These products enable designers to build awesome user experiences, and are designed to help facilitate great designer/developer workflow collaboration on projects. The Expression products share a common project file format with Visual Studio, which enables designers using Expression and developers using Visual Studio to open and edit the same projects together. They also share common UI declarative markup formats (HTML and XAML), which enables clean design/coding interaction. When we originally announced Expression, one of the common questions/complaints was over why we weren't planning on including the products (especially Expression Web and Expression Blend) within MSDN subscriptions. Today we announced that we were changing this (you can read details on Soma's blog post announcing it here). Expression Web and Expression Blend will now be available at no extra charge to all MSDN Premium Subscribers (this includes customers with the "VS Professional with MSDN Premium" subscription). This means many more developers will have awesome design tools for building great ASP.NET, WPF and "WPF/E" solutions. 
Visual Studio will also have integrated WYSIWYG designers for HTML, WPF and WPF/E as well. As I mentioned in my "First Look at Orcas for Web Development" blog post last month, the HTML designer within Visual Studio "Orcas" is actually the same one that ships in Expression Web (but integrated into the Visual Studio shell). VS "Orcas" also ships with a great new designer for WPF that integrates nicely within the Visual Studio IDE and adds rich developer features (for example: like live split-view designer/source editing and rich control extensibility). If you haven't tried out Expression Blend or Expression Web yet, I'd highly recommend giving them a spin. You can download free 180 day trial editions for them on the Microsoft Expression web site. Hope this helps, Scott 
|
-
Earlier this week I presented three breakout sessions at the ASP.NET Connections conference in Orlando. Below are the slides / demos for each of the talks I gave: Introduction to "WPF/E" This talk provides a good introduction to "WPF/E" - which is the code-name for a new small, cross platform browser runtime that enables developers and designers to deliver richer, more interactive web experiences. I first blogged about "WPF/E" here. You can download the slides+demos from my WPF/E talk here (it includes a video sample - which makes the overall download ~10MB). The talk provides an overview of the core capabilities within the WPF/E CTPs today, and also demonstrates the core XAML and JavaScript programming model concepts you use. For more "WPF/E" samples please visit the online "WPF/E" sample gallery on Channel9 here. You can also download documentation and samples on the official "WPF/E" MSDN site here. Mike Harsh on my team also maintains a fantastic blog that covers WPF/E here that I highly recommend subscribing to. Building Data Driven Web Applications using LINQ This talk provided a drill down of LINQ (which will ship as part of our "Orcas" release), and demonstrated some of the dramatic productivity improvements it will bring for ASP.NET. Click here to download the slides for this talk. If you haven't seen it yet, I highly recommend watching my 20 minute video that demonstrates using LINQ with Visual Studio "Orcas" here. You can learn even more about LINQ and how to use it with ASP.NET by reviewing some of my past LINQ blog posts. Here are a few in particular worth reviewing: Lastly, to learn more about some of the new C# and VB language features coming out with "Orcas" (and which LINQ heavily uses), please check out the first two posts in my language series here: I'm going to try and post the next installment in my language series (which will cover Lambdas) in the next few days - so stay tuned for that. ASP.NET 2.0 Tips and Tricks: This talk covered ASP.NET UI, AJAX, Caching and Deployment Tips and Tricks, and Visual Studio 2005 tips/tricks. The samples include updated versions of ASP.NET AJAX that all work with ASP.NET AJAX 1.0. You can download the slides+samples here. You can learn more about the Visual Studio build performance optimization suggestions by reading this past post of mine on improving build performance. Hope this helps, Scott 
|
-
 Yesterday Channel9 posted a video interview of me with Rory Blyth that was filmed earlier this week.
During the interview I talk about WPF/E, VS Orcas, IIS 7 and the upcoming Microsoft MIX conference on April 30th - where Ray Ozzie and I are the keynote speakers. I also talk about having my car towed by Microsoft campus security. Click here to watch it. - Scott 
|
-
Milan Negovan from the http://aspnetresources.com/ site has been working on putting together some really nice PDF "cheat sheets" for the client-JavaScript libraries in ASP.NET AJAX: 
These are super handy pages to print out and keep around to quickly find information and code-snippets to use. Milan is making these available completely for free - so definitely download them and send him feedback (he is going through and adding them for all the core classes in the client-side AJAX library). Hope this helps, Scott 
|
-
At the Consumer Electronics Show this week, Yahoo showed off some cool demos with their next generation messenger client (you can watch a video of it in action at http://messenger.yahoo.com/vista). One of the really cool things about the new messenger client is that it was built using Windows Presentation Foundation (WPF) and the .NET Framework. 
One of the most powerful aspects of WPF is its ability to create really immersive user experiences that go far beyond what we typically expect today from either a client or web application. Developers can style and templatize UI in a way not possible with most other UI frameworks, and use its built-in UI/Code separation model to enable both designers and developers to collaborate on projects together. Over the next few months I'll be posting a number of blog posts that walkthrough how you can start learning WPF to build great applications (note: WPF is now a built-in library of the .NET Framework redist). If you are interested in learning more about WPF I'd also highly recommend subscribing to "theWPFBlog" - which posts some great articles on both WPF and WPF/E (the above screenshot came from this recent post). Fun stuff, Scott 
|
-
 This morning we released the first public community technology preview of "WPF/E". You can install it here, and then try out a few of the early samples that show off some of its capabilities below (note: some of the servers might not have finished propagating the samples, so check back later if the links don't work):
"WPF/E" delivers a small client runtime that enables AJAX developers and designers to deliver richer, cross-platform, interactive web experiences. It will allow applications to go beyond what can be done with pure HTML today, and will enable sites to significantly improve the client user experience by blending HTML UI, Dynamic Vector Graphics, Animation and Media into a seamless cross-platform browser experience. "WPF/E" accomplishes this by providing a rich graphics engine that can be used on any HTML page and which adds browser support for vector graphics, animation, and declarative XAML UI markup (the declarative XAML format enables search engine optimization of interactive content as well as better authoring via WYSIWYG tools). WPF/E also provides built-in video and audio codec support for WMV, WMA and MP3 content. This means you can now easily stream interactive video content to any browser without requiring any additional install or runtime (Windows Media Player is not required). "WPF/E" is implemented as a small client-side runtime that users download and install once for their browser (the CTP is a 1.1Mb download, and can be configured to "download on demand" the first time a user visits a page that uses "WPF/E" content). This first CTP runs on both Windows and Macintosh systems (both x86 and PowerPC), and supports IE, FireFox and Safari browsers. What makes "WPF/E" really nice from a developer perspective is that it is easy to integrate it within existing HTML pages and sites. Developers can write standard JavaScript within an HTML page to directly manipulate and program against any XAML DOM element, storyline animation, or video within "WPF/E". This enables developers to easily add WPF/E assets to their existing AJAX-enabled HTML solutions today, and be able to use a single code-base with a consistent AJAX framework to work against both the HTML and XAML DOMs on the page at the same time. "WPF/E" can be used with any AJAX framework (it has no dependencies on any client-side AJAX implementation). We'll obviously also deliver deep integration with ASP.NET AJAX, Visual Studio, and the new Expression Studio designer-tools as well. We'll also be providing "WPF/E" integration with .NET managed code next year. To learn even more about "WPF/E", check out this Channel9 video about the project: 
You can also review the CTP documentation here. I'll also be posting a number of "WPF/E" tutorials (including ones that show off nice ASP.NET AJAX integration) over the next few weeks on my blog here as well. I think you are going to find it a very exciting technology to take advantage of, and that it is going to enable you to significantly improve the user experience of your web applications going forward. Thanks, Scott 
|
|
|
|