hmaprk's GUI Blog

How to be a Computer Expert!

2012-01-18T12:46:00.001-08:00

This one is all over the web. Just thought I’d post it here in case you haven’t see it. It sums it up pretty well.

BuzzNet Tags: computer expert,flow chart

How to Change the Font Size of a WPF Tab Control’s Header

2012-01-11T12:13:00.001-08:00

To change the font size of the tab header of a wpf tab control you have to redefine the ItemTemplate property of the Tab Control.

This is a question I have heard a lot, so I decided to blog about it for those of you needing to do the same thing. Here is a code sample.

<TextBlock Text=”{Binding}” FontSize=”20”/>

</DataTemplate>

That’s all there is to it.

Happy Coding!

43 Things Tags: wpf,tabControl,tab,tab header,datatemplate,tabControl itemtemplate,wpf tab header,tab control header

Reboot from the Command Line

2011-12-14T09:27:00.001-08:00

I often use a remote desktop connection to work on my desktop from my laptop. This is very handy, but there are some limitations. One such limitation is the lack of ability to reboot the machine you are remoting into. The option is not available within the start menu when you are remoting. There are some instances, though, when you really need to reboot. If you find yourself in this situation, you can reboot via the command line. Here is the command to do it.

shutdown /r /t 01

Happy Remoting!

43 Things Tags: command line,msdos,cmd,remote,remoting,remote desktop connection,desktop sharing,shutdown,reboot,MSDOS,DOS

How to Create a Simple Splash Screen in WPF

2011-11-28T13:48:00.001-08:00

I have posted on this topic before, but I thought I would re-post with a step by step tutorial for those who are very new to wpf. Sorry to those of you who are more veterans. I will post more advanced topics soon, but this one’s for the newbies.

Here goes…

WPF makes creating a splash screen fairly simple. All you need to do is embed an image file into your project and change the Build Action on it.

Here is a step-by-step tutorial on how to do this.

Step 1) Create your application.
Here is the xaml for my very complicated application:

Step 2) Add an image file to your application. PNG files with transparent backgrounds are supported and are often a good choice for splash screens. Here is the image I created in Photoshop… nice huh?

Step 3) Right click on the image file in the solution explorer and click on Properties

Step 4) Set the Build Action to SplashScreen in the Properties panel

Step 5) Build and run the application.

You should now see your image splash before the application is loaded. I managed to get a screenshot as the splash screen was fading out and my application was starting to fade in.

That’s all there is to it. It is very simple. There are other ways to show and hide your splashcreen in code, but I won’t get into that in this post. I just wanted to keep it simple for those of you new to SplashScreens in wpf. Happy Splash Screening!

del.icio.us Tags: wpf,splashscreen,splash screen,image,xaml,resource

Wpf and the invisible checkbox (and radio button)

2011-10-07T09:04:00.001-07:00

Just ran into another strange wpf bug. This one involves checkboxes and radiobuttons. I was working on a login screen that has a couple of checkboxes for remembering the username and password. The code looked like this…

These checboxes were on a dark colored panel, so the white text showed up nicely. Running the app on my Windows 7 box worked fine, but when I ran the app on a Windows XP box, you could not see the check mark inside the box when the user clicked on it. The control still worked, but the check was just invisible. Actually, it wasn’t invisible, it was just a white checkmark on a white box (aka… invisible). This is a wpf/windows xp/checkbox bug. In Windows XP, when the foreground color is changed, the checkmark picks up that color change… why? you ask?… I don’t know. But, here is a workaround for this situation. Simply put labels with the white foreground as the content for your checkboxes. Now the foreground color of the checkbox is still the default (black) color and the checkmark will be visible for those running the app in Windows XP. Here is the modified code.

<StackPanel HorizontalAlignment="Left"  Orientation="Horizontal">
     <CheckBox>
          <Label Content="Username" Foreground="White"/>
     </CheckBox>
     <CheckBox>
          <Label Content="Password" Foreground="White"/> 
     </CheckBox>   
</StackPanel>

I have also seen this issue with radiobuttons. Use the same workaround for that and you should be good to go.

I hope this helps. If it does, feel free to leave a comment. Thanks!

43 Things Tags: wpf,windows xp,radiobutton,checkbox,wpf checkbox bug,wpf windows xp checkbox bug,wpf radiobutton bug,invisible checkbox,invisible radiobutton

Launching the Default Email Client

2011-08-05T08:11:00.001-07:00

I was asked to write some code to send an email through the default email client and I was pleasantly surprised as to how easy it was to do. I had never done this before, so it was a learning experience for me, so I thought I’d share it with all of you.

string toEmail = "from@email.com";
string subject = "Test Subject";
string body = "test email message text";
string message =
string.Format("mailto:{0}?subject={1}&body={2}",toEmail, subject, body);
Process.Start(message);

So that should do it. It’s pretty simple. When you run this code, you should see the default email client launch with the appropriate fields filled in.

Cheers!

43 Things Tags: c#,email,email client,send mail,send mail in code

First WP7 App

2011-06-20T11:54:00.000-07:00

Hey everyone. I decided to try some Windows Phone 7 development to see how easy or hard it is. So far, I have found it to be pretty easy since I’m a WPF and Silverlight developer. If you are a .Net developer and are interested in mobile development, I would highly encourage you to give WP7 development a try.

Here is a very simple application I wrote just to get my feet wet with WP7 development. It’s available as a free download in the marketplace, so if you have a Windows Phone 7 device, give it a shot and let me know what you think. Again, it is an extremely simple application, but if you are a baseball fan, it should be useful.

Let me know what you think.

Thanks!

del.icio.us Tags: windows phone 7,wp7,baseball,mobile,cell,ui,pitch counter,app,mobile app,application

WPF Selected Treeview Item Background

2011-06-20T11:37:00.001-07:00

This one took me a while to figure out, so I thought I’d share it with everyone. If you have a treeview item and don’t want the selected item to be that ugly blue color, you can easily change it.

All you need to do is add this line of code into your Treeview. In this particular example, I didn’t want the selected item to be colored at all, so I set the color to Transparent, but you can enter other colors here to suit your app’s needs.

Hope this helps. Happy coding!

                    <TreeView.Resources>
                        <SolidColorBrush Color="Transparent" x:Key="{x:Static SystemColors.HighlightBrushKey}"/>
                    </TreeView.Resources>

del.icio.us Tags: wpf,treeview item,treeeview,treeview item style,background,selected item background,ui

Great DateTime SringFormat Link

2011-03-25T12:49:00.000-07:00

Just wanted to pass along a great link that has helped me out in the past
http://www.dotnetperls.com/datetime-format

How to Properly Sort on a WPF DataGrid Column in Code

2011-02-02T10:31:00.001-08:00

There are a lot of blog posts and articles out there on how to apply a sort to a datagrid in code, but there are very few out there that show you how to do it properly. Most of the posts I ran into show you how to apply the sort, but the column header does not update properly. The items are sorted, but the sort indicator (tiny triangle on the header)

Does not appear. This can be really confusing especially if you have already sorted by another column by clicking on the column header. This makes the sort indicator appear on that column, but if you sort by a different one in the code behind, the sort indicator still shows that the grid is sorted by the first column (Thanks WPF DataGrid! Nice one!)

Well, there is a way to get it working properly. Here it is.

        private void applySortDescriptions(DataGridColumn col, ListSortDirection listSortDirection)
        {
            //Clear current sort descriptions
            MyDataGrid.Items.SortDescriptions.Clear();

//Get property name to apply sort based on desired column
string propertyName = getSortPropertyName(col);

            //Add the new sort description
            MyDataGrid.Items.SortDescriptions.Add(new SortDescription(propertyName, listSortDirection));

            //apply sort
            applySortDirection(col, listSortDirection);

            //refresh items to display sort
            MyDataGrid.Items.Refresh();
        }

        private string getSortPropertyName(DataGridColumn col)
        {
            //place logic in here that will return the name of the property to sort by (ex: return “name”; if you are sorting by the name property)

return string.Empty;
}

        private void applySortDirection(DataGridColumn col, ListSortDirection listSortDirection)
        {
            foreach (DataGridColumn c in PatientsViewDatGrid.Columns)
            {
                c.SortDirection = null;
            }
            col.SortDirection = listSortDirection;
        }

That should do it. Now you can sort and the column headers will show the sort indicator appropriately.

How to Create a Splash Screen for a WPF App

2011-01-03T08:26:00.001-08:00

Creating a Splash Screen for a WPF application is extremely simple. Simply add your image into your project and set the build action to SplashScreen.

That’s pretty much all it takes. When you start up your application, you will see your splash screen image appear while the application is initializing.

You can also add a a new item to your project and select SplashScreen from the available templates

This will add a default image which you can then swap for your own, custom splash screen.

Yet another approach would just be to use the Splash Screen APIs. You can create a new SplashScreen object and call it’s Show method to display it and it’s Close method to, you guessed it, close it.

Happy Coding!

del.icio.us Tags: wpf,splash screen,wpf splash screen,xaml,image

WPF VisualStateManager GotoState Bug

2010-12-15T12:42:00.001-08:00

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!

IceRocket Tags: wpf,wpf visual state manager bug,vsm,gotostate,visualstatemanager.gotostate,microsoft

WPF - Accessing Resource Dictionaries in Separate Assemblies

2010-12-15T07:53:00.001-08:00

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.

BuzzNet Tags: wpf,windows presentation foundation,wpf pack uri scheme,pack uri syntax,resource dictionaries

Silverlight: Blank Line in TextBlock

2010-08-13T08:05:00.001-07:00

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:

So, the following xaml

produces this text block

IceRocket Tags: Microsoft Silvelright,Textblox,blank line,special characters

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

2010-07-13T07:40:00.001-07:00

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!

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

BuzzNet Tags: Microsoft,Bing,Silverlight vs Flash,Adobe Flash,Bing and Flash,Microsoft and Flash,Bing Vidoes,Video

Get Local Time Zone

2010-07-02T07:28:00.001-07:00

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.

Technorati Tags: silverlight,silverlight TimeZoneInfo,c# local time zone,c# TimeZoneInfo,TimeZoneInfo.Local.StandardName,TimeZoneInfo.Local

Snippet Designer

2010-06-17T08:07:00.001-07:00

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.

Enjoy!

43 Things Tags: visual studio 2010,visual studio,microsoft,code snippets,snippets,code snippet manager,snippet designer,codeplex

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

2010-05-11T11:19:00.001-07:00

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!

Technorati Tags: Silverlight Datagrid,Silverlight Bug,Microsoft,Microsoft Silverlight,Layout Cycle Detected

Are You Annoyed With The Visual Studio XAML Design View?

2010-04-28T08:56:00.001-07:00

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.

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

del.icio.us Tags: Visual Studio,Visual Studio 2010,XAML Designer,XAML Editor,VS Disable Design View,VS 2010,WPF,Silverlight

Silverlight 4 Just Released – Books to Help You Out

2010-04-15T11:14:00.001-07:00

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.

BuzzNet Tags: Silverlight,Silverlight4,Books,Reference,Microsoft Silverlight,Windows Phone 7,Windows Phone 7 Series,XAML,C#,Developer

How to use Isolated Storage on Windows Phone 7

2010-03-26T13:53:00.001-07:00

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);
            }             
        }
    }
}

del.icio.us Tags: Windows Phone 7,WindowsPhone7,WindowsPhone,Windows Phone,Isolated Storage,Windows Phone Isolated Storage,Silverlight,Silverlight Isolated Storage,Data,mobile

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

2010-03-25T11:25:00.001-07:00

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.

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:

The result:

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

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.

del.icio.us Tags: Windows Phone 7,WindowsPhone7,Winodows Phone 7 Application Bar,Windows Phone Application Bar,Silverlight

Windows Phone 7 Development: Using InputScopes

2010-03-24T11:29:00.001-07:00

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

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

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.

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?
     }            
}

BuzzNet Tags: WindowsPhone7,WindowsPhone,Windows Phone,Windows Phone Emulator,Silverlight,InputScope,Keyboard,Microsoft Silverlight

Windows Phone 7 Book

2010-03-23T09:38:00.001-07:00

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!

BuzzNet Tags: Windows Phone 7,Windows Phone,Mobile,Charles Petzold,Silverlight,book,download

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

2010-03-03T12:51:00.001-08:00

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.

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.

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.

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

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.

First, we register the dependency property.

And then we define the HorizontalOffset property.

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

First, we register the dependency property.

And then we define the VerticalOffset property.

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.

First, we register the dependency property.

And then we define the SkewYAngle property.

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.

Firs, we register the dependency property.

And then we define the Blur property.

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.

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).

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.

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;

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.

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.

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.

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.

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.

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.

BuzzNet Tags: flip3d,silverlight,image,stackpanel,imagestack,custom panel,panel