Click here to Skip to main content
15,031,937 members
Articles / Desktop Programming / WPF
Posted 19 Jul 2015


1 bookmarked

XAML tutorial for Manufaktura Controls API

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
19 Jul 2015CPOL2 min read
Overview of music notation library

This article appears in the Third Party Products and Tools section. Articles in this section are for the members only and must not be used to promote or advertise products in any way, shape or form. Please report any spam or advertising.


In this tutorial we will discuss the music notation library Manufaktura Controls (  We will focus on the score object model, data import from MusicXML and visualisation of score with XAML-based technologies (WPF, Silverlight, Silverlight for Windows Phone, Windows Runtime). 

Using the code

Create a new WPF project in Visual Studio. Then add these four libraries as references: Manufaktura.Controls, Manufaktura.Controls.WPF, Manufaktura.Music i Manufaktura.Model. The first library contains the score object model,MusicXml parser and multi-platform score drawing engine.The second library contains a WPF implementation of score rendering engine. Last two are base class libraries. In the next step we will create a test data model. Let us create a class named TestDataViewModel:

public class TestDataViewModel : ViewModel
        private Score data;

        public Score Data
            get { return data;  }
            set { data = value; OnPropertyChanged(() => Data); }

        public void LoadTestData()


Base class ViewModel comes from namespace Manufaktura.Model.MVVM and contains a default implementation of OnPropertyChanged method, which informs the view about changes in model. Data property stores the score model. In LoadTestData method we are going to create a sample model:

public void LoadTestData()
            var score = Score.CreateOneStaffScore(Clef.Treble, new MajorScale(Step.C, false));
            score.FirstStaff.Elements.Add(new Note(Pitch.C5, RhythmicDuration.Quarter));
            score.FirstStaff.Elements.Add(new Note(Pitch.B4, RhythmicDuration.Quarter));
            score.FirstStaff.Elements.Add(new Note(Pitch.C5, RhythmicDuration.Half));
            score.FirstStaff.Elements.Add(new Barline());            
Data = score;

Now edit MainWindow.xaml file.In order to add a score viewer control we have to add the following line:

<ManufakturaControls:NoteViewer ScoreSource="{Binding Data}" />

ScoreSource property is bound to viewmodel’s Data property. We also have to register the proper namespace . Add the following attribute to Window tag:


The resulting file might look like that:

<Window x:Class="Manufaktura.WPFControlsExample.MainWindow"
        Title="MainWindow" Height="350" Width="525">
            <ManufakturaControls:NoteViewer x:Name="noteViewer1" HorizontalAlignment="Stretch" Margin="10,10,0,0" VerticalAlignment="Top" ScoreSource="{Binding Data}"/>

We also have to set the viewmodel as form’s data context. Add this in the constructor of MainWIndow class:


public MainWindow()
            var viewModel = new TestDataViewModel();
            DataContext = viewModel;


Now we can run our application and see the result. We’ve just create our first score. ;) Now we are going to add a few staves to our score. Add this in LoadTestData method:


var secondStaff = new Staff();
            secondStaff.Elements.Add(new Key(0));
            secondStaff.Elements.Add(new Note(Pitch.G4, RhythmicDuration.Whole));
            secondStaff.Elements.Add(new Barline());

            score.Staves.Add(new Staff());
            score.ThirdStaff.Elements.Add(new Key(0));
            score.ThirdStaff.Elements.Add(new Note(Pitch.D4, RhythmicDuration.Half));
            score.ThirdStaff.Elements.Add(new Note(Pitch.E4, RhythmicDuration.Half));
            score.ThirdStaff.Elements.Add(new Barline());

            score.Staves.Add(new Staff());
            score.Staves[3].Elements.Add(Clef.Bass);    //0-based index
            score.Staves[3].Elements.Add(new Key(0));
            score.Staves[3].Elements.Add(new Note(Pitch.G3, RhythmicDuration.Half));
            score.Staves[3].Elements.Add(new Note(Pitch.C3, RhythmicDuration.Half));
            score.Staves[3].Elements.Add(new Barline());

Note that there are many different ways of adding symbols to staves. Our next step will be MusicXml import:


var parser = new MusicXmlParser();
            score = parser.Parse(XDocument.Load(@"D:\Dokumenty\Manufaktura programów\Dane do bazy\2014-08-01 DWOK tom 1 numery 1 i 5\DWOK tom 1, s. 3, nr 1 a.xml"));
Data = score;

Let's add another parameter to our control: IsPanoramaMode="False". This parameter causes control to include system breaks. Effect will look like that:

In the next tutorial we will learn how to use Manufaktura Controls in ASP.NET MVC.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Poland Poland
I graduated from Adam Mickiewicz University in Poznań where I completed a MA degree in computer science (MA thesis: Analysis of Sound of Viola da Gamba and Human Voice and an Attempt of Comparison of Their Timbres Using Various Techniques of Digital Signal Analysis) and a bachelor degree in musicology (BA thesis: Continuity and Transitions in European Music Theory Illustrated by the Example of 3rd part of Zarlino's Institutioni Harmoniche and Bernhard's Tractatus Compositionis Augmentatus). I also graduated from a solo singing class in Fryderyk Chopin Musical School in Poznań. I'm a self-taught composer and a member of informal international group Vox Saeculorum, gathering composers, which common goal is to revive the old (mainly baroque) styles and composing traditions in contemporary written music. I'm the annual participant of International Summer School of Early Music in Lidzbark Warmiński.

Comments and Discussions

QuestionUserControl View does not Bind staff, niether does Shellview using MVVC Approach Pin
Member 1479958112-Apr-20 0:10
MemberMember 1479958112-Apr-20 0:10 
QuestionChant notation Pin
Nick Hallas20-Jul-15 1:41
MemberNick Hallas20-Jul-15 1:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.