HowTo: Use Silverlight-enabled website in Microsoft Edge Chromium

Let’s see how we can use a Silverlight-enabled website in Microsoft Edge Chromium

1) When we visit the site we’ll see a “Click now to install” button that used to download and install Silverlight, but that recently stopped working. Even before though, it wouldn’t work with Edge Chromium after installation, but show everytime the same download prompt

2) Press “…” button at top-right and select “Settings”

3) Pick Appearance at the left sidebar and scroll down on the right to “Internet Explrorer mode button”. If the switch to turn it on is disabled (grayed out), then press the link “allow sites to be reloaded in Internet Explorer mode”

4) This will take you to edge://settings/defaultBrowser, where you should change “Allow sites to be reloaded in Internet Explorer mode” from “Default” to “Allow”. After that press the “Restart” button shown.

5) Now if you go back to Appearance, you can turn on the “Internet Explorer mode button” option

6) Now if you go back to the website, you’ll see a button at top-right allowing you to open the page in Internet Explorer mode. The same action is also available on the “…” menu, but having it as a button too can prove handy.

7) If Microsoft hadn’t broken the direct Silverlight download links, then from this point you would be set and could use the respective website by first installing the Silverlight ActiveX control. But instead you’ll get:

8) Luckily archive.org has cached the last Silverlight releases (you can also check them on virustotal.com after downloading if you wish) and hope they will keep them, since they’re the most trustworthy alternative source for those installers (after Microsoft of course). Ignore the “Developer” versions and just get the x86 (Silverlight.exe) or x64 (Silverlight_x64.exe) version, depending on your Windows installation

9) Since they keep various versions archived, make sure you get the latest available one from there.

10) After the download completes you will be able to run the downloaded installer

11) When the installer starts, uncheck the options “Make Bing my search engine” and “Make MSN my homepage” if you don’t wish to do those actions. Then press Install now and after it downloads and installs, select “Enable Microsoft Update” (as recommended) and press Next and then Close.

12) Now if you visit the Silverlight-based website again you will see the Download Silverlight prompt, but if you press the “IE mode” button on the Edge toolbar (or do the same action from the “…” menu), you’ll see the Silverlight application loading (could show some loading progress animation there or some percentage – depends on the application).

13) You will see a popup open up where you can select that Edge should remember the current url and open it in Internet Explorer mode next time too (if you press Manage on that popup you can see those sites which are remembered for 30 days). Those sites can be managed at edge://settings/defaultBrowser

14) after that the website opens up in Internet Explorer mode with a small warning bar at the top that you can close with the [x] button on its right

15) And presto, you can see below ClipFlair Studio (http://studio.clipflair.net) working fine in Microsoft Edge Chromium via Internet Explorer mode and the Silverlight ActiveX Control.

Wish Microsoft wouldn’t make lives of users that hard. Not all sites are backed by multi-million dollar companies to be rewritten from scratch with HTML-based technology that still strives to support what Silverlight was offering with ease (btw, if you’d care to sponsor Clipflair Studio’s future evolutions, can donate via the respective button at https://github.com/zoomicon/clipflair)

In the case of ClipFlair, you’ll need to do the final steps of this process for these URLs:

http://studio.clipflair.net

http://gallery.clipflair.net/activity

http://gallery.clipflair.net/video

http://gallery.clipflair.net/photo

Workarround: IE11 changing download file extension to .zip

At ClipFlair Gallery, apart from opening a ClipFlair activity in ClipFlair Studio, downloading of an activity (.clipflair) file is also supported.

However, because the component serialization file format of ClipFlair Studio is XML plus media assets packed in .zip archive (with nesting allowed, where components and whole activities can be placed in other activities), Internet Explorer 11 (and probably other browsers too) was downloading .clipflair files as .zip (changing their file extension).

At first, I thought that occured because I was using MIME type “application/zip” at the IIS web server/site settings for that file extension. So then I tried to change it to “application/octet-stream” hoping that one would be treated as an “opaque” data stream.

However, eventually I ended up setting a custom MIME type “application/clipflair” for the file extension “.clipflair”, because even with “application/octet-stream” (as with the “application/zip” that I had before), IE11 was still saving the .clipflair file as .zip (obviously detecting the zip content in the download stream).

<?xml version=”1.0″?>
<configuration>

<system.webServer>

<directoryBrowse enabled=”true” showFlags=”Size, Extension”/>

<defaultDocument>
<files>
<clear/>
<add value=”index.html”/>
<add value=”Default.aspx”/>
<add value=”Default.html”/>
</files>
</defaultDocument>

<caching>
<profiles>
<add extension=”.log”
policy=”CacheUntilChange”
kernelCachePolicy=”CacheUntilChange”/>
</profiles>
</caching>

<staticContent>
<mimeMap fileExtension=”.log” mimeType=”text/plain”/>
<mimeMap fileExtension=”.clipflair” mimeType=”application/clipflair”/>
<mimeMap fileExtension=”.dzi” mimeType=”text/xml”/>
<mimeMap fileExtension=”.dzc” mimeType=”text/xml”/>
<mimeMap fileExtension=”.cxml” mimeType=”text/xml”/>
</staticContent>

</system.webServer>

<system.web>
<compilation debug=”true” targetFramework=”4.0.3″/>
</system.web>

</configuration>

HowTo: Copy effective-computed CSS style for specific HTML paragraph

I’m in the process of setting up a temporary landing page for the trafilm project, where I need apart from showing the trafilm logo to also show some text description about the project, till I set up an instance of MonoX Social CMS for it, like the one in ClipFlair’s Community website (ClipFlair Social).

Since ClipFlair Social has some nice text styling, I decided to borrow the style of one of its home page paragraphs, using Firefox web browser’s developer tools (accessible via F12 key).

Being at the Inspector tab of the dev tools (which is the default when they first open), using the “Pick element” tool (first one on the dev tools pane’s toolbar on the left), I select the paragraph that looks nicely styled and I go to the Computed tab at the Style view, then press CTR+A to select all computed style CSS declarations for that paragraph element and press CTRL+C or right click and select Copy to copy them to the clipboard.

If pasted (CTRL+V) in some text editor like Window’s Notepad that looks like a big ugly line, since they contain Unix-style line-endings, that is LF (linefeed) and not Windows-style ones (CRLF, Carriage Return + Line Feed), but editors like Wordpad or Notepad++ can show them nicely and even convert line endings from Unix to Windows and vice-versa if you wish so (e.g. in Notepad++ the respective actions are at Edit / EOL Conversion menu).

So, this is the copied Computed CSS style for that paragraph:

border-bottom-color: #333;
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color: #333;
border-left-style: none;
border-left-width: 0px;
border-right-color: #333;
border-right-style: none;
border-right-width: 0px;
border-top-color: #333;
border-top-style: none;
border-top-width: 0px;
color: #333;
cursor: default;
font-family: "Open Sans",sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
margin-bottom: 20px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;

As you can see, it has lots of stuff that isn’t needed, unless you want to be sure your style doesn’t get affected by style of parent elements. In my case I decided to trim it down a bit:

color: #333;
font-family: "Open Sans",sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
margin-bottom: 20px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;

Adding around the text above (which is represented by the CSS comment /* … */ below) a CSS selector to wrap those declarations in order to make a proper CSS rule-set:

p {

/* … */

}

and passing to CSS LINT tool to help us clean up the CSS we get no errors, but several warnings:

For example, as explained at W3Schools.com, in CSS one can use shorthand margin and padding properties:

The margin property is a shorthand property for the following individual margin properties:

• margin-top
• margin-right
• margin-bottom
• margin-left

CSS has properties for specifying the padding for each side of an element:

• padding-top
• padding-right
• padding-bottom
• padding-left

…so one wonders why Firefox Dev Tools don’t spit those out with that order and give them in bottom, left, right and top order instead.

Also instead of 0px, one is suggested to always write 0 instead, since zero will always be zero irrespective of the CSS units used for it (at least for the currently available CSS unit systems that is). This is merely to save in bandwidth I think, since 0px is better, suggesting to anyone modifying this value in the future they’d better use “px” [pixels] instead of say “pt” [points]).

So we clean up this CSS into (pay attention to the order of values in margin and padding shorthand declarations, which is top, right, bottom, left, that is clockwise starting from the top side of the HTML elements targeted via the CSS rule selector, which is a paragram – p – in our case):

p {

   color: #333;
  font-family: "Open Sans",sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 24px;
  margin: 0 0 20px 0;
  padding: 0 0 10px 0;

}

Pasting at CSS LINT online tool again we get no warnings anymore (apart from no errors):

One might also remove the redundant space chars at the end of each line that Firefox places when copy-pasting the style declarations. Notepad++ can do it via Edit / Blank Operations / Trim Trailing Space menu command:

Suggestion: Visual Studio should offer to implement callbacks

I type-in new PropertyMetadata(OnCenterXPropertyChanged) but since I haven’t yet implemented On…, I get a suggestion by the IDE to implement it but it suggests to add field, property or read-only field, not to implement the callback for me with the given name. It can find the method signature needed from the delegate that PropertyMetadata (one of its overloaded versions) expects.

It came to me while I was trying to implement Silverlight’s CompositeTransform for WPF:

public static readonly DependencyProperty CenterXProperty = 
  DependencyProperty.Register("CenterX", typeof(double), 
    typeof(CompositeTransform), 
    new PropertyMetadata(OnCenterXPropertyChanged));

for the Compatibility library I maintain at http://github.com/zoomicon/Compatibility. I have used that library a lot in ClipFlair to maintain a common C# source and XAML between Silverlight and WPF projects (I do code sharing between projects via linked files).

Can vote for this suggestion at:

http://visualstudio.uservoice.com/forums/121579-visual-studio-2015/suggestions/10906626-offer-to-implement-callbacks

Structuring (physical) source and (virtual) solution folders for portability

Copying here those comments of mine at a discussion on the GraphX project:

https://github.com/panthernet/GraphX/issues/21

describing the source code (physical) folder structure and the Visual Studio solution (virtual) folder structure I’ve been using at ClipFlair and other multi-platform projects.

——

looking at the folders/projects/libraries/namespaces naming, I think it would be more appropriate to add the platform at the end of the name, say GraphX.somePart.PCL, GraphX.somePart.UWA (=Universal Windows Application model [aka Win10]) etc. Not sure how easy it will be though for contributors to merge pending changes via GitHub if you do such drastic changes (I’m still struggling with Git myself, prefer Mercurial)

…

Speaking of moving the platform to the end of the name (e.g. GraphX.Controls.WPF, GraphX.Controls.SL5 etc.), to do it on the folder names (apart from doing at the source code for packages, target assemblies etc.), I think one has to use some Version Control command to "move" (Git should have something like that) the files to the new folder, else other contributors may have issue merging their changes.

Despite the trouble to do it, I think it is better for the long run. Also, all GraphX.SomePart.* subfolders could then be grouped in a GraphX.SomePart folder as subfolders where a Source or Common subfolder would also exists that has all the common code those platform-specific versions of GraphX.SomePart share (via linked files to ..\Common\SomeFile, ..\Common\SomeFolder\SomeFile and ..\Common\SomeOtherFolder\SomeFile etc.)

This is the scheme I’ve been using (and I’m very satisfied with) at http://clipflair.codeplex.com and other projects (e.g. at the AmnesiaOfWho game [http://facebook.com/AmnesiaOfWho] that has separate versions for SL5, WP7 and WP8 and WPF version on the works, plus WRT (WinRT) and UWA [Universal Windows App] too coming in the near future, with all code and most XAML shared via linked files and UserControl[s])

…

I meant I’d expect GraphX.Common folder with GraphX.Common.PCL in it and GraphX.Common.WP7 etc. versions for example also in that folder since PCL is usually set at WP8 level. This is just an example.

What I’m saying is that the platform name is the last part of the specialization chain, so logically GraphX comes first then say comes Controls then comes WPF, SL5, WP8 etc. in the folder name.

Also would have 3 parent folders Controls, Common and Logic. The last two would just contain the respective .PCL subfolder for now, but I can contribute subfolders for specific platforms too, esp for those the common PCL profile doesn’t cover. Source would be at Controls\Source, Common\Source, Logic\Source and respective platform specific projects (even the pcl projects) would use linked files

aka

GraphX (contains GraphX.sln)

–\Controls
—-\Source
—-\GraphX.Controls.WP7
—-\GraphX.Controls.WP8
—-\GraphX.Controls.SL5 (contains GraphX.Controls.SL5.csproj)
—-\GraphX.Controls.WPF (contains GraphX.Controls.WPF.csproj)
—-\GraphX.Controls.WIN8
—-\GraphX.Controls.UWA
—- … (more platform specific versions)

–\Common
—-\Source
—-\GraphX.Common.PCL
—- … (platform specific versions, esp. those not covered by the settings chosen at the PCL)

–\Logic
—-\Source
—-\GraphX.Logic.PCL
—- … (platform specific versions, esp. those not covered by the settings chosen at the PCL)

The same structure would also be used at examples to cover the potential of porting some of them to more platforms:

–\Examples
—-\SomeExample
——\Source
——\SomeExample.WPF
——\SomeExample.SL5
—-\SomeOtherExample
——\Source
——\SomeOtherExample.WIN8
——\SomeOtherExample.UWA
etc.

Of course common code at each folder is at the Source subfolder of that folder, shared using linked files (e.g. at \Examples\SomeExample\Source) and platform specific code is inside the respective projects (e.g. at \Examples\SomeExample\SomeExample.WPF)

Similarly the GraphX.sln would contain solution folders "Controls", "Common" and "Examples", though it could also contain separate solution (virtual) folders per platform that have each one of them "Controls", "Common" and "Examples" in them. That is the solution’s folder structure is organized per-platform in such a case. This is mostly useful if you want to focus on a specific platform each time when developing. However since the solution folders are virtual, one could even go as far as having two solutions, one with the same structure as the filesystem folders I suggest and one with a per-platform/target structure.

I follow the per-platform virtual solution folders style at ClipFlair.sln in http://clipflair.codeplex.com, while the real folders are structured as I describe above (where each module has its own physical subfolders for the various platforms). In fact some module subfolders there (say Client\ZUI\ColorChooser) contain their own extra solution file when I want to be able to focus just on a certain module. That solution just includes the respective ColorChooser.WPF, ColorChooser.SL5 etc. subprojects from respective subfolders). Such solutions also contain virtual WPF, Silverlight etc. subfolders that has as children apart from the respective platform-specific project (say ColorChooser.WPF) any other platform-specific projects needed (e.g. ….\Helpers\Utils\Utils.WPF\Utils.WPF.csproj etc.) by that module to compile.

…

Speaking of Xamarin, adding support for that too could follow the same pattern as described above (PCL where possible and platform-specific versions for .XamarinIOS, .XamarinAndroid etc. where needed)

Source code analyzers for .NET porting & Portable Class Libraries (PCL)

• .NET Portability Analyzer extension
  https://visualstudiogallery.msdn.microsoft.com/1177943e-cfb7-4822-a8a6-e56c7905292b
• API Portability Analyzer – Alpha (command-line version)
  http://www.microsoft.com/en-us/download/details.aspx?id=42678
• PLIB API XLS
  https://onedrive.live.com/view.aspx?resid=8A7FB4A4B32FB2C9!180&app=Excel&authkey=!AHaBmLAhQ49YCI0
• Xamarin Scanner (How Mobile is your .NET code?)
  http://scan.xamarin.com/

HowTo: Use MEF to implement import/export etc. plugin architecture

Copying here my comment at a discussion on the GraphX project:

https://github.com/panthernet/GraphX/pull/15

in case it helps somebody in using MEF (Managed Extensibility Framework) in their software’s architecture

——–

Using static classes instead of interfaces can mean though that you need to use reflection to call them (e.g. if you wan to have a list of export plugins).

Instead can keep interfaces and make use of MEF to locate import/export and other plugins (you can have some class attribute there that mark the class as a GraphXExporter and MEF can be asked then to give you interface instances from classes that have that attribute.)

see usage at
http://clipflair.codeplex.com/SourceControl/latest#Client/ClipFlair.Windows/ClipFlair.Windows.Map/MapWindowFactory.cs

//Project: ClipFlair (http://ClipFlair.codeplex.com)
//Filename: MapWindowFactory.cs
//Version: 20140318

using System.ComponentModel.Composition;

namespace ClipFlair.Windows.Map
{

  //Supported views
  [Export("ClipFlair.Windows.Views.MapView", typeof(IWindowFactory))]
  //MEF creation policy
  [PartCreationPolicy(CreationPolicy.Shared)]
  public class MapWindowFactory : IWindowFactory
  {
    public BaseWindow CreateWindow()
    {
      return new MapWindow();
    }
  }

}

and at
http://clipflair.codeplex.com/SourceControl/latest#Client/ClipFlair.Windows/ClipFlair.Windows.Image/ImageWindowFactory.cs

//Project: ClipFlair (http://ClipFlair.codeplex.com)
//Filename: ImageWindowFactory.cs
//Version: 20140616

using System.ComponentModel.Composition;
using System.IO;

namespace ClipFlair.Windows.Image
{

  //Supported file extensions
  [Export(".PNG", typeof(IFileWindowFactory))]
  [Export(".JPG", typeof(IFileWindowFactory))]
  //Supported views
  [Export("ClipFlair.Windows.Views.ImageView", typeof(IWindowFactory))]
  //MEF creation Policy
  [PartCreationPolicy(CreationPolicy.Shared)]
  public class ImageWindowFactory : IFileWindowFactory
  {

    public const string LOAD_FILTER = "Image files (*.png, *.jpg)|*.png;*.jpg";

    public static string[] SUPPORTED_FILE_EXTENSIONS = new string[] { ".PNG", ".JPG" };

    public string[] SupportedFileExtensions()
    {
      return SUPPORTED_FILE_EXTENSIONS;
    }

    public BaseWindow CreateWindow()
    {
      return new ImageWindow();
    }

  }

}

then at
http://clipflair.codeplex.com/SourceControl/latest#Client/ClipFlair.Windows/ClipFlair.Windows.Base/Source/View/BaseWindow.xaml.cs

to get the first plugin that supports some contract (I get that contract name from the serialization file [using DataContracts]) for a loaded view, or that supports some file extension for a file dropped inside a component, I do:

    protected static IWindowFactory GetWindowFactory(string contract)
    {
      Lazy<IWindowFactory> win = mefContainer.GetExports<IWindowFactory>(contract).FirstOrDefault();
      if (win == null)
        throw new Exception(BaseWindowStrings.msgUnknownViewType + contract);
      else
        return win.Value;
    }

    protected static IFileWindowFactory GetFileWindowFactory(string contract)
    {
      Lazy<IFileWindowFactory> win = mefContainer.GetExports<IFileWindowFactory>(contract).FirstOrDefault();
      if (win != null)
        return win.Value;
      else
        return null;
    }

Fix: Enable Silverlight & other NPAPI plugins at Chrome web browser

Below I’m elaborating a bit more my related tweet:

#Fix #Silverlight & other #NPAPI (Netscape #Plugin API) at #Chrome Go to chrome://flags/#enable-npapi and click Enable, Close/Reopen browser

— George Birbilis (@Zoomicon) May 13, 2015

 

Showing below the easiest of the suggested solutions that I found in this page

 

At Chrome’s address bar you type:

chrome://flags/#enable-npapi

and press the ENTER key on the keyboard

Then you should see a page Chrome generates to change some of its internal settings. When NPAPI is disabled the respective entry should appear in grey background like below.

Press Enable at the setting “Enable NPAPI Mac, Windows”

After enabling NPAPI the page should look like this (with the respective setting in white background):

After enabling the NPAPI option, close the Chrome webbrowser and reopen it.

 

You can then test if Silverlight is working by visiting for example

http://studio.clipflair.net (ClipFlair Studio Foreign language learning application) or http://zoomicon.com/amnesiaofwho (Amnesia of Who memory game)

 

Btw, Chrome also is available as a Windows 8 app, in which mode it probably doesn’t support plugins at all, so if you’re running it on Windows 8 and see it always full screen inside a scrolling container, use the Chrome menu from the top-right of its window and select the option there to switch to the desktop version of Chrome instead (should say "Relaunch Chrome in desktop mode")

HowTo: Open page from Internet Explorer (Metro) app into desktop IE

The Windows 8/8.1 app version of Internet Explorer is also known as IE Metro because of the “Metro” codename (inspired by navigation signs in public transport] of the Modern UI design language promoted by Microsoft).

However that version isn’t the full Internet Explorer, in that it is unfortunately not supporting extensibility via plugins in the form of ActiveX controls as the classic (desktop version) of IE. It is only embedding the Flash player engine directly in its codebase, but not Microsoft’s own Rich Internet Application (RIA) rendering engine aka Silverlight, nor Unity or other VRML/X3D, QuickTime/QuickTimeVR etc. plugins.

Browser pages cannot detect the difference between running IE on the desktop or as an app, there is however a workarround for webpage authors or webadmins to force the app version of IE to show a prompt to the user that allows the opening of a page in the desktop version of Internet Explorer. There is also a way for System Administrators to set specific sites to open in the desktop version of IE without the user seeing such prompt.

At https://msdn.microsoft.com/en-us/library/ie/hh968248.aspx, Microsoft mentions:

As a web developer, you can enable the requiresActiveX feature switch either by using this HTTP header:

X-UA-Compatible: requiresActiveX=true

Or by using this meta element on each affected webpage:

<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true"/>

 

I just added the meta tag inside the <head>…</head> block of the Amnesia of Who web version that uses Silverlight and here is how it shows in the IE Metro version (note that Silverlight IS installed in that Windows 8.1 machine, it’s just that it’s not available in that browser, that’s why the Silverlight installation prompt is also shown):

When the user presses the default button “Open on the desktop”, the OS switches to classic desktop mode and shows an Internet Explorer window with the Silverlight application starting fine (or if Silverlight is not installed it will prompt and allow the user to install it – note that Silverlight ActiveX control’s installation doesn’t need administrator permissions since that installation doesn’t affect other users, nor requires any elevated rights in the system to work).

 

I hope that Microsoft, apart from keeping on supporting this workarround, will do a clever move this time and embed Silverlight too (apart from the Flash engine that was in IE Metro) in the Spartan browser that it prepares as the Windows 10 default touch browser. And why not, provide some extensibility method for it, since HTML5 cannot become a huge, impossible to implement beast, that covers every future conceived functionality for the web.

Gotcha: MarkerReached event of MediaElement returns new Markers

I just checked in the implementation code for a new feature for ClipFlair Studio’s Captions/Revoicing component:

When playing back recorded (or loaded from a WAV or MP3 file) audio for a caption/revoicing entry, the playback is now limited to the duration of the respective caption, (End-Start) time that is (btw that component has a duration column too that is hidden by default and can be shown by flipping it with the gear button on its titlebar and selecting the respective option to show the column).

The original audio is not affected and is stored in whole inside the saved state of the component/activity, so that you can adjust the caption entries timerange at any time to fit all or part of that recorded audio entry if you wish.

Will see into adding an “Limit playback” option to the backpanel of that component (it will default to true/checked) for any ClipFlair activities that don’t use the Start/End/Duration columns (e.g. if some activity just wants a grid of Captions and Audio entries for practicing and maybe for comparing to audio samples provided by the activity author or teacher at the optional “Comments (Audio)” column).

While implementing this feature, there were some “gotchas” that caused me some headache to spot:

1) When MediaOpened event is called by the MediaElement control, the Markers collection has just been reset and you need at that point to add your TimelineMediaMarker that will notify you when the playback limit point has been reached to stop the playback. In the case above this event is called after recording some audio or loading some WAV or MP3 audio file at an AudioRecorderControl (one is used at each row of the captions grid)

2) One shouldn’t remove an added marker at MediaEnded or MediaFailed events. This is since those will fire at each revoicing entry playback, whereas the MediaOpened while only occur once when the Audio property is populated at the AudioRecorderControl. As I mention above, MediaElement clears the Markers collection every time new content is loaded to it, so we need not worry about removing the marker we had added before.

3) Maybe the least obvious issue and the one that caused me most of headache to spot was that the MediaElement’s MarkerReached event gets back a MediaMarker that isn’t the same Marker instance as the one you had added to the Markers collection. So you have to use the Text property of the marker when you create it and then compare with the text from the one you got in the event to see if they are equal strings (btw, when C# compares strings it does it by content even if you use == instead of Equals method, unlike Java, where you shouldn’t use == to compare strings)