Wednesday, December 15, 2010

WPF VisualStateManager GotoState Bug

So, I just wasted a couple of hours trying to figure this one out so I thought I’d post about it so you guys don’t have to waste as much time as I did on it.

The WPF VisualStateManager implementation is still not as rock solid as Silverlight’s implementation (ok, let’s face it, Silverlight’s implementation is far from rock solid too, but it is much better of at this point). If you are trying to call the VisualStateManager.GotoState Method on a Window, you are going to be very very frustrated. Why? Because it doesn’t work. If you are inside a user control, it is fine, but inside of a Window… nope!

Instead of calling this

VisualStateManager.GoToState(this, "stateName", true);


You are going to need to call this



VisualStateManager.GoToElementState(this.RootElement as FrameworkElement, "stateName", true);


That should do it for you. Microsoft is aware of the issue and has promised to fix this, but who knows when that’s going to happen.



Happy state-changing!



 




WPF - Accessing Resource Dictionaries in Separate Assemblies

There are certain situations where you will need to access resource dictionaries outside of your application. For example, you may want to share one resource dictionary among several applications that share the same styles.

What you want to do is use WPF’s pack URI Scheme.

Remember to include a reference of the assembly containing the resource dictionary (YourAssembly) in the application project. Then, all you have to do is use this rather strange looking syntax to access that resource dictionary within your xaml.

<ResourceDictionary Source="pack://application:,,,/YourAssembly;component/Subfolder/YourResourceDictionary.xaml"/> 

There are many variations of this syntax that you can use. Which one is right for you depends on exactly what you are trying to do. The above syntax should work for a majority of the situations. Accessing these resources can be done in both xaml and the code behind.

For more information on the pack URI Scheme syntax, follow this link:

http://msdn.microsoft.com/en-us/library/aa970069(v=vs.85).aspx

Note - this syntax is not only for resource dictionaries. This is useful for accessing several types of data files like images for example. This is commonly used for accessing resource dictionaries, but it is not limited to that.

 

Friday, August 13, 2010

Silverlight: Blank Line in TextBlock

 

This will be a relatively short one. I just wanted to post this out there in case anyone is wondering how to do this.There are several ways to create a blank line within a single textblock (or label) in Silverlight. The simplest is to use these special characters:

&#xd;&#xa;

So, the following xaml

<TextBlock Text="hello&#xd;&#xa;world"/>

produces this text block

image

Tuesday, July 13, 2010

Bing Videos… Are you Kidding Me?!?!?!?

So there is nothing technical about this post, but I found it interesting. I have been a big supporter of Microsoft Silverlight, but I do find it a bit frustrating when I find out they don’t use their own technologies internally. Check this post out, it points out how Microsoft uses Flash for their Bing videos rather than Silverlight!

image

Now, when you click on the video, you are taken to a Silverlight player where you can view the entire clip, but why the use of Flash for the preview? Why not Silverlight? What was the technical challenge that caused them to go with Flash?

http://geekygab.blogspot.com/2010/07/bing-videos-are-you-kidding-me.html

 

Friday, July 2, 2010

Get Local Time Zone

Here’s a quick post on how to get the local time zone in your Silverlight Applications. You need to use the System.TimeZoneInfo class to get this information. This simple call will give you your local time zone.

TimeZoneInfo.Local.StandardName



If you have a DateTime value you want to convert to local time, just call the ToLocalTime method on it and that should do it. You can also use the ToUniversalTime method on it to convert it to UTC time.



Thursday, June 17, 2010

Snippet Designer

I am a big proponent of code snippets. I use them all the time and I tend to write my own snippets for code I write over and over. Recently, I found a nice Visual Studio extension out in codeplex that lets you write your own code snippets a bit faster than editing the xml yourself. Although it isn’t very difficult, I have found this new method of writing snippets a bit faster, so I thought I would blog about it. If you are interested in trying this out, here is the url: http://snippetdesigner.codeplex.com/

The extension takes no time to install. once you have it installed, all you do is select the code you want to be created as a snippet and right click and export it as a snippet. From there, you open up a nice designer that lets you change the details of your snippet and create Replacements. It is a very cool tool and once you play around with it for a while, you’ll be creating snippets in no time and well on your way to saving time in your coding.

image

image

Enjoy!

Tuesday, May 11, 2010

Another Strange Silverlight Error: “Layout cycle detected. Layout could not complete”

Wow! Is this one ever frustrating! So here’s the situation:

I’ve got a datagrid which uses RowGroups. Everything is working just fine until I get a request from the product owner to hide/show several of the columns on that datagrid by clicking a button. I figured “This isn’t going to be too bad. I’ve done this before with other datagrids. Great, I’ll have it done in 10 minutes.” WRONG! To my surprise, I wrote some code very similar to what I’ve done in the past, but I started seeing this funky error “Layout cycle detected. Layout could not complete”. Because this is a Silverlight error, I did not get any other helpful information. Thanks so much Silverlight. Well, I can’t tell you that I completely understand the internals of Silverlight and what is causing this issue, but I do know that it has something to do with looping inside the the UpdateLayout method is executing for the datagrid. It seems to be getting stuck in an infinite loop. After a lot of searching and trying out different things, I came up with a workaround. If you are experiencing this problem, try removing the datagrid from its parent prior to making the change (in my case adding/removing columns) and then add the datagrid back to it’s parent’s Children collection immediately after you make the change.

This solved it for me. Here is a snippet:

            if (show == true)
{
_clmOne.Visibility = Visibility.Visible;
_clmTwo.Visibility = Visibility.Visible;
_clmThree.Visibility = Visibility.Visible;
}
else
{
//Hack:Need to remove the grid prior to adding columns to avoid Exception.
this.LayoutRoot.Children.Remove(myDataGrid);
_clmOne.Visibility = Visibility.Collapsed;
_clmTwo.Visibility = Visibility.Collapsed;
_clmThree.Visibility = Visibility.Collapsed;
this.LayoutRoot.Children.Add(myDataGrid);
}


I hope this helps you guys out. Happy Silverlighting!


Wednesday, April 28, 2010

Are You Annoyed With The Visual Studio XAML Design View?

I know I was! Sure, Visual Studio 2010 has a much improved designer (especially if you are working with Silverlight), but for the most part, the designer for Silverlight and WPF applications is pretty weak. I would much rather work in Blend or straight XAML. If I had to edit a XAML page in Visual Studio, I would always open the file and immediately switch to full XAML view. The designer always took too long to load and it wasted a lot of my time. Well, if you are in the same boat, here is a little tip. You can configure Visual Studio to always open XAML files in full XAML view and bypass the designer. To do this, go to the Tools menu and select Options. In the options dialog, select the Text Editor element on the left hand side and go to XAML and the Miscellaneous. Under the Default View section, make sure the ‘Always open documents in Full XAML view’ is checked and click ok. That should do it. From now on you will open your XAML files directly in the XAML view and you won’t have to wait for the editor to load and tell you it can’t render the XAML.

image

Note: The version of VS I am running is VS 2010 Ultimate.

Thursday, April 15, 2010

Silverlight 4 Just Released – Books to Help You Out

 

With the release of Sivlerlight 4 and all the tools related to that technology, now is a great time to learn how to develop rich web applications using Microsoft Silverlight. This knowledge will also allow you to create rich applications for the upcoming Windows Phone 7 devices. Follow the links below to purchase some of the newest (most up to date) books on Silverlight development.

  

 

Friday, March 26, 2010

How to use Isolated Storage on Windows Phone 7

 

image

I wrote a little sample application that lets the user work with the isolated storage on a Windows Phone 7 device. I won’t bother you with the details of the xaml because the UI is relatively straight forward. There are only a handful of controls and they are all pretty standard. What I want to share here is the code behind that makes this application work. Besides, it’s not really the most amazing app out there, it’s just meant to show you how to work with ISO storage.

The key take-aways from this are:

1) You will need to add reference to the System.IO.IsolatedStorage assembly and add the corresponding using statement.

2) You save and retrieve the settings by calling IsolatedStorageSettings.ApplicationSettings

3) You access the setting values via their keys - IsolatedStorageSettings.ApplicationSettings[“key”]= “value”;

Hopefully this gets you started saving and retrieving data to and from a Windows Phone 7 device.

More to come… happy coding!

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.IO.IsolatedStorage;
using System.IO;

namespace Isolated_Storage
{
public partial class MainPage : PhoneApplicationPage
{
private IsolatedStorageSettings appSettings;

public MainPage()
{
InitializeComponent();

SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;

btnAdd.Click += new RoutedEventHandler(btnAdd_Click);
btnRead.Click += new RoutedEventHandler(btnRead_Click);
txtValue.TextChanged += new TextChangedEventHandler(txtValue_TextChanged);

appSettings = IsolatedStorageSettings.ApplicationSettings;

UpdateSettingsCount();
}

private void UpdateSettingsCount()
{
lblCount.Text = String.Format("App Settings Count: {0}", appSettings.Count);
}

void txtValue_TextChanged(object sender, TextChangedEventArgs e)
{
btnAdd.IsEnabled = txtValue.Text.Trim().Length > 0;
}

void btnRead_Click(object sender, RoutedEventArgs e)
{
lstItems.Items.Clear();
LoadData();
}

void btnAdd_Click(object sender, RoutedEventArgs e)
{
IsolatedStorageSettings.ApplicationSettings[(appSettings.Count + 1).ToString()] = txtValue.Text;
UpdateSettingsCount();
}

private void LoadData()
{
for (int i = 0; i < appSettings.Count; i++)
{
string entry = string.Format("Key: {0} {1}Value: {2}", i + 1, Environment.NewLine, appSettings[(i + 1).ToString()].ToString());
lstItems.Items.Add(entry);
}
}
}
}



Thursday, March 25, 2010

How to add an Application Bar to your Windows Phone 7 App

When developing Windows Phone 7 apps, it is recommended not to include custom menus within the application in order to keep apps consistent across the platform. Instead developers should use the Application Bar to place such menu-like commands.

To do this, you first add a reference to the Microsoft.Phone.Shell assembly. You then need to add your images (button icons) to the project. You need to change the Build Action to Content and set Copy to Output Directory to Copy Always.

image

Here are the best practices Microsoft recommends for the images used in the Application Bar (ooops… I’m not following all of these in my example)

  • Icon images should use a white foreground on a transparent background using an alpha channel. The Application Bar will colorize the icon according to the current style settings and colored icons can cause this effect to display unpredictably.
  • The circle displayed on each Icon Button is drawn by the Application Bar and should not be included in the source image.
  • Icon images should be 48 x 48 pixels in size. The white foreground graphic for the button should fit in a 26 x 26 area square in the center of the image so that it does not overlap the circle.
  • Do not use an Icon Button for a back button that navigates backwards in the page stack. All Windows Phones are required to have a dedicated hardware back button that should always be used for backward navigation.
  • Use Icon Buttons for the primary, most-used actions in your menu. Some actions are difficult to convey clearly with an icon. If this is the case, consider using a Menu Item instead.
  • Choose icons that have clear meanings when the Application Bar is rotated. The Application Bar automatically handles changes in screen orientation. When the device is in a landscape orientation, the menu is displayed vertically on the side of the screen. The icon buttons are rotated so that they appear upright to the user, but the order of the icons in the list is not changed. It is possible for icon meanings to be confused when this occurs, particularly if two of the icons are mirror images of each other along the Y axis.

Now to the xaml.

Add the following xaml to attribute to the phoneNavigation:PhoneApplicationPage node:

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone.Shell"



to access the newly added dll reference.



Finally, add the following code inside the node phoneNavigation:PhoneApplicationPage node.



    <phoneNavigation:PhoneApplicationPage.ApplicationBar>
<
shell:ApplicationBar Visible="True" IsMenuEnabled="True">
<
shell:ApplicationBar.Buttons>
<
shell:ApplicationBarIconButton IconUri="/Images/thumbs up.png"></shell:ApplicationBarIconButton>
<
shell:ApplicationBarIconButton IconUri="/Images/thumbs down.png"></shell:ApplicationBarIconButton>
</
shell:ApplicationBar.Buttons>
<
shell:ApplicationBar.MenuItems>
<
shell:ApplicationBarMenuItem x:Name="menuItem1" Text="MenuItem 1"></shell:ApplicationBarMenuItem>
<
shell:ApplicationBarMenuItem x:Name="menuItem2" Text="MenuItem 2"></shell:ApplicationBarMenuItem>
</
shell:ApplicationBar.MenuItems>
</
shell:ApplicationBar>
</
phoneNavigation:PhoneApplicationPage.ApplicationBar>


 



This code sample works with the following image storage structure:



image



The result:



image



If the user clicks on the ellipses on the right side of the Application Bar, it will expand to show the menu items added.



image







If your application is setup to handle both orientations (this is the default behavior) then the menu items and the buttons will rotate appropriately when the phone’s orientation changes.



image





Wednesday, March 24, 2010

Windows Phone 7 Development: Using InputScopes

 

I went to Mix2010 this year and attended Mike Harsh’s talk on Building Windows Phone Applications with Silverlight (Part 1). After the session, I wanted to play around with InputScopes a little bit more, so I decided to try replicate the sample application he showed during the session. It is a really simple application. I figured I would post it since the presentation didn’t cover all of the implementation details.

There is a textbox where the user can type text and a listbox which contains all the available InputScopes. When the user selects an InputScope, it is applied to the textbox. This controls what the virtual keyboard looks like when the user is typing in. For instance, if the user selects the TelephoneNumber InputScope, the keyboard will look like this

image

But if he or she selects the InputScope the keyboard will look like this

image 

So, first to the xaml. This part couldn’t be simpler. Inside the content grid, I added a textbox and a listbox. I also changed the title lable to InpuScopes. That’s it for the xaml

<TextBox x:Name="txtInput" Height="50" VerticalAlignment="Top" />           
<
ListBox Height="580" x:Name="lstScope" HorizontalAlignment="Stretch" Margin="0,66,0,0" VerticalAlignment="Top" Width="460" />


And this is what it looks like. In this screenshot, the listbox is already populated, but we’ll take care of that in a minute in the code behind.



image



In the class constructor I added the bottom two lines. The first one calls a GetNames method which basically returns a list of all the names of the given Enum. The second line simply assigns an event handler to the SelectionChanged event of the listbox. This could have been done in xaml, but I arbitrarily chose to do it in code.



public MainPage()
{
InitializeComponent();

SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;

lstScope.ItemsSource = this.GetNames(typeof(InputScopeNameValue));
lstScope.SelectionChanged += new SelectionChangedEventHandler(lstScope_SelectionChanged);
}


Here is the implementation of the GetNames method. This will take any enumeration type and return a list of strings with all the values.


private  IEnumerable<string> GetNames(Type enumType)
{
if (!enumType.IsEnum)
{
throw new InvalidOperationException("Not an enum type");
}

List<string> nameList = new List<String>();
FieldInfo[] fiArray = enumType.GetFields();
foreach(FieldInfo fi in fiArray)
{
if (fi.FieldType.IsEnum)
{
nameList.Add(fi.Name);
}
}

return nameList;
}


Finally, I implemented the SelectionChanged event handler for the listbox. I basically get the appropriate enum value from the selected string and call the SetInputScope method which essentially sets the input scope for the textbox. That’s it. 


void lstScope_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
InputScopeNameValue val;

if (Enum.IsDefined(typeof(InputScopeNameValue), lstScope.SelectedItem))
{
val = (InputScopeNameValue)Enum.Parse(typeof(InputScopeNameValue), lstScope.SelectedItem.ToString(), true);
SetInputScope(val);
}
}

private void SetInputScope(InputScopeNameValue val)
{
try
{
txtInput.InputScope = new System.Windows.Input.InputScope()
{
Names = { new InputScopeName() { NameValue = val } }
};
}
catch (Exception)
{
//Don't do anything. This fails with some of the InputScopes // Bug?
}
}



Tuesday, March 23, 2010

Windows Phone 7 Book

Charles Petzold has written a Windows Phone 7 book and has posted a free preview here: http://charlespetzold.com/phone/index.html

Just thought I’d spread the word. More to come on Windows Phone 7 development. Happy Coding!

Wednesday, March 3, 2010

Creating a Vista "Flip 3D" Menu Using Custom Layout Panels

 

image

Silverlight provides several layout panels which can be used to layout almost any simple user interface. These layout panels are the Grid, Canvas and StackPanel. In more sophisticated user interfaces, however, these basic layout panels may not be enough. In this chapter, you will learn how to create a custom layout panel that organizes its children in a 3D stack. We will create a test application for this panel which will allow you to manipulate various properties of the panel in order to achieve different visual effects including one similar to what is seen in Windows Vista Ultimate “Flip 3D” feature (Alt+Tab while various applications or folders are open to see the “Flip 3D” feature in action) .

To begin, we need to create a new project Silverlight Class Library project in visual studio and name it CustomPanels. Now, add a class to the project and name it Stack3DPanel. Stack3DPanel needs to derive from Panel in order to inherit some of the properties and methods common to all layout panels. The most important of these is the ‘Children’ property which contains all the visual elements to be arranged by the panel. Next, we will add the dependency properties needed to manipulate the way the panel will layout its children.

Define Dependency Properties

Whenever creating properties on custom Silverlight classes, you should consider making those properties dependency properties. Although there are numerous reasons to create them as dependency properties, the most compelling reasons are arguably that dependency properties can support animations, styling and data binding. The dependency properties we will create for the Stack3DPanel are the DepthOffset, HorizontalOffset, VerticalOffset, SkewYAngle and Blur properties.

Before creating the dependency properties, we need to create a static event handler which will execute whenever any of the dependency properties’ values change. Whenever a dependency property value changes, we want to rearrange the children in the panel accordingly. To do so, we simply call the InvalidateArrange method available to us because we derived from the Panel class. Notice we cannot directly access the panel’s InvalidateArrange method by calling this.InvalidateArrange() because this method is a static method. However, the DependencyObject parameter contains a reference to the panel. We can therefore access it as a Stack3DPanel to get to the InvalidateArrange method.

image

The DepthOffset property specifies the depth between items within the panel. This correlates to the projected location of the item relative to the z axis. The greater the DepthOffsett, the greater the distance between objects in the panel. Consequently, the items in the panel will appear to get closer to the user as the DepthOffset increases.

image

Note, the Stack3DPanel arranges its children in a Last In First Out (LIFO) fashion. In other words, the first item inserted into the panel is placed at the bottom of the stack and all successive items will be placed on top of that. To add the DepthOffset property, we need to add a public static dependency property and a public property to access it. This pattern will be repeated for all the dependency properties we will create for this panel.

In order for the Silverlight property system to use the dependency property, we must follow the naming conventions it defines. Dependency properties themselves have unique basic names (DepthOffset). When creating the identifiers for those properties, the basic name is combined with the suffix Property (DepthOffsetProperty). When defining the property’s identifier, we register the dependency property by calling the static Register method of the DependencyProperty class. We will provide 4 parameters for this method. The first is the basic name of the property (i.e. DepthOffset). The second is the data type of that property. The third parameter identifies the type of the class registering the dependency property which in this case is Stack3DPanel. The final parameter is of type PropertyMetaData. This last parameter ultimately identifies what event handler to execute whenever the value of that dependency property changes. In this implementation, we want the same method to be executed whenever any of our dependency properties change, so instead of defining a new PropertyMetaData object within the Register method call (which is typically done), we will define a private variable of type PropertyMetaData which will point to the OnLayoutPropertyChanged event handler.

image

After we have created the property identifier, we can create the property which simply sets/gets the appropriate dependency property value from the Silverlight property system by calling get/set value for the appropriate property identifier.

public double DepthOffset

image

For the following dependency properties, we follow this same pattern; define the identifier by registering and then the property with a getter and setter for which access the registered dependency property.

The HorizontalOffset property specifies the amount of horizontal space between items within the panel.

image

First, we register the dependency property.

image

And then we define the HorizontalOffset property.

image

The VerticalOffset property specifies the amount of vertical space between items within the panel.

image

First, we register the dependency property.

image

And then we define the VerticalOffset property.

image

The SkewYAngle property specifies the angle by which all the items within the panel are skewed along the y axis to create various visual effects.

image

First, we register the dependency property.

image

And then we define the SkewYAngle property.

image

Lastly, Blur property specifies if a blur effect is applied to the items within the panel giving the illusion of loss of focus as the individual items are further away from the user.

image

Firs, we register the dependency property.

image

And then we define the Blur property.

image

Implement Overrides

Now it’s time to work on the heart of the Stack3DPanel. Whenever creating custom layout panels, the two most important methods that you must override are MeasureOverride and ArrangeOverride. We’ll start by implementing the MeasureOverride method.

image

MeasureOverride method first calls the Measure method for each child element. This call is necessary for the child element to calculate its DesiredSize property, which is later used in the ArrangeOverride method. The method then simply returns the availableSize it originally provided.

As its name suggests, the ArrangeOverride method is responsible for placing the children of the panel in their appropriate locations. In essence, this method contains all the logic which causes the panel to arrange its children in a 3D stack formation. While iterating through all its children, the ArrangeOverride method first center aligns each child element both vertically and horizontally. Second, a BlurEffect is applied to the children if the Blur property is set to true and if the current child element is not the first in the list. We do not want the first child element blurred because it appears in front of all the other elements. The appropriate visual effect is for those that are further back to appear blurred while the ones in front appear more focused. Then, the elements are placed on the panel. This is done by calling the child.Arrange method. Initially, all the children are placed in the same location. A series of projections and a transforms are then applied to the children according to their relative position to achieve the appropriate visual effect. First, a SkewTransform is applied with the AngleY set to the value in the SkewYAngle property as a RenderTransform. Finally, a PlaneProjection is applied to each child element. Where LocalOffsetZ, LocalOffsetX and LocalOffset Y are set to i*DepthOffset, i*HorizontalOffset and i*VerticalOffset respectively. At the conclusion of the method, the finalSize value passed in as a parameter is returned. This is typically done in most custom panel implementations. Note: when the panel is rendered, the last child element will appear in the front of the stack (closest to the user) and the first child element will appear in the back (furthest from the user).

image

Define Operations

One feature we will add to this custom panel is the ability to interact with it. We want to allow users to cycle through the items in the stack panel by popping the element on top off the stack and pushing it to the bottom of the stack allowing users to easily flip through the children in the panel. To do this, we must implement the Push, Pop, Cycle and CycleBack methods.

The panel we are creating is called a 3DStackPanel because it lays out its children in a 3 dimensional stack formation. The way we will implement that adding and removing of items from this panel, however, will more closely resemble that of a queue. Because we are calling it a 3DStackPanel, we will use name these operations Push and Pop as is typical of any stack. Note, in a traditional queue implementation, elements are added in the back of the queue and removed from the front. These operations are known as enqueue and dequeue respectively. In essence, we will implement an enqueue method and name it push and a dequeue method and name it pop.

We start with the simplest method to implement – Push. The Push method takes in an UIElement as an input parameter. This is the element that is to be inserted into the stack. We simply insert it in the front of the Children collection. Because of how the ArrangeOverride method was implemented, inserting the element in the front of the Children collection will make it appear in the back of the stack once it is rendered to the screen.

image

The Pop operation will simply remove the last child element (which is rendered at the front of the stack) from the stack and returns it. We need to check for an empty Children collection. If there are no children, the method simply returns null;

image

Now that Push and Pop have been implemented, we can add two other methods that combine these operations to allow us to flip through the stack. The cycle method will take the element appearing in the front and place it in the back. This is done by calling the Pop method and then the Push method with that same element. After we have rearranged the Children collection by calling the Push and Pop methods, we call the InvalidateArrange method to rearrange the elements on the screen.

image

The CycleBack method will do the opposite of the Cycle method. It removes the first element in the Children collection, which appears in the back of the stack, and sets it as the last in the Children collection, which in turn places it in the front of the stack when rendered. Again, once the Children are rearranged, we call InvalidateArrange to arrange the elements on the screen.

image

The last piece of functionality we will add is mousewheel interactivity. We will allow users to cycle back and forth through the elements in the panel by scrolling back and forth on the mouse wheel. To do this, we need to add a MouseWheel event handler. We then simply call the Cycle and CycleBack methods inside the event handler depending on which way the mouse wheel is rolled.

image

We have now finished implementing our custom Stack3DPanel. Now, let’s create a sample application to use this panel to arrange images in the 3D stack.

Create Sample Application

Add a new Silverlight Application project to the Visual Studio Solution and name it PictureStack. This will add two projects to the solution, the silverlight project (PictureStack) and a web project (PictureStack.Web). Paste the following XAML into MainPage.xaml located in the silverlight project to layout the user interface. In this user interface, we are placing an instance of the Stack3DPanel and using data binding to manipulate all the dependency properties we defined for it.

image

image

Now add the following code to MainPage.xaml.cs to implement the application logic. All we are doing is calling the Cycle method when the cycle button is clicked and using an OpenFileDialog to add images to the Stack3DPanel.

image

Now, run the application and experiment by changing the values of the slider to come up with different visual effects. I encourage you to also experiment with this new panel by placing images and other user interface elements such as buttons, textboxes, and other layout panels to create more sophisticated user interfaces. An interesting use of this custom panel would be to use to layout various screens of an application wizard.

Thursday, February 11, 2010

How to properly create image Thumbnails in Silverlight

 

Here is a link to a blog post I found very helpful. It shows how to properly create image thumbnails using the BitmapImage class without running out of memory. I am mainly posting this to keep a reference of it. Check it out. It’s a very common problem. I have run into it multiple times.

http://www.wintellect.com/CS/blogs/jprosise/archive/2009/12/17/silverlight-s-big-image-problem-and-what-you-can-do-about-it.aspx

Silverlight 4 – New Features

 

As a Silverlight developer, I have mixed emotions when I find out there is a new version of Silverlight just around the corner. On one hand, I love playing with the new bits and seeing how the new features will make my life easier, but on the other hand, it also means I have a lot of work to do in order to update my current applications in order to take advantage of some of those new features. Well, Silverlight 4 is just around the corner. I have played around with the bits a little and have read my blog posts and articles on the new features. Some of the more exciting ones are:

String Formatting: This is a small thing, but it saves so much time! By using this new feature, I can get rid of about half of the value converters I am currently using.

Notification API - “Toast” feature seen in Windows.

Hosting HTML content – I haven’t played with this one yet, but this feature will help me get rid of several “hacks” in my code… Overlaying html on a Silverlight application can be a pain… especially if you want that html content to scroll. One MAJOR problem with this feature… it is only supported in out of browser mode. Note to Silverlight Team: “Please make this available in the browser!”

Webcam and microphone support… Yes!

ICommand support in Buttons

ViewBox Control – I use this control a lot in WPF when working with images. It’s great that it’s finally made it to Silverlight.

Printing

Drag-and-Drop Support

Right Click and Mouse Wheel Support

Clipboard Support

Here are just a few links that talk about some of the new sl 4 features.

http://timheuer.com/blog/archive/2009/11/18/whats-new-in-silverlight-4-complete-guide-new-features.aspx#webcam

http://wildermuth.com/2010/01/21/New_SL4_Feature_Commanding

http://wildermuth.com/2009/11/27/Silverlight_4_s_Printing_Support

http://wildermuth.com/2009/11/23/Taking_a_WebCam_Photo_with_Silverlight

http://wildermuth.com/2009/11/18/Data_Binding_Changes_in_Silverlight_4

http://timheuer.com/blog/archive/2009/11/22/silverlight-4-notification-window-queue-sample.aspx?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+timheuer+%28Method+%7E+of+%7E+failed+by+Tim+Heuer%29

http://www.wintellect.com/CS/blogs/jprosise/archive/2010/01/09/silverlight-4-s-new-notification-windows.aspx

http://www.wintellect.com/CS/blogs/jprosise/archive/2010/01/04/silverlight-4-s-new-managed-extensibility-framework.aspx

http://www.wintellect.com/CS/blogs/jprosise/archive/2009/12/22/silverlight-4-s-new-html-hosting-support.aspx

http://www.wintellect.com/CS/blogs/jprosise/archive/2009/12/01/silverlight-4-s-new-command-support.aspx

http://www.wintellect.com/CS/blogs/jprosise/archive/2009/11/26/silverlight-4-s-new-drag-and-drop-support.aspx

http://www.wintellect.com/CS/blogs/jprosise/archive/2009/11/25/silverlight-4-s-new-clipboard-support.aspx

http://www.silverlight.net/learn/videos/silverlight-4-beta-videos/datagrid-enhancements/

Wednesday, January 20, 2010

Balsamiq Mockups - Great Wireframe tool

I started playing with Microsoft’s  prototyping tool, and I must say… it’s cool, it’s powerful, but it’s also complicated! I’ve only spent a couple of hours working on it, so I’m sure (just like Expression Blend) if I played with it for a while longer, I would grow to love it. The time constraints I’m currently under do not allow me to spend days trying to learn this new tool. After trying a few other tools, I ran across Balsamiq Mockups. This tool is an extremely easy tool to use and it is relatively cheap. There is also a free version that will meet the needs of most users.

After downloading the tool, I had created several useful wireframes in a matter of minutes. Here are just a few of the sample mockups created with this tool that are displayed on their website:

image

image

If you are a user interface designer, I would highly encourage you to give the free version of this tool a try. It may not be as powerful as Sketchflow, but it’s got all the essentials I was looking for and some of the perks I don’t necessarily need but like.