Eclipsed4utoo's Blog» Silverlight

WP7 – Using IsolatedStorageSettings

Ryan Alford — Sun, 14 Aug 2011 23:00:07 +0000

In a previous tutorial, I wrote about using the Isolated Storage to store files on a WP7 device. Let’s say that instead of storing data, you wanted to store settings for your application. This where the IsolatedStorageSettings comes in.

The IsolatedStorageSettings is a place to store Key/Value pairs of data.

So let’s say that my application used the Microsoft Ad control, but I wanted to be nice and give the user the ability to turn the ads on and off.

On my Settings screen, I would have a checkbox(AdsCheckbox) for allowing the ads. In code, I would save the value by doing this…

var settings = IsolatedStorageSettings.ApplicationSettings;

if (settings.Contains("AllowAds"))
    settings["AllowAds"] = AdsCheckbox.IsChecked.Value;
else
    settings.Add("AllowAds", AdsCheckbox.IsChecked.Value);

settings.Save();

If you will notice, the ApplicationSettings object does have a method that allows you to check to see if the key already exists in the Settings. An exception will be thrown if you try to add a key that already exists, so it’s necessary to do this check before assigning a value.

Also, as you can see, it’s very easy to get the value out of the settings…

// when the form opens, I want to set the Checkbox to being checked
//   or unchecked depending on the setting
var settings = IsolatedStorageSettings.ApplicationSettings;

if (settings.Contains("AllowAds"))
    AdsCheckbox.IsChecked = bool.Parse(settings["AllowAds"].ToString());

However, the IsolatedStorageSettings class isn’t only for simply datatypes. It can also store your custom class objects.

Employee class

public class Employee
{
    public string FullName { get; set; }
    public decimal Salary { get; set; }
}

Then on my form, I have a button to save an instance of the Employee class to the IsolatedStorageSettings…

private void btnSave_Click(object sender, RoutedEventArgs e)
{
    var settings = IsolatedStorageSettings.ApplicationSettings;

    Employee emp = new Employee()
    {
        FullName = "John Doe",
        Salary = 250000
    };

    settings.Add("Employee1", emp);
    settings.Save();
}

I also have a button that will load the object from the IsolatedStorageSettings…

private void btnLoad_Click(object sender, RoutedEventArgs e)
{
    var settings = IsolatedStorageSettings.ApplicationSettings;

    Employee emp;

    if (settings.TryGetValue("Employee1", out emp))
    {
         MessageBox.Show(string.Format("Full Name: {0}\nSalary: {1:c}", emp.FullName, emp.Salary));
    }
}

Notice that the IsolatedStorageSettings.ApplicationSettings class also has the TryGetValue method. This method behaves exactly like the TryParse methods of the .Net datatypes. It will return a boolean specifying whether the key was found and whether the conversion from object –> Employee was successful. If it’s successful, it will return the instance as the out parameter.

After running the application, clicking the Save button, then clicking the Load button, we will get this message box…

WP7 – Working With Isolated Storage

Ryan Alford — Thu, 11 Aug 2011 23:00:28 +0000

In this tutorial, I will demonstrate how to work with Isolated Storage in Windows Phone 7. This is going to be a very simple tutorial where we create a text file and write data to it. We will then read that data and append more data to it.

So first, we need to add these using statements to the top of the code(if they aren’t already there):

using System.IO;
using System.IO.IsolatedStorage;
using System.Windows;

Next we will have our form. Very basic. It has two Textboxes and a Button. The first TextBox will allow the user to type in some text. The Button will save the data to IsolatedStorage, then read the data from the file and put it into the second TextBox.

Here is the XAML:

So now we move to the code. We need to create an IsolatedStorageFile object:

using (var isoStorage = IsolatedStorageFile.GetUserStoreForApplication())
{

}

Since we will always be appending to the file, we need to check to make sure the file exists. If it doesn’t exist, we need to create it.

// we need to check to see if the file exists
if (!isoStorage.FileExists(fileName))
{
    // file doesn't exist...time to create it.
    isoStorage.CreateFile(fileName);
}

Once we have done the FileExists check, we can now open the file. Once the file has been opened, we can now use the StreamWriter class to write to it.

// since we are appending to the file, we must use FileMode.Append
using (var isoStream = new IsolatedStorageFileStream(fileName, FileMode.Append, isoStorage))
{
    // opens the file and writes to it.
    using (var fileStream = new StreamWriter(isoStream))
    {
        fileStream.WriteLine(txtText.Text);
    }
}

Note: notice that we opened the file using FileMode.Append. Because we used this mode, we can’t read from the file, we can only write to it.

So to read from the file, we will need to open the file again, this time using FileMode.Open. We are going to do this in another using block. Once the file is opened, we use the StreamReader class to read it.

// you cannot read from a stream that you opened in FileMode.Append.  Therefore, we need
//   to close the IsolatedStorageFileStream then open it again in a different FileMode.  Since we
//   we are simply reading the file, we use FileMode.Open
using (var isoStream = new IsolatedStorageFileStream(fileName, FileMode.Open, isoStorage))
{
    // opens the file and reads it.
    using (var fileStream = new StreamReader(isoStream))
    {
        txtCurrentText.Text = fileStream.ReadToEnd();
    }
}

And that’s it. If you run the application, type in the first textbox, hit Save, the data will show up in the bottom textbox. Do it again, and you will see that it has appended to the file.

As you can see, writing to Isolated Storage is really easy.

Here is the entire code for the form…

using System.IO;
using System.IO.IsolatedStorage;
using System.Windows;
using Microsoft.Phone.Controls;

namespace WP7IsoStorageDemo
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void btnSave_Click(object sender, RoutedEventArgs e)
        {
            string fileName = "MyTextfile.txt";

            using (var isoStorage = IsolatedStorageFile.GetUserStoreForApplication())
            {
                // we need to check to see if the file exists
                if (!isoStorage.FileExists(fileName))
                {
                    // file doesn't exist...time to create it.
                    isoStorage.CreateFile(fileName);
                }

                // since we are appending to the file, we must use FileMode.Append
                using (var isoStream = new IsolatedStorageFileStream(fileName, FileMode.Append, isoStorage))
                {
                    // opens the file and writes to it.
                    using (var fileStream = new StreamWriter(isoStream))
                    {
                        fileStream.WriteLine(txtText.Text);
                    }
                }

                // you cannot read from a stream that you opened in FileMode.Append.  Therefore, we need
                //   to close the IsolatedStorageFileStream then open it again in a different FileMode.  Since we
                //   we are simply reading the file, we use FileMode.Open
                using (var isoStream = new IsolatedStorageFileStream(fileName, FileMode.Open, isoStorage))
                {
                    // opens the file and reads it.
                    using (var fileStream = new StreamReader(isoStream))
                    {
                        txtCurrentText.Text = fileStream.ReadToEnd();
                    }
                }
            }
        }
    }
}

Silverlight 4 – Toolkit and Theming

Ryan Alford — Mon, 27 Dec 2010 22:00:46 +0000

I recently wanted to add a theme from the Silverlight 4 Toolkit, and ran into this runtime error…

XamlParseException: Failed to create a ‘System.Type’ from the text ‘input:AutoCompleteBox’.

I was perplexed as I didn’t have an AutoCompleteBox in my project. It turns out that when you drag a theme from the Toolbox onto the designer, VS2010 doesn’t automatically add all of the references needed(it will add 2). If you drag a theme from the Toolbox into XAML, VS2010 won’t add ANY references.

It also seems that because themes encompass a majority of controls, there must be a reference for those controls in the project. After much trial and error, here are the 8 references that will be needed when using a theme from the toolkit:

If I removed any of these references, the application would throw a runtime exception similar to the screenshot above.

The “BureauBlack” reference will change depending on the theme that you choose to use in your application. There is a reference for every theme in the toolkit.

Hope this help out anybody who runs across this problem.

Silverlight 4 – Productivity Power Tools and EF4

Ryan Alford — Wed, 22 Dec 2010 22:00:21 +0000

Recently, I wanted to do a project in Silverlight 4 using EF4(Entity Framework 4). When I went to add the ADO.Net Entity Data Model class, I received this error message:

The project’s target framework does not contain Entity Framework runtime assemblies. Please review the target framework information in the project’s property page.

I checked my .Net framework version, and it was .Net 4.0. So I went searching on Google and found this thread on MSDN. It seems that there is a problem with VS2010/Productivity Power Tools when using EF4.

If you run across this problem, here are the steps for you to take:

1. Change the target framework to .Net 3.5.
2. Rebuild the project.
3. Change the target framework back to .Net 4.0.
4. Rebuild the project.

You should now be able to add the EF4 model class to your project.

Another option would be to disable the Productivity Power Tools extension, but if you are like me, the extension is a great extension and I wanted to keep it.

Hope this helps out anybody in the future.

Silverlight 4 – Copy/Paste From Clipboard

Ryan Alford — Thu, 04 Nov 2010 23:00:20 +0000

In this tutorial, I will show how you can use Silverlight 4 to get access to the client clipboard. Silverlight 3 had limited clipboard access, but Microsoft implemented more complete access to the clipboard.

For security purposes, access to the clipboard is only allowed through a user-initialed event. For example, you couldn’t have a timer running in the background to constantly get text from the clipboard.

For first, let’s create a Silverlight 4 application and name it SL4ClipboardAccess. Then Click OK on the next popup.

I added some controls to the page..

Which look like this…

Now, the Click Event for the CopyToClipboard Button would look like this…

private void CopyToClipboardButton_Click(object sender, RoutedEventArgs e)
{
    string textToCopy = CopyTextTextBox.Text;

    try
    {
         Clipboard.SetText(textToCopy);
    }
    catch (SecurityException se)
    {
        MessageBox.Show(se.Message);
    }
}

and the Click Event for the PasteToTextBox Button would be this..

private void PasteToTextBoxButton_Click(object sender, RoutedEventArgs e)
{
    string textFromClipboard = string.Empty;

    try
    {
         textFromClipboard = Clipboard.GetText();
    }
    catch (SecurityException se)
    {
         MessageBox.Show(se.Message);
    }

    PasteTextTextBox.Text = textFromClipboard;
}

Now run the application and type into the Text To Copy textbox. When you click the Copy To Clipboard button, you will be prompted for permission for access to the clipboard.

After allowing access, click the Paste To TextBox button, and the text will now be in the other textbox.

Very simple tutorial for a very powerful feature.

Silverlight 4 – Sample Data with Blend 4

Ryan Alford — Mon, 01 Nov 2010 23:00:45 +0000

In a previous tutorial, I showed how to do a custom Item Template for a ListBox. However, one of the painstaking parts of that was having to create the class and the code to populate the ListBox with actual data. Also, even though I was populating the ListBox, I still simply saw blank controls during design-time.

This is where Sample Data comes in. Not only can you quickly create sample data for a control, you can drag and drop it onto the control, and the ItemTemplate will be created for you(which you can still edit). And the biggest plus to using Sample Data?….the data can be view at DESIGN-TIME.

So first, let’s create a Silverlight project in Blend. I named mine SampleDataProject.

Next, we will put a ListBox on our page, and give it a Height of 200 and a Width of 250.

Now that we have the ListBox on the page, we can create our Sample Data. Click on the Data window, then on the “Create sample data” button, then choose “New Sample Data…”…

We are going to name it PersonDataSource.

A couple of things to note on this screen. You will see two radio buttons: Project, and This document. If you choose Project, it will make the sample data available to any control in the project. If you choose This document, then the sample data will only be available to this page.

You will also see a checkbox on this screen saying “Enable sample data when application is running”. This allows you to use the sample data in design time, but use another data source during runtime. Uncheck this box if you want to use a different data source at runtime. Since we want our sample data for design time and runtime, we will leave it checked.

After creating the sample data, the Data window will now show our data in a treeview type layout. By default, it will add two properties for us.

Let’s change the first property by double clicking it and giving it the name FullName.

Let’s change the second property to Age. By default, this property is set to a boolean type. Since our age is not a boolean value, we need to change that to a numeric format. Click on the “Change property type” button on the far right of the property line. You will see a dropdown with different types. Choose “Number”. We will leave it’s length at 2.

Now that we have the properties setup, we need to add some actual data. Click on the “Edit sample values” button…

You will now see a window with a number of rows and data. At the bottom, you can determine how many rows you want to show. We are going to change this to 3. We are going to add some data to those rows, then click OK.

Now that we have our sample data setup, let’s simply drag and drop the “Collection” from the Data window onto the ListBox. The ListBox will create it’s own ItemTemplate to display the data.

That’s all you have to do. As you can see, we now have data in our ListBox while designing it…

You can look at my other tutorial on how to edit the created ItemTemplate to show the data different ways.

To me, this is one of the best features of Blend. Being able to see how a collection control will look at design time will speed up the development process. No longer will you have to continuously run the application to see if you have the layout correct.

Silverlight – Custom ListBox Item Template

Ryan Alford — Mon, 25 Oct 2010 22:30:40 +0000

In this tutorial, I will show how to create a custom ListBox Item Template.

For anybody who has tried doing a custom Item Template in WinForms, you would know that it is not fun. You have to override Draw/Paint events, and other jazz to get a ListBox to show how you want it to. However, in Silverlight/WPF, this process is so much easier.

I will be using Blend 4 in my example, as Blend makes the process even more easier.

So first we are going to create a Silverlight project. I will name it CustomListBoxItemTemplate.

Next, we are going to add a ListBox to our page. I made mine with a Height of 250, and a Width of 300, and gave it the name lstPeople.

Before we get to styling the ListBox, we need to create some test data to load into our ListBox. I created a simply Person class.

public class Person
{
    // Insert code required on object creation below this point.
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }
    public string FullName { get { return FirstName + " " + LastName; } }

    public Person(string _fName, string _lName, int _age)
    {
        FirstName = _fName;
        LastName = _lName;
        Age = _age;
    }
}

And add it to the ListBox…

public partial class MainPage : UserControl
{
	public MainPage()
	{
	     // Required to initialize variables
	     InitializeComponent();

             ObservableCollection peopleList = new ObservableCollection();
             peopleList.Add(new Person("John", "Doe", 32));
             peopleList.Add(new Person("Jane", "Doe", 20));
             peopleList.Add(new Person("Betty", "Sue", 65));

             lstPeople.ItemsSource = peopleList;
	}
}

So now, our ListBox looks like this…

Let’s say that we want to display the age below the Full Name. We can use Blend to edit the Item Template of the ListBox.

In the Objects And Timeline window, right-click on the ListBox –> Edit Additional Templates –> Edit Generated Items(ItemTemplate) –> Create Empty. You could also use the “Edit A Copy” if it’s available.

We will name it MyListBoxItemTemplate.

If you switch over to the XAML view, you will see that the ItemTemplate of the ListBox has now been binded to a Static Resource. Right above the LayoutRoot in the UserControl.Resources, you should a DataTemplate.

You will now see a small Grid on the screen. We will expand the grid to a Height of 55 and a Width of 225. Inside the grid, we are going to add 4 TextBlocks. Two will be for display purposes and the other two will show our information. Notice I am also Binding the FullName and Age properties to the Text property of the TextBlock.

And that’s all we need to do. To get out of the ItemTemplate editing, click on the ListBox at the top…

Now run the application, and your ListBox will now look like this…

As you can see, using Blend in a Silverlight or WPF application, you can customize a ListBox in only a few minutes.

x:Name=”lstPeople”

ItemsSource=”{Binding}”

DisplayMemberPath=”FullName”

Margin=”145,92,195,138″/>

Silverlight 4 – Using The Visual State Manager And Behaviors

Ryan Alford — Sun, 12 Sep 2010 14:57:26 +0000

In this tutorial, I am going to use the Visual State Manager and Behaviors to do animations. I will be using Blend 4 to do this tutorial. Blend will make this much easier to do rather than writing the XAML by hand.

The Visual State Manager allows you to create “states” of objects and then move to those states. Moving to those states can be done through code(just one line of code), or by using behaviors.

NOTE: The VisualStateManager was added in Silverlight 2. However, it wasn’t included in WPF until .Net 4. To use the VisualStateManager in WPF in .Net 3.5 SP1, you will need to download the WPF Toolkit from CodePlex.

So first, we will create a new project in Blend. We will just create a Silverlight 4 application without the website. We will name the project VisualStateExample.

We will now draw a Rectangle on our page, and give it a Fill of Blue.

Next, we are going to go to the States tab.

This is where we will create all of our states.

So first, we need to create a State Group. Click the Add State Group button, name it MyStateGroup, then give it a default transition time of 0.4s.

Now that we have our State Group, we need to create our individual states. Let’s say that we want the rectangle to change colors when the mouse hovers over it. When the mouse moves away, we want it to change back to it’s original color. Also, let’s change the color when the left mouse button is held down on the rectangle(Mouse Down), then change back when the left mouse button is released(Mouse Up).

So let’s create our first state. Our first state will be our current, default state. Click the Add State button, then name it MouseOutState.

If you notice, now there is a red rectangle around the designer. This means that you are currently in recording mode for the state. ANY changes that are made in the designer will be recorded for that state. Clicking on the Base state will stop recording.

Since this is our default state, we don’t need to record anything.

Now, create another state named MouseOverState. While still in recording mode, select the Rectangle from the Objects and Timeline tab, and change it’s Fill color to Orange. Click on the Base state to stop recording.

Now, create another state named MouseDownState. While still in recording mode, change it’s Fill color to Green.

Now, we need to create our last state. Create a new state and name it MouseUpState. While still in recording mode, change the Fill color to the Orange from the MouseOverState.

We should now have 4 states. Now we need to go to these states with the mouse events. There are a couple of ways of doing this, but I will use behaviors to do it.

There are a number of behaviors in Blend, and we are going to use the GoToStateAction behavior.

Go to the Assets tab, then click on behaviors, then click on the GoToStateAction.

Now drag that action onto the Rectange in the designer. You will now see that the GoToStateAction has been added to the Rectangle in the Objects and Timeline tab.

With the GoToStateAction selected, go to the Properties tab, set the EventName to MouseEnter, and set StateName to MouseOverState.

Do these steps to create a GoToStateAction for the other three states that we have. When you have completed, you will have four actions for the Rectangle.

You have now finished the animations. Run the application using F5, and move the mouse over the rectangle. Perform the other mouse actions to see the other animations.

This is just another way the Expression Blend makes animations so easy. I have created animations without writing one line of code. To me, that’s pretty amazing and can make application development much quicker and have less bugs.

WP7 – Context Menu From Listbox

Ryan Alford — Thu, 26 Aug 2010 11:58:40 +0000

In writing one of my Windows Phone 7 applications, I needed to do a allow the user to delete an entry from a ListBox. Since my ListBox didn’t have enough room for an actual delete button, I decided I would use a ContextMenu to do it. To my surprise, even though the OS seems to support a long press action(the way to uninstall an application), that action doesn’t seem to be available to developers(or not that I could find). So I decided to roll my own using the [b]MouseLeftButtonDown [/b]and [b]MouseLeftButtonUp [/b]events, and a [b]DispatcherTimer[/b]. Add these two using statements to the top of the code…

 using System.Collections.ObjectModel; using System.Windows.Threading;

So first, we need our initial code to get the [b]ListBox [/b]populated. I created a [b]Person [/b]class just for simplistic reasons.

 public class Person {     public string FirstName { get; set; }     public string LastName { get; set; } }

Next, I will set up the [b]ListBox [/b]to simply show the [b]FirstName [/b]of the [b]Person[/b].

Now I will create an generic [b]ObservableCollection [/b]object to store the [b]Person [/b]objects. This will be a class level variable since it will be accessed from multiple events.

 public partial class MainPage : PhoneApplicationPage {     ObservableCollection personList = new ObservableCollection();      // Constructor     public MainPage()     {         InitializeComponent();          this.Loaded += new RoutedEventHandler(MainPage_Loaded);     }      void MainPage_Loaded(object sender, RoutedEventArgs e)     {         personList.Add(new Person() { FirstName = "John", LastName = "Doe" });         personList.Add(new Person() { FirstName = "Jane", LastName = "Doe" });         personList.Add(new Person() { FirstName = "John", LastName = "Adams" });          lbNames.ItemsSource = personList;     } }

Now I need to create the event handlers for the [b]MouseLeftButtonDown [/b]and [b]MouseLeftButtonUp [/b]events. This can simply be done by using the [b]Events [/b]list from the [b]Properties [/b]window in the designer.

 private void lbNames_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e) {  }  private void lbNames_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e) {  }

We now need to create two class level objects: a [b]DispatcherTimer [/b]object, and a [b]Person [/b]object. These are class level because they will need to be accessed from different events. We will also subscribe to the Tick event for the timer.

 ObservableCollection personList = new ObservableCollection();  DispatcherTimer timer;  Person selectedPerson = null;  // Constructor public MainPage() {     InitializeComponent();      this.Loaded += new RoutedEventHandler(MainPage_Loaded);      timer = new DispatcherTimer();     timer.Tick += delegate(object s, EventArgs e)     {      }; }

Next, we will add a [b]Popup [/b]in XAML. This can go above or below the [b]ListBox[/b] that is currently holding the names.

And the event handler for selecting the Delete item…

 private void DeleteContextMenu_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e) {  }

Here is how it’s going to work. When the user presses down, we will start the timer. When the user releases, then we stop the timer. So if the timer’s interval is reached, we know that the user was holding down on the screen, so we will display the popup. So now we move to our code. First we are going to handle the [b]MouseLeftButtonDown [/b]event.

 private void lbNames_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e) {     // if there is no person selected, then there is no person to delete     //   no need to do any code if nothing is selected     if (selectedPerson == null)         return;      // gets the position of the mouse cursor to set the Margin     //    of the Popup to show at the mouse coordinates.  You     //    may need to tweak these values to get it to display in     //    the correct location.     Point position = e.GetPosition((UIElement)this);     DeleteContextMenu.Margin = new Thickness(position.X, position.Y - 200, 20, 0);      // sets the interval to 1.1 seconds.  This means the user will need      //    to hold down on the screen for 1.1 seconds before we determine     //    to show the ContextMenu.     timer.Interval = TimeSpan.FromMilliseconds(1100);     timer.Start(); }

Next, we will do our code for the [b]MouseLeftButtonUp[/b] event

 private void lbNames_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e) {     // stop the timer when the user releases the screen     timer.Stop();      // sets the class level variable to the selected row     selectedPerson = lbNames.SelectedItem as Person; }

Now for our code in the [b]Tick [/b]event for the [b]Timer[/b].

 // Constructor public MainPage() {     InitializeComponent();      this.Loaded += new RoutedEventHandler(MainPage_Loaded);      timer = new DispatcherTimer();     timer.Tick += delegate(object s, EventArgs e)     {         // stop the timer so that it doesn't popup the Context menu again         timer.Stop();          // since we are using the same ListBox over and over, this will         //   make it so when the Context Menu is shown, there will be no         //   selected item from any previous showing of the Context Menu         lbDeleteContextMenu.SelectedIndex = -1;          // opens the Context Menu         DeleteContextMenu.IsOpen = true;     }; }

Last, we have our code from the [b]SelectionChanged [/b]event for the [b]ListBox [/b]that is part of the Context Menu.

 private void DeleteContextMenu_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e) {     // in the Timer's Tick event, we set the SelectedIndex of the     //   Context Menu's Listbox back to -1.  However, this does     //   fire the SelectionChanged event.  This code will handle that.     if (lbDeleteContextMenu.SelectedIndex == -1)         return;      // closes the Context Menu     DeleteContextMenu.IsOpen = false;      if (selectedPerson == null)         return;      // removes the selected person from the list     personList.Remove(selectedPerson);      // since we are using an ObservableCollection, we do not have     //   to rebind the list to the ListBox.      selectedPerson = null; }

Now you can run the application, and you will see the list show up. You must click on an item first before clicking and holding to show the Context Menu.

So I decided to roll my own using the [b]MouseLeftButtonDown [/b]and [b]MouseLeftButtonUp [/b]events, and a [b]DispatcherTimer[/b].

Add these two using statements to the top of the code…

using System.Collections.ObjectModel;

using System.Windows.Threading;

So first, we need our initial code to get the [b]ListBox [/b]populated. I created a [b]Person [/b]class just for simplistic reasons.

public class Person

{

public string FirstName { get; set; }

public string LastName { get; set; }

}

Next, I will set up the [b]ListBox [/b]to simply show the [b]FirstName [/b]of the [b]Person[/b].

Name="lbNames"

Height="240"

HorizontalAlignment="Left"

Margin="10,119,0,0"

VerticalAlignment="Top"

Width="460"

ItemsSource="{Binding}">

Now I will create an generic [b]ObservableCollection [/b]object to store the [b]Person [/b]objects. This will be a class level variable since it will be accessed from multiple events.

public partial class MainPage : PhoneApplicationPage

{

ObservableCollection personList = new ObservableCollection();

// Constructor

public MainPage()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

}

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

personList.Add(new Person() { FirstName = "John", LastName = "Doe" });

personList.Add(new Person() { FirstName = "Jane", LastName = "Doe" });

personList.Add(new Person() { FirstName = "John", LastName = "Adams" });

lbNames.ItemsSource = personList;

}

private void lbNames_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

{

}

private void lbNames_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)

{

}

ObservableCollection personList = new ObservableCollection();

DispatcherTimer timer;

Person selectedPerson = null;

// Constructor

public MainPage()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

timer = new DispatcherTimer();

timer.Tick += delegate(object s, EventArgs e)

{

};

}

Next, we will add a [b]Popup [/b]in XAML. This can go above or below the [b]ListBox[/b] that is currently holding the names.

x:Name="DeleteContextMenu"

Height="200"

Width="400">

x:Name="lbDeleteContextMenu"

Background="White"

SelectionChanged="DeleteContextMenu_SelectionChanged">

Content="Delete Person"

Foreground="Red"

FontSize="25"

FontWeight="Bold"/>

And the event handler for selecting the Delete item…

private void DeleteContextMenu_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)

{

}

So now we move to our code. First we are going to handle the [b]MouseLeftButtonDown [/b]event.

private void lbNames_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

{

// if there is no person selected, then there is no person to delete

// no need to do any code if nothing is selected

if (selectedPerson == null)

return;

// gets the position of the mouse cursor to set the Margin

// of the Popup to show at the mouse coordinates. You

// may need to tweak these values to get it to display in

// the correct location.

Point position = e.GetPosition((UIElement)this);

DeleteContextMenu.Margin = new Thickness(position.X, position.Y - 200, 20, 0);

// sets the interval to 1.1 seconds. This means the user will need

// to hold down on the screen for 1.1 seconds before we determine

// to show the ContextMenu.

timer.Interval = TimeSpan.FromMilliseconds(1100);

timer.Start();

}

Next, we will do our code for the [b]MouseLeftButtonUp[/b] event

private void lbNames_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)

{

// stop the timer when the user releases the screen

timer.Stop();

// sets the class level variable to the selected row

selectedPerson = lbNames.SelectedItem as Person;

}

Now for our code in the [b]Tick [/b]event for the [b]Timer[/b].

// Constructor

public MainPage()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

timer = new DispatcherTimer();

timer.Tick += delegate(object s, EventArgs e)

{

// stop the timer so that it doesn't popup the Context menu again

timer.Stop();

// since we are using the same ListBox over and over, this will

// make it so when the Context Menu is shown, there will be no

// selected item from any previous showing of the Context Menu

lbDeleteContextMenu.SelectedIndex = -1;

// opens the Context Menu

DeleteContextMenu.IsOpen = true;

};

}

Last, we have our code from the [b]SelectionChanged [/b]event for the [b]ListBox [/b]that is part of the Context Menu.

private void DeleteContextMenu_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)

{

// in the Timer's Tick event, we set the SelectedIndex of the

// Context Menu's Listbox back to -1. However, this does

// fire the SelectionChanged event. This code will handle that.

if (lbDeleteContextMenu.SelectedIndex == -1)

return;

// closes the Context Menu

DeleteContextMenu.IsOpen = false;

if (selectedPerson == null)

return;

// removes the selected person from the list

personList.Remove(selectedPerson);

// since we are using an ObservableCollection, we do not have

// to rebind the list to the ListBox.

selectedPerson = null;

}

Now you can run the application, and you will see the list show up. You must click on an item first before clicking and holding to show the Context Menu.

So I decided to roll my own using the [b]MouseLeftButtonDown [/b]and [b]MouseLeftButtonUp [/b]events, and a [b]DispatcherTimer[/b].

Add these two using statements to the top of the code…

using System.Collections.ObjectModel;

using System.Windows.Threading;

So first, we need our initial code to get the [b]ListBox [/b]populated. I created a [b]Person [/b]class just for simplistic reasons.

public class Person

{

public string FirstName { get; set; }

public string LastName { get; set; }

}

Next, I will set up the [b]ListBox [/b]to simply show the [b]FirstName [/b]of the [b]Person[/b].

Name="lbNames"

Height="240"

HorizontalAlignment="Left"

Margin="10,119,0,0"

VerticalAlignment="Top"

Width="460"

ItemsSource="{Binding}">

Now I will create an generic [b]ObservableCollection [/b]object to store the [b]Person [/b]objects. This will be a class level variable since it will be accessed from multiple events.

public partial class MainPage : PhoneApplicationPage

{

ObservableCollection personList = new ObservableCollection();

// Constructor

public MainPage()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

}

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

personList.Add(new Person() { FirstName = "John", LastName = "Doe" });

personList.Add(new Person() { FirstName = "Jane", LastName = "Doe" });

personList.Add(new Person() { FirstName = "John", LastName = "Adams" });

lbNames.ItemsSource = personList;

}

private void lbNames_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

{

}

private void lbNames_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)

{

}

ObservableCollection personList = new ObservableCollection();

DispatcherTimer timer;

Person selectedPerson = null;

// Constructor

public MainPage()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

timer = new DispatcherTimer();

timer.Tick += delegate(object s, EventArgs e)

{

};

}

Next, we will add a [b]Popup [/b]in XAML. This can go above or below the [b]ListBox[/b] that is currently holding the names.

x:Name="DeleteContextMenu"

Height="200"

Width="400">

x:Name="lbDeleteContextMenu"

Background="White"

SelectionChanged="DeleteContextMenu_SelectionChanged">

Content="Delete Person"

Foreground="Red"

FontSize="25"

FontWeight="Bold"/>

And the event handler for selecting the Delete item…

private void DeleteContextMenu_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)

{

}

So now we move to our code. First we are going to handle the [b]MouseLeftButtonDown [/b]event.

private void lbNames_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

{

// if there is no person selected, then there is no person to delete

// no need to do any code if nothing is selected

if (selectedPerson == null)

return;

// gets the position of the mouse cursor to set the Margin

// of the Popup to show at the mouse coordinates. You

// may need to tweak these values to get it to display in

// the correct location.

Point position = e.GetPosition((UIElement)this);

DeleteContextMenu.Margin = new Thickness(position.X, position.Y - 200, 20, 0);

// sets the interval to 1.1 seconds. This means the user will need

// to hold down on the screen for 1.1 seconds before we determine

// to show the ContextMenu.

timer.Interval = TimeSpan.FromMilliseconds(1100);

timer.Start();

}

Next, we will do our code for the [b]MouseLeftButtonUp[/b] event

private void lbNames_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)

{

// stop the timer when the user releases the screen

timer.Stop();

// sets the class level variable to the selected row

selectedPerson = lbNames.SelectedItem as Person;

}

Now for our code in the [b]Tick [/b]event for the [b]Timer[/b].

// Constructor

public MainPage()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

timer = new DispatcherTimer();

timer.Tick += delegate(object s, EventArgs e)

{

// stop the timer so that it doesn't popup the Context menu again

timer.Stop();

// since we are using the same ListBox over and over, this will

// make it so when the Context Menu is shown, there will be no

// selected item from any previous showing of the Context Menu

lbDeleteContextMenu.SelectedIndex = -1;

// opens the Context Menu

DeleteContextMenu.IsOpen = true;

};

}

Last, we have our code from the [b]SelectionChanged [/b]event for the [b]ListBox [/b]that is part of the Context Menu.

private void DeleteContextMenu_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)

{

// in the Timer's Tick event, we set the SelectedIndex of the

// Context Menu's Listbox back to -1. However, this does

// fire the SelectionChanged event. This code will handle that.

if (lbDeleteContextMenu.SelectedIndex == -1)

return;

// closes the Context Menu

DeleteContextMenu.IsOpen = false;

if (selectedPerson == null)

return;

// removes the selected person from the list

personList.Remove(selectedPerson);

// since we are using an ObservableCollection, we do not have

// to rebind the list to the ListBox.

selectedPerson = null;

}

Now you can run the application, and you will see the list show up. You must click on an item first before clicking and holding to show the Context Menu.

To my surprise, even though the OS seems to support a long press action(the way to uninstall an application), that action doesn’t seem to be available to developers(or not that I could find).

So I decided to roll my own using the MouseLeftButtonDown and MouseLeftButtonUp events, and a DispatcherTimer.

Add these two using statements to the top of the code…

using System.Collections.ObjectModel;
using System.Windows.Threading;

So first, we need our initial code to get the ListBox populated. I created a Person class just for simplistic reasons.

public class Person
{
     public string FirstName { get; set; }
     public string LastName { get; set; }
}

Next, I will set up the ListBox to simply show the FirstName of the Person.

Now I will create an generic ObservableCollection object to store the Person objects. This will be a class level variable since it will be accessed from multiple events.

public partial class MainPage : PhoneApplicationPage
{
    ObservableCollection personList = new ObservableCollection();

    // Constructor
    public MainPage()
    {
        InitializeComponent();

        this.Loaded += new RoutedEventHandler(MainPage_Loaded);
    }

    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        personList.Add(new Person() { FirstName = "John", LastName = "Doe" });
        personList.Add(new Person() { FirstName = "Jane", LastName = "Doe" });
        personList.Add(new Person() { FirstName = "John", LastName = "Adams" });

        lbNames.ItemsSource = personList;
    }
}

Now I need to create the event handlers for the MouseLeftButtonDown and MouseLeftButtonUp events. This can simply be done by using the Events list from the Properties window in the designer.

private void lbNames_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{

}

private void lbNames_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{

}

We now need to create two class level objects: a DispatcherTimer object, and a Person object. These are class level because they will need to be accessed from different events. We will also subscribe to the Tick event for the timer.

ObservableCollection personList = new ObservableCollection();

DispatcherTimer timer;

Person selectedPerson = null;

// Constructor
public MainPage()
{
    InitializeComponent();

    this.Loaded += new RoutedEventHandler(MainPage_Loaded);

    timer = new DispatcherTimer();
    timer.Tick += delegate(object s, EventArgs e)
    {

    };
}

Next, we will add a Popup in XAML. This can go above or below the ListBox that is currently holding the names.

And the event handler for selecting the Delete item…

private void DeleteContextMenu_Selectionchanged(object sender, System.Windows.Controls.SelectionchangedEventArgs e)
{

}

So now we move to our code. First we are going to handle the MouseLeftButtonDown event.

private void lbNames_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    // if there is no person selected, then there is no person to delete
    //   no need to do any code if nothing is selected
    if (selectedPerson == null)
        return;

    // gets the position of the mouse cursor to set the Margin
    //    of the Popup to show at the mouse coordinates.  You
    //    may need to tweak these values to get it to display in
    //    the correct location.
    Point position = e.GetPosition((UIElement)this);
    DeleteContextMenu.Margin = new Thickness(position.X, position.Y - 200, 20, 0);

    // sets the interval to 1.1 seconds.  This means the user will need
    //    to hold down on the screen for 1.1 seconds before we determine
    //    to show the ContextMenu.
    timer.Interval = TimeSpan.FromMilliseconds(1100);
    timer.Start();
}

Next, we will do our code for the MouseLeftButtonUp event

private void lbNames_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    // stop the timer when the user releases the screen
    timer.Stop();

    // sets the class level variable to the selected row
    selectedPerson = lbNames.SelectedItem as Person;
}

Now for our code in the Tick event for the Timer.

// Constructor
public MainPage()
{
    InitializeComponent();

    this.Loaded += new RoutedEventHandler(MainPage_Loaded);

    timer = new DispatcherTimer();
    timer.Tick += delegate(object s, EventArgs e)
    {
        // stop the timer so that it doesn't popup the Context menu again
        timer.Stop();

        // since we are using the same ListBox over and over, this will
        //   make it so when the Context Menu is shown, there will be no
        //   selected item from any previous showing of the Context Menu
        lbDeleteContextMenu.SelectedIndex = -1;

        // opens the Context Menu
        DeleteContextMenu.IsOpen = true;
    };
}

Last, we have our code from the SelectionChanged event for the ListBox that is part of the Context Menu.

private void DeleteContextMenu_Selectionchanged(object sender, System.Windows.Controls.SelectionchangedEventArgs e)
{
    // in the Timer's Tick event, we set the SelectedIndex of the
    //   Context Menu's Listbox back to -1.  However, this does
    //   fire the Selectionchanged event.  This code will handle that.
    if (lbDeleteContextMenu.SelectedIndex == -1)
        return;

    // closes the Context Menu
    DeleteContextMenu.IsOpen = false;

    if (selectedPerson == null)
        return;

    // removes the selected person from the list
    personList.Remove(selectedPerson);

    // since we are using an ObservableCollection, we do not have
    //   to rebind the list to the ListBox.

    selectedPerson = null;
}

Now you can run the application, and you will see the list show up. You must click on an item first before clicking and holding to show the Context Menu.

Silverlight 4 – Creating a Custom Modal Dialog

Ryan Alford — Fri, 23 Jul 2010 06:30:26 +0000

For a Silverlight application I did recently, I wanted to do a custom modal dialog box for showing informational messages, error messages, or other messages to the user. This dialog box would have no title bar or “X” button, and would have rounded corners.

For this tutorial, we will use Blend 4 to accomplish our task.

First, create a new Silverlight 4 application. I named mine CustomDialog.

Once the project has been created, we are going to add a new item to our Silverlight project. This item will be a ChildWindow. I named mine DialogPopup.

The ChildWindow will handle the modal dialog part of our window. However, there are parts of the ChildWindow that I didn’t like and wanted to remove/change, such as the window chrome. I also wanted to round the corners of the window. To do this, we need to edit the template for the window. In the Objects and Timeline window, right-click on the ChildWindow parent –> Edit Template –> Edit a Copy…

We are going to keep it simple and save the new style to the ChildWindow document.

So first, we are just going to delete the window chrome from the window. The window chrome is the title bar and the “X” used to close the window. Drill-down in the treeview until you find the Chrome entry. Right-click, and choose Delete.

Next, we need to delete some of the Borders. These give the window a grey border that I didn’t want.

Next, we are going to round the corners of the window. Drill-down and click on the Border shown below.

In the Properties window, set the CornerRadius to 20.

Move down to the next Border,

And set it’s CornerRadius to 20.

With the same Border selected, in the Properties window, set the Background Brush to a color of your choice.

The window “jazz” is now complete. Next, we are going to move to the XAML.

First, we need to give our window a name so we can handle binding. I named mine myCustomPopup.

Now we need to add a TextBlock to the window to hold our message.

You may notice that we are binding to a property called Message. This is a custom DependencyProperty that will correspond to a public property that we will set when we create an instance of the window.

/// 
/// Creates a public property for the TextBlock to bind to
/// 
public static DependencyProperty MessageProperty = DependencyProperty.Register("Message", typeof(string), typeof(DialogPopup), new PropertyMetadata(""));
public string Message
{
     get { return (string)GetValue(MessageProperty); }
     set { SetValue(MessageProperty, value); }
}

This will complete our work for the window. To show off the new window, lets add a Button to the MainPage.xaml, create an EventHandler for the Click event.

And the code for the Click event…

private void btnShowMessage_Click(object sender, System.Windows.RoutedEventArgs e)
{
     DialogPopup dialog = new DialogPopup();
     dialog.Message = "Our message";
     dialog.Show();
}

And that will complete our tutorial. Run the application from Blend using F5, and you should see this..