Here’s the detailed post on my Infragistics blog. You will find the links to download the samples and slides.
Here’s the detailed post on my Infragistics blog. You will find the links to download the samples and slides.
In my previous post, I introduced you to Blend for Visual Studio and talked about Project templates and Item templates. Now that you are set with your templates its time to understand blend workspace better. This is going to be your playground for designing and creating some stunning animations. This post will concentrate on the workspace that Blend provides when your project is in XAML.
There are two default workspaces in Blend
You can switch between the two by clicking on Window > Workspaces or by Ctrl+F11. These workspaces are customizable so you can change panel orientation, dock or float , or resize panels as per your need. You can also change the theme of the entire workspace by clicking Tools > Options > Workspace > Theme.
Tools panel contains the most handy tools for designing the UI elements. Some tools that are included are Selection, Direct Selection, Pan, Zoom, Eyedropper, Paint Bucket, etc.. You will notice that some of the section in tools panel have a small white triangle on the lower right corner. This is an indication that if you click and hold you will get additional option of related tools.
Assets panel lists all the controls, styles, shapes, media, categories, and locations. Controls in assets also include Windows 8 specific controls like AppBar, GridView, FlipView etc. The search box in the assets panel is a handy feature. Alternatively you can access the Assets panel from the tools panel(the last button), it will contain your recently accessed assets.
Artboard is your work surface where you visually design a page of your application. On the top right corner you will find the view buttons. Use these to switch between Design, Code, and split views. On the bottom left corner you will find Artboard controls like Zoom, Show snap grid, Snap to gridlines and Turn off snapping to snaplines. Learn more about snapping here.
Objects and Timeline Panel:
Objects and Timeline panel helps you in viewing the hierarchical structure of objects in the artboard. You can modify them directly by dragging them from one position and dropping them to the desired position to form the intended structure. You can add animation to your application by simply creating a new Storyboard by clicking the + button. Storyboards are containers that hold animation timelines. Learn more about adding animations here.
If you are a Visual Studio developer then Properties panel is not a new thing to you! It is the place where you view and modify properties of an object that is selected on the artboard.
Few other panels, you should know about:
Windows 8 has been reimagined from chipset to the user experience and hence it demands every store app developers to follow strict UI design principles. Blend is a great tool to start with. It helps you design stunning apps and also eases out in wiring up animations. So go ahead sweat the details and create a fast & fluid app.
@nishanil on twitter
Newest release of Blend now supports UX authoring for Windows 8 store apps both in XAML and HTML. The good news is that if you are a Windows 8 store apps developer then you can make use of Blend for Visual Studio 2012 which is included as part of the Visual Studio 2012 installation. More to it – you get this cake even if you download the Visual Studio Express 2012 for Windows 8 which is of-course free!
Windows 8 store apps much like Windows phone compels a developer to follow the Metro Design Principles. “Metro” as it was formally known as; “Windows 8-style UI” from now on!. With the UX guidelines in place for Windows 8 app development, it is also important to have an UX authoring tool like Blend to be part of the developer’s machine along with Visual Studio.
Blend clearly is a tool for building awesome User Interface Design. Blend lets designers focus on design while letting developers focus on logic of the UI. Blend until the last release was specifically targeted for designing front-end XAML based interfaces for WPF and Silverlight. But “Blend for Visual Studio” has clear targets – Designing Windows 8 Store Apps in XAML/HTML. It adds support to some awesome Win 8 features like App Bars, Grid view and View States. It also supports native C++ app development.
Beyond providing simple XAML/HTML designers and editing support, Blend gives you tools that help you configure UI elements, author complex animation sequences(XAML), create user controls from vector graphics(XAML), customize visual states(XAML) etc. In HTML it provides some cool way of editing Style Rules, CSS Properties, HTML attributes and Live DOM.
Blend provides you with templates to speed up your app development just like Visual Studio. Three important project templates available for both HTML and XAML are:
For HTML project there are two more templates you can make use of:
You can read more about Project templates and Item templates here.
Now that you have made your project choice, it is time to understand the Blend workspace. In my next blog post I will cover them.
I was under an assumption that ObservableCollection<T> works perfect with WPF DataGrid until my friend wannabeegeek came up with a strange problem. The problem was making ObservableCollection<T> update the ItemSource on fly while editing them. What’s the big deal right? Wrong.
If you are using MVVM you do not want to wire up the event on DataGrid for an updated source. You will very much think that as long as you bind the collection to the ViewModel’s property and the mode is set to TwoWay – the source is updated automatically when items are edited in the DataGrid.
Your ViewModel will fire the property changed when the collection itself changes – that is if you replace the property itself. So if you want to know the change in items of the collection you need to subscribe to the CollectionChanged event of the ObservableCollection<T> property in your ViewModel.
Occurs when an item is added, removed, changed, moved, or the entire list is refreshed.
But there is a problem with ObservableCollection.CollectionChanged event – it does not fire when your data item’s property changes. It fires only if the entire item is replaced. That is if you have a collection of an Entity “Expense” that has properties “Name” and “Amount” and if you simply change the Amount value in the grid it does not work! You need to replace the entire “Expense” object for you to see the collection change firing up.
.. and the screen shot:
I have a DataGrid that is simply bound to an “BindingList<Expense>”. Right below that I have a Total that is bound to the “TotalExpense” property. Now here is what I wanted to do – Whenever user edits the amount in the Grid the Total should be calculated as he/she tabs out.
.. and the ViewModel with the solution:
The TotalExpense getter simply calculates the sum. And the ListChanged event of Expenses property simply notifies the change in TotalExpense.
.. and in the View:
Download the full code here. The code contains a tiny MVVM framework(inside core folder). – Read the disclaimer of the blog before you play with my code.
If you know to achieve this exact behavior with ObservableCollection do make a comment to this post and let me know!
When you think of MVVM and other patterns involved, it is often about separation of concerns as much as possible, unit testability and code maintainability. These type of patterns help in high quality of code and efficient development of business functionality. If you are new to MVVM then you may want to check out some of the articles by various intellects like Josh Smith, Laurent Bugnion and few others from XAML Disciples group(or just Google ).
There are lot many frameworks on MVVM out there and to be frank there isn’t any right or the wrong one. You need to evaluate and decide on the one that fits your need! Most often people land up writing one on their own and in a way it is good!
I personally like a framework written by Brette Esterbrooks because it is a skeleton of code that you need and helps you get started. I tweaked it a bit(basically removed the ones that I don’t need) and thus the sample attached on this blog will have a tiny little framework of MVVM.
All it has is just a few helper classes:
Attached behavior is achieved by simply attaching a behavior to a control that otherwise wouldn’t have anything of its own.
And as per Josh Smith-
The idea is that you set an attached property on an element so that you can gain access to the element from the class that exposes the attached property. Once that class has access to the element, it can hook events on it and, in response to those events firing, make the element do things that it normally would not do. It is a very convenient alternative to creating and using subclasses, and is very XAML-friendly.
Ever since I am hooked to MVVM pattern, I try and avoid all the code that usually goes to the code behind. For e.g. a click event handler usually written in the code behind can be omitted and a RelayCommand in the ViewModel be used instead.
But what would happen if you want to handle a double click or a focus event of a control? Just retaining those kind of events to the code behind defeats the pattern itself. And thus Attached Behavior comes to rescue! Demo included in this post explains the DragDropBehavior.
Before you go further with this approach, I just want you to know that you can achieve this by Behavior<T> class included in the system.windows.interactivity.dll. However this dll is available only through Expression Blend installation.
In my demo I have explained both of the implementation and it’s usage. Here we go!
The view models can hold the reference of this contract and change at runtime if needed:
A static class AttachedBehavior is introduced which holds the attached properties “Behavior” and “IsEnabled”.
When toggled from Enabled state to Disabled State – OnDisabling() method of the IBehavior is called. Use this method to unwire your event handlers.
DragDropBehavior class implements the IBehavior. Have a look at the OnEnabled and OnDisabling methods.
Attach is the behavior to the control that you want to drag:
And finally the ViewModel that set’s the DragDropBehavior:
That’s It – you are done!! Refer DragDropBehavior2 class for implementation using Behavior<T>.
Download the Code – Read the Disclaimer of this blog before you work with this code!
Guest Additions on Virtual Box can be installed by changing compatibility to Windows 7 but that doesn’t mean it can be made to work. Yeah that’s where I too got stuck and my hunt for a fix to it also stopped when I read this forum.
I found few others who have tried complicated file sharing techniques, for e.g. they created a secondary virtual hard drive and put files into it. However being working on Windows for more than a decade, I do believe there should be a simple way to achieve it. After all they are two different windows machines on the network.
Well what would you do to access a share drive on another system? Start->Run-> and type “\\machine-name\share” and hit enter? That wouldn’t work because your host machine name will not be recognized by your virtual machine since they are on a different network group.
Now here is the solution: Go ahead and figure out the IP address of your host machine(ipconfig) and try accessing the share by its IP address instead of the machine name. That works!
Things are simple, we complicate it most of the time.
/* Nish */
Ever wondered how to get a IE like look and feel of the xml in the default WPF web browser control? If your answer is – “Just navigate the Web Browser to the xml path”; You are right! But if you have to navigate to a in-memory xml? Read on to know and apply IE like styling for xml stored in a string variable.
Idea of writing a custom based xml browser control came in because I had a requirement to edit the xml on fly and validate it against a specified schema. User is allowed to edit only the standard xml(compiled as an embedded resource) that the tool provides and not navigate to any path.
This control helps you:
Before I go further, here is what you get:
The problem with web browser when navigating to a string is that it does not load the style for it. Hence the work around is to transform the xml and navigate to it. To do so you need the Xslt that IE uses. After googling for “xml pretty print”, I finally got one originally written by Jonathan Marsh of Microsoft for IE5 and modified by Steve Muench for conversion to XSLT 1.0 REC. Copy the xml from here.
And here is the code to transform it:
XSLT is provided as an embedded resource and it is loaded from the code. If you are moving the xslt to your project, make sure to change the namespace in the calling code.
You can download the code from my share here. This code works on my machine!
Feel free to modify the code, but as usual you don’t get warranty!