Using Buffering Techniques for Large List Controls

Gallery

Ray Yagubyan

Ray Yagubyan

Making use of buffering techniques to efficiently and flawlessly render large quantities of items in list controls.

Introduction

The purpose of this article is to highlight the effectiveness of using buffering techniques when rendering large quantities of data. Combining several different methods for increasing the processing time of rendering can result in real-time rendering of items, even when the container list control owns millions of entries. This is targetted more towards custom owner-drawn components, the likes of tile components or custom list view components.

Background

While developing a framework of Metro style components, I stumbled across the need for buffering when working on a custom ListView component. A ListView is capable of containing any number of items, and rendering should be a seamless and flicker-free experience. In order to achieve this, different layers of buffering were aggregated until the rendering operation became visibily instantaneous.

Buffering Methods

To achieve buffering in custom controls, there are several different options available which provide the functionality. Below is an outline of the core concepts and their purposes when buffering GDI.

Double Buffering

public class MyControl : UserControl
{
    public MyControl()
    {
        DoubleBuffered = true;
        SetStyle(ControlStyles.OptimizedDoubleBuffer, true);
    }
}

A large number of components implement a protected DoubleBuffered property. This property internally signals that the component should execute any painting operations on a separate memory buffer.

What this means is that the Paint event does not execute on the graphics handle of the component directly, but instead a separate Graphics buffer is created in memory, and the painting operation occurs on that instead. One the painting operation has completed on the memory buffer, this buffer is then painted onto the component graphics handle.

The purpose of this is to enable the commit of a completed paint operation in a single operation. For instance, imagine a component responsible for rendering 1,000 items in a single paint operation, each with a 0.0004s rendering time. A single paint operation would consume 0.4s (400ms) to complete. During this 400ms, the control will actively update while the paint operation is occurring, resulting in partial graphics updates being committed to the visible screen while the operation is on-going. This is a consequence known as tearing, where parts of the component are being updated, while the old graphics are still visible.

Double buffering eliminates this issue by completing the 400ms painting operation on a separate handle, then replaces the entire component visible state in a single swoop, removing the tearing issue and appearing as though the update completed seamlessly.

Disabling WM_ERASEBKGND

public class MyControl : UserControl
{
    private const int WM_ERASEBKGND = 0x0014;

    protected override void WndProc(ref Message m)
    {
        if (m.Msg != WM_ERASEBKGND)
            base.WndProc(ref m);
    }
}

In Windows, a WM_ERASEBKGND message corresponds to a request sent to the active component when the background of the component should be erased. This message is responsible for only erasing the background, and thus becomes redundant when we begin implementing a custom drawn control.

This Windows message increases strain on a custom control, forcing the system to destroy the existing background prior to any painting operation. This increases the amount of work involved before any painting operation actually takes place, thus it becomes common practise to disable this Windows message and instead fill the Paint graphics handle with the background color, replicating the same process.

Buffered Graphics (and Buffered Graphics Context)

The .NET Framework supplies a BufferedGraphics class. This class, when instantiated, is responsible for retaining an active graphics handle which can be re-used for a painting operation. The major advantage of using this class is that a single, expensive paint operation can be retain in memory, so that a repeat painting operation does not need to render all of the relevant items again.

A BufferedGraphics object should be disposed and reset whenever the graphical interface requires updating, for example:

  • The control is resized; more information may need rendering, or the background color needs to be updated to fill the new region.
  • The control is scrolled; the list of visible items in the control need moving to accommodate the scroll.
  • The control has a mouse movement: a visible item may now be in the ‘hovered over’ state, resulting in a different color being drawn.

These situations require the existing graphics handle being disposed so the change in state can be committed to the control graphics handle. See the below example of the user of a BufferedGraphics object.

public class MyControl : UserControl
{
    private BufferedGraphics buffer;
    private BufferedGraphicsContext bufferContext;

    public MyControl()
    {
        // initialize the BufferedGraphics object to null by default
        buffer = null;

        // initialize the BufferedGraphicsContext object which is the
        // graphics context for the current application domain
        bufferContext = BufferedGraphicsManager.Current;
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        // check whether our buffered graphics have been allocated yet,
        // if not then we need to create it and render our graphics
        if (buffer == null)
        {
            Rectangle bounds = new Rectangle(0, 0, Width, Height);

            // allocate our graphics buffer, which matches the dimensions of
            // our control, and uses the paint Graphics object as a base for
            // generating the Graphics handle in the buffered graphics
            buffer = bufferContext.Allocate(e.Graphics, bounds);

            // fill our graphics buffer with a white color
            buffer.Graphics.FillRectangle(Brushes.White, bounds);
        }

        // render our graphics buffer onto the target graphics handle for
        // the paint operation
        buffer.Render(e.Graphics);
    }

    protected override void OnResize(EventArgs e)
    {
        // check whether we have an existing graphics buffer which uses
        // some old dimensions (prior to the resize)
        if (buffer != null)
        {
            // dispose of the graphics buffer object and reset to null to force
            // the invalidation to re-create our graphics object
            buffer.Dispose();
            buffer = null;
        }

        // invalidate our control which will cause the graphics buffer to be
        // re-created and drawn with the new dimensions
        Invalidate();
    }
}

Slicing Large Data

In order to benefit from the above double buffering techniques when rendering a custom list control, it’s important to realise that there’s no realistic method of being able to render all items in the collection. When a control has upwards of one million rows, the painting operation would become too intensive for double buffering to make any sense.

Instead, to decrease the amount of work involved with painting, the collection needs slicing such that we only have to render a small segment of the data required. This is achievable by using mathematical formulae to determine which item is visible at the top of the control view region, and calculating how many items are visible from the top to the bottom.

In order to achieve any of this functionality, it’s important that either a constant or configurable field or property be available to define the height (or dimensions) of a single item. Below, let’s allow a property (ItemHeight) be available for the user to specify a custom height:

public class MyControl : UserControl
{
    private int itemHeight;

    public MyControl()
    {
        itemHeight = 18;
    }

    [Browsable(true)]
    public int ItemHeight
    {
        get { return itemHeight; }
        set { if (itemHeight != value) { itemHeight = value; Invalidate(); } }
    }
}

The default item height is 18px, which can be configured at design time or runtime. Whenever the item height is changed the control is invalidated.

The next stage is to create the collection which will store the items we are interested in displaying in the control. For the purposes of this tutorial the control will display a list of String objects. If we wish to properly monitor our collection for additions, removals or movement of items, we need to implement methods of corresponding back to our control on any of the Add, Remove etc. methods.

To make this simple, our control shall use the ObservableCollection<> class which implements the INotifyCollectionChanged interface, and we’ll hook into the CollectionChanged event to update the control.

public class MyControl : UserControl
{
    private int itemHeight;
    private ObservableCollection<string> items;

    public MyControl()
    {
        itemHeight = 18;
        items = new ObservableCollection<string>();
        items.CollectionChanged +=
             new NotifyCollectionChangedEventHandler(ItemsCollectionChanged);
    }

    [Browsable(true)]
    public int ItemHeight
    {
        get { return itemHeight; }
        set { if (itemHeight != value) { itemHeight = value; Invalidate(); } }
    }

    [Browsable(false)]
    public ObservableCollection<string> Items
    {
        get { return items; }
    }

    protected virtual void ItemsCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
        
    }
}

The next stage is to implement an algorithm to enable scrolling when the number of visible items in the control would exceed the height of the view. This can be calculated using the item height property, the number of items and the current height of the control.

    protected virtual void CalculateAutoScroll()
    {
        // ensure that autoscrolling is enabled in the control for scrollbar visibility
        AutoScroll = true;

        // update the minimum size for the scrolling procedure, which ensures that the
        // maximum scroll value vertically is equal to the item height x item count
        AutoScrollMinSize = new Size(0, itemHeight * items.Count);
    }

This will display a scroll-bar which accommodates for any number of items in the collection. This method should be called any time the collection changes, so we must modify the ItemsCollectionChanged method to raise this calculation.

    protected virtual void ItemsCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
        // recalculate the auto-scroll region to accommodate the changes
        CalculateAutoScroll();

        // invalidate the control so that any removed or moved items are updated
        Invalidate();
    }

The same method should also be raised when the item height property is changed, so that the new item height is applied to the algorithm.

    [Browsable(true)]
    public int ItemHeight
    {
        get { return this.itemHeight; }
        set
        {
            if (itemHeight != value)
            {
                itemHeight = value;
                CalculateAutoScroll();
                Invalidate();
            }
        }
    }

Once these have been configured, the operation for slicing data can begin. The calculation for the starting and ending indices are extremely easy to calculate using an algorithm.

The Paint method for the control must be overridden so we can render out items appropriately.

    protected override void OnPaint(PaintEventArgs e)
    {

    }

To calculate the starting index, the scroll position must be taken into account to properly generate the correct index. The base index is calculated based on the scroll position and the height of each item.

    int start = (int)Math.Floor((double)Math.Abs(AutoScrollPosition.Y) / (double)itemHeight;

The number of items available for view is calculated based on the height of the control and the height of each item.

    int count = (int)Math.Ceiling((double)Height / (double)itemHeight);

Additionally, if the user has scrolled to a position where only half of an item may be visible at the top of the control, we must take into account the positional offset. To account for this we must calculate the remaining pixels after dividing the scroll position by the height of each item.

    int offset = -(int)(Math.Abs(AutoScrollPosition.Y) % itemHeight);

The below image highlights where the values represent when calculating the indices and offset.

Finally, using these values we can devise which items in the control need to be rendered.

    protected override void OnPaint(PaintEventArgs e)
    {
        int start = (int)Math.Floor((double)Math.Abs(AutoScrollPosition.Y) / (double)itemHeight);
        int count = (int)Math.Ceiling((double)Height / (double)itemHeight);
        int offset = -(int)(Math.Abs(AutoScrollPosition.Y) % itemHeight);

        for (int i = 0; count > i && start + i < items.Count && 0 <= i; i++)
        {
            int index = start + i;
            string value = items[index];
    
            int x = 0;
            int y = (i * itemHeight) + offset;

            e.Graphics.DrawString(
                value,
                this.Font,
                Brushes.Black,
                new Rectangle(x, y, Width, itemHeight)
            );
        }
    }

The result of this code is a small, simple control which can handle rendering slices of data from a collection, rather than attempting to render all data into the control. The procedure outlined above is similar to a ‘clipping’ effect, where items which aren’t visible at neither the top nor bottom of the control are simply not rendered.

Combining the Methods

As mentioned in the introduction, the purpose of this article is to highlight how to use these rendering methodologies to represent large quantities of data in a simple control. We can combine the buffered graphics approach with the slicing of data to provide the interface for millions of rows with very little overhead.

The article has an attachment containing two core files: UI.cs and CustomBufferedList.cs. The CustomBufferedList.cs file contains the code for our list control which combines the double buffering and data slicing techniques.

A method implemented in the CustomBufferedList class adds support for identifying a row at a given location in the control. In order to calculate an item at a location, a similar method is used to the previous OnPaint implementation, where the starting index and number of visible items is calculated, and then the visible items are iterated through to determine whether the bounds would fall within the location.

        public int GetItemAt(Point location)
        {
            // calculate the starting index based on the scroll position 
            int start = itemHeight > 0 ?
                (int)Math.Floor((double)Math.Abs(AutoScrollPosition.Y) / itemHeight) : 0;

            // calculate the total number of items visible in the control
            int visible = (int)Math.Ceiling((double)Height / (double)itemHeight);

            // calculate the rectangle for the first item bounds
            Rectangle bounds = new Rectangle(
                0,
                -(int)(Math.Abs(AutoScrollPosition.Y) % itemHeight),
                Width,
                itemHeight
            );

            // increment through the items to match the item at the location
            for (int i = 0; 0 <= start + i && start + i < items.Count && visible > i; i++)
            {
                // check whether the mouse location falls within these bounds
                if (bounds.Contains(location))
                    return start + i;

                // increment the position of the bounds based on the item height
                bounds.Y += itemHeight;
            }

            // failed to match an item at this location
            return -1;
        }

All other content in the file is responsible for handling the process of using buffering techniques and using data slicing. The OnInvalidateBuffer() method is responsible for handling the invalidation of the BufferedGraphics object, and also supports ignoring the method invoke when updates have been suspended.

When adding large bodies of data to the CustomBufferedList, it’s good practise to invoke the BeginUpdate() and EndUpdate() methods. These methods temporarily suspend painting of the component, and then resume and invalidate the component, respectively.

// begin an update on the list, which suspends the layout
list.BeginUpdate();

// populate the list with a massive amount of values
for (int i = 0; 1000000 > i; i++)
    list.Items.Add(string.Format("Custom buffered list item {0}", i + 1));

// end the update to commit the changes to the buffer
list.EndUpdate();

Points of Interest

The CustomBufferedList component included with the project also implements OnMouseMove encapsulation which handles item highlighting. It would be just as simple to implement a selection process based on similar behaviour, which would provide the functionality of a ListView component.

Apologies if I have missed anything important or if some areas of the article appear rushed. I haven’t had much time to write articles, so this was an overview of how to achieve the goal which was set-out at the beginning.

Running a ClickOnce App as Adminstrator under Windows 8

Gallery

0539e-ray-yagubyan

Ray Yagubyan

Introduction

This article explains how to run a ClickOnce application as an Administrator under Windows 8, when the app also includes a SQL Compact Database.

My particular application must run as Administrator because it needs to pass data to a MYOB accounting data file, and the MYOB ODBC Driver requires elevated permission under Windows 8.  Because the app is to be distributed to many different customers, I like the deployment simplicity that ClickOnce offers.  However, ClickOnce deployments do not support changing the requestedExecutionLevel in the manifest to “requireAdministrator”.

Background

I saw a few articles such as this which put me on the right track.  The code checks if the app is running as Administrator, and if not, restarts the app as an Administrator.  However, I found a couple of problems with this solution. First, “Application.Current.Shutdown()” does not actually shutdown the application immediately, but continues to execute code, as I found described in several articles.  I found this caused my app to keep restarting ad inifinitum under Windows 7.  Secondly, when the app is restarted as Administrator, it loses its “ClickOnce” status.  Therefore, any references to System.Deployment.Application result in error – which has implications for the path to my app’s SQL Compact database.  The reference to ApplicationDeployment.CurrentDeployment.DataDirectory becomes invalid and the app chooses to look in the executable’s working directory for the database, which of course it cannot find, and returns the error “The underlying provider failed on Open. Database was not found”.

After several hours (actually, several days), I finally found the workarounds to all these issues, and my ClickOnce WPF app now runs beautifully under Windows 8, happily connecting to MYOB and sharing data.

Using the code

Here is the full code listing.

Class Application

    ' Application-level events, such as Startup, Exit, and DispatcherUnhandledException
    ' can be handled in this file.

    Protected Overrides Sub OnStartup(e As StartupEventArgs)

        Dim blnCloseInstance As Boolean = False

       ' Check if OS is Windows 8 or higher

        Dim osVer As System.OperatingSystem = System.Environment.OSVersion
        If osVer.Version.Major > 6 Or (osVer.Version.Major = 6 And osVer.Version.Minor >= 2) Then

            ' Check if user is NOT admin
            If Not IsRunningAsAdministrator() Then

                ' Setting up start info of the new process of the same application
                Dim processStartInfo As New ProcessStartInfo(Assembly.GetEntryAssembly().CodeBase)

                ' Set the DataDirectory as an argument to the new process
                processStartInfo.Arguments = "" & Chr(34) & ApplicationDeployment.CurrentDeployment.DataDirectory & Chr(34) & ""
                
                ' Using operating shell and setting the ProcessStartInfo.Verb to &ldquo;runas&rdquo; will let it run as admin
                processStartInfo.UseShellExecute = True
                processStartInfo.Verb = "runas"

                ' Start the application as new process
                Process.Start(processStartInfo)

                blnCloseInstance = True
                Application.Current.Shutdown()
                
            End If
        End If

        If blnCloseInstance = False Then

            'set DataDirectory
            If IsRunningAsAdministrator() = True Then
                Dim arguments As String() = Environment.GetCommandLineArgs()
                Try
                    Dim datadir As String = arguments(1)
                    AppDomain.CurrentDomain.SetData("DataDirectory", datadir)
                Catch ex As Exception
                    'already running as administrator - app was not restarted
                End Try
            End If

            ' Do your startup tasks

            MyBase.OnStartup(e)

       End If

    End Sub

    Public Function IsRunningAsAdministrator() As Boolean
        ' Get current Windows user
        Dim windowsIdentity__1 As WindowsIdentity = WindowsIdentity.GetCurrent()

        ' Get current Windows user principal
        Dim windowsPrincipal As New WindowsPrincipal(windowsIdentity__1)

        ' Return TRUE if user is in role "Administrator"
        Return windowsPrincipal.IsInRole(WindowsBuiltInRole.Administrator)
    End Function

End Class

This is a WPF application, so I have overridden Application_OnStartup.

First I check the current operating system.  I found the ClickOnce app runs fine under Windows 7, therefore there is no need to check whether the app is running as Administrator under Windows 7.

Dim osVer As System.OperatingSystem = System.Environment.OSVersion
        If osVer.Version.Major > 6 Or (osVer.Version.Major = 6 And osVer.Version.Minor >= 2) Then

If the OS is Windows 8 or higher, the app then checks if it is running as Administrator.  On the first execution, this will be False – so the app gets restarted by starting a new process using the same assembly name.  The important thing to note here is the argument passed to the process – which is the path to the SQL Compact datbase.  This is necessary for when the app restarts in non-ClickOnce mode.

' Check if user is NOT admin
            If Not IsRunningAsAdministrator() Then

                ' Setting up start info of the new process of the same application
                Dim processStartInfo As New ProcessStartInfo(Assembly.GetEntryAssembly().CodeBase)

                ' Set the DataDirectory as an argument to the new process
                processStartInfo.Arguments = "" & Chr(34) & ApplicationDeployment.CurrentDeployment.DataDirectory & Chr(34) & ""
                
                ' Using operating shell and setting the ProcessStartInfo.Verb to &ldquo;runas&rdquo; will let it run as admin
                processStartInfo.UseShellExecute = True
                processStartInfo.Verb = "runas"

                ' Start the application as new process
                Process.Start(processStartInfo)

                blnCloseInstance = True
                Application.Current.Shutdown()
                
            End If

The boolean variable blnCloseInstance determines whether the current instance will be closed.  It only gets set to True when the current OS is Windows 8 and the app is not running as Administrator.

The current instance of the app is then shutdown.  As noted above, Application.Current.Shutdown() does not immediately exit the application – the thread still runs and code continues to execute.  Therefore, I have ensured the remaining code in the sub is only executed when blnCloseInstance  = False.  So on the first execution under Windows 8, this code will not be executed.

When the app restarts in non-ClickOnce mode, it will be running as Administrator, and blnCloseInstance will be False.  Therefore only this code will execute:

        If blnCloseInstance = False Then

            'set DataDirectory
            If IsRunningAsAdministrator() = True Then
                Dim arguments As String() = Environment.GetCommandLineArgs()
                Try
                    Dim datadir As String = arguments(1)
                    AppDomain.CurrentDomain.SetData("DataDirectory", datadir)
                Catch ex As Exception
                    'already running as administrator - app was not restarted
                End Try
            End If

            ' Do your startup tasks

            MyBase.OnStartup(e)

       End If

Being in non-ClickOnce mode, the app does not support references to System.Deployment.Application, and it will report an error trying to locate the database.  The code above sets the SQL Compact database location manually, using the argument passed in when the process was started.

How to Use Onedrive Features in a Windows Phone 8 Application

Gallery

Ray Yagubyan

Ray Yagubyan

Introduction

Microsoft provides a Windows Live Connect SDK which allows you to easily connect, upload and download files from and to OneDrive (previously called Skydrive).

Background

Before starting, we have to download the latest Live SDK for Windows, Windows Phone 8, and .NET from http://msdn.microsoft.com/en-us/live/ff621310.aspx.

Start Creating Your Own Windows Phone 8 App

After downloading the version 5.5, we are going to create a new Windows Phone 8 application called « SkyDrive Example » in which the user can register using his Microsoft Live Account in order to send the file to Skydrive.

Left click on «References under your project in the Solution Explorer Windows and add these essential references to your project:

Change the title of our application to be more significant and add «SignInButton » to Toolbox to make the authentification process.

So, you will find many components, so Write « SignInButton » in the filter zone to find this functionality as shown below:

Well done. Now, we want to create a Client Id in order to store the user’s authorization information to not sign in every time the app opens.

Go to https://account.live.com/developers/applications/create and we will enter the name of our application and accept the term of uses.

After doing that, you will find your own client ID as shown in the picture below:

Now, you need to add this code into the MainPage.xaml in order the add the signInButton and don’t forget to add your own client ID in Client Id Zone:

<StackPanel x:Name="TitlePanel" 
Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="SkyDrive Example" 
            Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="Upload a File" Margin="9,-7,0,0" 
            Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <Controls:SignInButton Name="loginButton" 
            Content="SignInButton" HorizontalAlignment="Left" 
            Margin="110,75,0,0" VerticalAlignment="Top" 
            Scopes="wl.signin wl.offline_access wl.skydrive_update" 
            SessionChanged="loginButton_SessionChanged" Visibility="Visible"/>
            <Button Content="Upload" HorizontalAlignment="Left" 
            Margin="110,256,0,0" VerticalAlignment="Top" 
            Width="211" Click="Upload_Click"/>

        </Grid>

Now, it is time for managing our MainPage.cs. So that we don’t want to register every time the application launches, we are going to add the code below starting with adding the essential libraries:

using Microsoft.Live;
using Microsoft.Live.Controls; 

Don’t forget to declare the LiveConnectClient.

private LiveConnectClient client;

Add the following code for the loginButton_SessionChanged helper method.

private void loginButton_SessionChanged(object sender, LiveConnectSessionChangedEventArgs e)
        {
           
        if (e != null && e.Status == LiveConnectSessionStatus.Connected)
        {
        //the session status is connected so we need to set this session status to client
        this.client = new LiveConnectClient(e.Session);        
        }
        else
        {    
        this.client = null;
        }

        }

If the user clicks on download, he will send a file called ‘sample.txt’ that contains ‘hello world’ to his Onedrive Account.

 private async void Upload_Click(object sender, RoutedEventArgs e)
        {
            if (client != null)
            {
                try
                {
                    string fileName = "sample.txt";
                    IsolatedStorageFile myIsolatedStorage = 
                    IsolatedStorageFile.GetUserStoreForApplication();//deletes the file if it already exists
                    if (myIsolatedStorage.FileExists(fileName))
                    {
                        myIsolatedStorage.DeleteFile(fileName);
                    }//now we use a StreamWriter to write inputBox.Text to the file and save it to IsolatedStorage
                    using (StreamWriter writeFile = new StreamWriter
                    (new IsolatedStorageFileStream(fileName, FileMode.Create, FileAccess.Write, myIsolatedStorage)))
                    {
                        writeFile.WriteLine("Hello world");
                        writeFile.Close();
                    }
                    IsolatedStorageFileStream isfs = myIsolatedStorage.OpenFile(fileName, FileMode.Open, FileAccess.Read);
                    var res = await client.UploadAsync("me/skydrive", fileName, isfs, OverwriteOption.Overwrite);
                }
                catch (Exception ex)
                {
                    MessageBox.Show("Error: " + ex.Message);
                }
            }
            else
            {
                MessageBox.Show("Please sign in with your Microsoft Account.");
            }
        }

Conclusion

Well done! We have seen together how to implement the OneDrive API in your Windows Phone 8 application and how to send a simple file to the OneDrive.

Windows Phone 8.1 Media Editing API

Gallery

Ray Yagubyan

Ray Yagubyan

Introduction

WP 8.1 is one of major update for Windows Phone. WP 8.1 has unveiled new APIs, new universal apps concept, inclusion of WinRT APIs, new UI controls and much more. One of new API introduced is media editing API.

In earlier days, we were using Movie Maker or other 3rd party desktop softwares to trim the video, to make a composition of multiple video, to apply various effects etc. We were required to have a computer with more memory & high-end processors, but now our smartphones are enough powerful to do such tasks. So let’s get a deep dive in new media editing API of Windows Phone 8.1.

Windows Media Editing API

Media editing API has MediaClip class, whose object represents a single media i.e. video, image or a solid color video clip. To perform any kind of editing operation on a media file, you must first create MediaClip object. MediaClip provides three static method to create object.

MediaClip.CreateFromFileAsync(IStorageFile file)

Which creates a MediaClip object from a video file.

MediaClip.CreateFromImageFileAsync(IStorageFile file, TimeSpan originalDuration)

Which creates a MediaClip object from an image file. The parameter “originalDuration” has use while we create composition of media files. It represents how long the image would be displayed in the composed video clip.

MediaClip.CreateFromColor(Color color, TimeSpan originalDuration)

Which creates a solid color video clip that displays a single color for a specified length of time. Solid color video clips are typically used to create an explicit gap between video segments.

After creating media clip, you will have object of particular file. Then you can apply effects as well as editing. Let’s go through one by one.

 

Trimming

Trimming the video is now just two steps process. MediaClip object has two properties (i) TrimTimeFromStart (ii) TrimTimeFromEnd. After creating MediaClip, you just have to set these two properties. After setting it, the MediaClip will have trimmed media. You can change later on the trimming times as many times as you want. We will see further how to render this MediaClip into a file.

// Create MediaClip object
MediaClip objMediaClip = await MediaClip.CreateFromFileAsync(file)

// Trim from objMediaClip everything after specified position (1 minute & 20 seconds)
objMediaClip.TrimTimeFromStart = new TimeSpan(0,1,20);

// Trim from objMediaClip everything after the specified position
objMediaClip.TrimTimeFromEnd = objMediaClip.OriginalDuration - new TimeSpan(0,2,9);

Slow motion & video stabilization effects

Microsoft has MFT (Media Foundation Transform) platform, through which one can developer C++ WinRT components. These can be used to apply various video playback & filter effects.

Windows.Media.Effects namespace is dedicated to pre-defined effects, which can be used to apply on any video file. One of effect is slow motion effects. Windows.Media.Effects has class SlowMotionEffectDefinition, which is used to apply slow motion effects to media. That class has one property called TimeStretchRate. It refers how slower the video will be. It takes double value of less than 1. Hence, if you set TimeStretchRate as 0.5, the video speed will be half of original. Setting its value greater than 1 throws exception. So don’t consider its use for fast motion video effects.

Now to apply the slow motion effect to any video, first you have to create its MediaClip object which is essential for media editing. MediaClip object has IList<IVideoEffectDefinition> property called VideoEffectDefinitions. So first all you have to create object of SlowMotionEffectDefinition and set TimeStretchRate property. Then add that object to VideoEffectDefinitions list. That’s it, your video is now in slow motion. We will see later on how to preview and how to save video with effects.

// Let's consider we have already MediaClip object.

// Create object of SlowMotionEffectDefinition
var objSlowMotionEffectDefinition = new SlowMotionEffectDefinition();

objSlowMotionEffectDefinition.TimeStretchRate = 0.6;

// Add effect object to MediaClip object's VideoEffectDefinitions list.
objMediaClip.VideoEffectDefinitions.Add(objSlowMotionEffectDefinition);

 

Similarly you can also add video stabilization effect. The VideoStabilization effect can help reduce shakiness in video. That effect resides in Windows.Media namespace. It has only class named VideoEffects, which is static class. To add this effect you don’t have to create an object. It has static string property VideoStabilization, which is activatable class ID of that video effect definition.

// Create object of VideoEffectDefinition
// Pass static string property VideoEffects.VideoStabilization as argument
var objVideoStabilization = new VideoEffectDefinition(VideoEffects .VideoStabilization);

// Add effect object to MediaClip object's VideoEffectDefinitions list.
objMediaClip.VideoEffectDefinitions.Add(objVideoStabilization);

Filter & other video effects

Nokia Imaging SDK provides a plethora of filters for image processing. Unfortunately, it doesn’t work for videos. We can solve this problem by developing C++ WinRT components using MFT. According to MSDN, Media Foundation transforms (MFTs) provide a generic model for processing media data. MFTs are used for decoders, encoders, and digital signal processors (DSPs). In short, anything that sits in the media pipleine between the media source and the media sink is an MFT.

MSDN has provided a sample with several effect source code, wiz grayscale, fisheye, pinch, warp and invert. The sample also shows how to apply these effects in playback. No words for saving after applying the effects. So to apply MSDN sample’s effect is quite similar to slow motion & video stabilization effect. You have to first add WinRT C++ components from MSDN sample to your own project and then you have to define activatable class IDs in WP 8.1 project’s manifest file. Add below given lines by opening manifest file in text editor before </Package>.

<Extensions>

    <Extension Category="windows.activatableClass.inProcessServer">

      <InProcessServer>

        <Path>GrayscaleTransform.dll</Path>

        <ActivatableClass ActivatableClassId="GrayscaleTransform.GrayscaleEffect" ThreadingModel="both"/>

      </InProcessServer>

    </Extension>

    <Extension Category="windows.activatableClass.inProcessServer">

      <InProcessServer>

        <Path>PolarTransform.dll</Path>

        <ActivatableClass ActivatableClassId="PolarTransform.PolarEffect" ThreadingModel="both"/>

      </InProcessServer>

    </Extension>

    <Extension Category="windows.activatableClass.inProcessServer">

      <InProcessServer>

        <Path>InvertTransform.dll</Path>

        <ActivatableClass ActivatableClassId="InvertTransform.InvertEffect" ThreadingModel="both"/>

      </InProcessServer>

    </Extension>

</Extensions>

 

Now each effect has its own activatable class ID, you have to first create object of VideoEffectDefinition class & pass that activatable class ID as argument in constructor. Finally add object of VideoEffectDefinition to MediaClip, that’s it.

// Create object of VideoEffectDefinition, pass acitvatable class ID as parameter

var objGrayScaleEffect = new VideoEffectDefinition("GrayscaleTransform.GrayscaleEffect");
objMediaClip.VideoEffectDefinitions.Add(objGrayScaleEffect);

var objInvertEffect = new VideoEffectDefinition("InvertTransform.InvertEffect");
objMediaClip.VideoEffectDefinitions.Add(objInvertEffect);

 

In MSDN sample fisheye, pinch & warp effect is defined in single WinRT componenet. To apply any of effect among them you need to pass configuration parameter, with activatable class. VideoEffectDefinition’s constructor has one more overload, which takes a key-value pair to configure the effect.

// First define configuration

PropertySet configuration = new PropertySet();
configuration.Add("effect", "Fisheye");
// configuration.Add("effect", "Warp");
// configuration.Add("effect", "Pinch");

// Create object of VideoEffectDefinition, pass acitvatable class ID and configuration as parameter
var objPolarEffect = new VideoEffectDefinition("PolarTransform.PolarEffect", configuration);

// Add effect object to MediaClip object's VideoEffectDefinitions list.
objMediaClip.VideoEffectDefinitions.Add(objPolarEffect);

Saving video

We have learned how to apply effects & trimming, now it’s turn to save the video. MediaEditing API has one more important class called MediaComposition. MediaClip represents a single media file, while MediaComposition is a group of MediaClip objects. It allows you manage all the MediaClip objects in composition.

Composing a video with multiple clips is complex task, it is better to have preview of it, isn’t it? MediaComposition provides a preview of itself. So to preview the video on which you have applied effects, you have to first add MediaClip object to MediaComposition and then generate preview stream. Set that stream as source to MediaElement. You can also set height & width of preview.

// Create object of MediaComposition class
var objMediaComposition = new MediaComposition();

// Add MediaClip to composition after applying effects
objMediaComposition.Clips.Add(objMediaClip);

// Generate preview stream & set as source to MediaElement
MediaElement.SetSource(objMediaComposition. GeneratePreviewMediaStreamSource(360, 240));

Now to save MediaClip you have to call its asynchronous method RenderToFileAsync(IStorageItem file).

// Create file using save picker or in local/temporary folder
var file = await ApplicationData.Current.LocalFolder.CreateFileAsync(&ldquo;MyVideo.mp4&rdquo;);

// Render MediaComposition to file.
await objMediaComposition.RenderToFileAsync(file);

 

That’s it, your dream of media editing on Windows Phone is accomplished. Now you can edit media files from your WP apps.

Make your Firefox Faster!!

Gallery

Ray Yagubyan

Ray Yagubyan

Introduction

You should see an immediate 10% to 40% increase in web page transfer speed, and faster opening of your tabbed windows!

Here’s How

  • Open the Firefox “config” page: click into the Firefox address location bar, and type about:config, press Enter.
  • The “Config” file will appear in the Firefox browser as a page with hundreds of lines of code in it. Now, we start by enabling some advanced tabbed options:
  • Locate the line browser.tabs.showSingleWindowModePrefs. (Tip: Press “b” on your keyboard to quick scroll).
  • Double click on browser.tabs.showSingleWindowModePrefs. This will set its toggle to “true“. Now your advanced and enhanced tabbing should be set.
    Note: In Firefox version 1.5, the command line is singlewindow.openintabs.
  • Next, we will increase the “pipeline” RAM ability for Firefox to accommodate more packet transfer. In the same config document, scroll down to the line that says network.http.pipelining. Double click this line to set it to “true“.
  • Lastly, we will increase the maximum pipeline requests to 100. Find the line that says network.http.pipelining.maxrequests. Double click on it, and a dialog box will pop up. Change the setting from 4 to 100.
  • No need to save this file. Simply close and restart Firefox.