11.4.2.2 Implementing the User interface

11.4.2.2 Implementing the User interface

Now that we have all the data we need to process the photos, we can add a simple graphical user interface, using Windows forms. In Listing 11.22, we will create two controls to display the data, and the code to display the selected photos.

Listing 11.22 Adding a photo browser's user interface (F #)

Open System

Open System.Windows.Forms

Let main = new Form (text= "Photos", Clientsize=size (600,300))

Let pict = Newpicturebox (Dock=dockstyle.fill)

Let list = Newlistbox (Dock=dockstyle.left,

Datasource=files,

DisplayMember = "name") [1]<--displays the name in the file array

List.  Selectedindexchanged.add (Fun _–>;; Changes in <--processing options

Letinfo = files. [List. SelectedIndex]

Pict. Image <-Info. Preview.value) [2] <--Calculate delay value

Main. Controls.Add (PICT)

Main. Controls.Add (list)

[<stathread>]

Do Application.Run (main) [3] <--Run application

To display a list of pictures in a list box (ListBox) control, we use data binding [1], which is a feature of many. NET controls, as long as the control's data source (DataSource) is specified as our file array. To specify what is displayed, set the DataMember property to the name of the record member that we want to display (name).

Next, we register the lambda function as the handler for the SelectedIndexChanged event of the list box. When it is triggered, we select the Imageinfo value and use the Value property to get the bitmap of the specified size. If the bitmap is displayed for the first time, the size is resized, and the cached results can be used immediately if you have previously browsed. The code in Listing 11.22 is a standalone application, so you can run it using the Application.Run () method. In F # Interactive, you can use main. Show () to display the form. You can see the results of the application running in Figure 11.2.

Figure 11.2 The photo can be selected from the list on the left. Since the delay value is used, the resized version is automatically cached.

Running this application, if you use a folder that contains large images, the difference due to the use of delay is obvious. Selecting a "new" photo may take some time, and if you re-browse a photo you've already seen, it will appear immediately.

Attention

You might want to know if we can use multithreading to improve this application. There are two benefits to using multithreading. First, when a user selects a file, they can start the calculation without blocking the user interface. Currently, the application is frozen until the image is resized. To do this, we can use asynchronous programming techniques such as the F # asynchronous workflow, which will be discussed in Chapter 13th.

Another aspect, the application can pre-adjust the size of the bitmap in the background. Instead of doing nothing, you adjust the size of the picture ahead of time, and you don't have to wait while the user clicks the photo. In the 14th chapter we will see that it is quite simple that we will see the task<t> type, just like lazy<t>, except that it is not delayed [computed], but rather is computed in the background thread.

For how to use the Lazy<t> class in C # to implement the same application, we are sure that you already have a good concept, so the book is no longer discussed, you can find the source code of the application in this book's website. In the C # version, it's important to note that if your code is within a method, you can use the anonymous type of C # 3.0 to represent your photo information.

11.4.2.2 Implementing the User interface