MEDIAPORTAL - free MediaCenter HTPC Software - Designing an opensource WPF engine

Main Menu

Supporting

If you like MediaPortal please support it by making a small donation:

Login Form

Administrator

Localisations

MediaPortal Deutsch
MediaPortal Française

Awards

Home

Blogs

Designing an opensource WPF engine

Written by Frodo, on 02-01-2008

If you have read the news on the homepage you know i'm busy implementing an opensource WPF engine, which we will use in MediaPortal

Since the post i've got lots of questions, so i'll try to answer some of those here and give some more insight in the current state of the WPF engine

click here to read the full article

q1:Why implement an opensource WPF engine, and not use WPF itself ?
The reason i'm implementing my own WPF engine is that we simply run into problems which we cannot fix since Microsoft's WPF is closed source

q2:Are you reverse engineering WPF using tools like reflector ?
No. Microsofts code is copyright so we cannot use reflector to 'copy' their code. Besides that, if you use reflector you will see that all the interesting WPF parts are implemented in native code (milcore.dll) so its impossible to read let alone copy those parts

q3:How compatible will the new WPF engine be with Microsofts xaml ?
We're aiming at 100% compatibility. At the moment our WPF engine can read & parse files which are 99% the same as Microsofts xaml
By aiming at 100% people will be able to use all xaml tools available like for example Microsoft Expression blend

q4:Will the new WPF engine support everything of WPF ?
Probably not. The reason is that we dont need all the stuff WPF provides in MediaPortal. But since its opensource we can always add 'missing' things later on.

Current state:

The last couple of weeks we made really nice progress. We're now at a point where we can parse & render most xaml files.
Things like events, storyboards, resources, shapes, buttons etc all work
Our next big tasks consist of adding (data)binding support and some more advanced controls like the listview & treeview

Here's a screenshot which shows the use of:
- styled buttons,
- panels like StackPanel, GridPanel and Canvas
- RadialGradientBrush & LinearGradientBrush
- Storyboard & events & triggers
- Shapes like Path, Polygon, Rectangle and Ellipse

Screenshot:

Since this is a screenshot, you wont see the animations :-(

And if you are interested in the .xaml files used to render this you can take a look in SVN here

XAML used:

The xaml file: test.xml
The resource file xamlstyle.xml

the main xaml file looks like:
<?xml version="1.0" encoding="utf-8"?>
<MyXaml >
<StackPanel Width="260" Background="Yellow">
    <StackPanel.Resources>
      <ResourceDictionary Source="XamlStyle.xml"/>
    </StackPanel.Resources>
    <Button Name="btn1" Width="200" Height="32"
        Style="{StaticResource MpButton}">hallo</Button>
    <Grid Width="128" Height="128">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
      </Grid.RowDefinitions>
      <Button Grid.Row="0" Grid.Column="0"
           Style="{StaticResource MpArrowButtonLeft}"/>
      <Button Grid.Row="0" Grid.Column="1"
           Style="{StaticResource MpArrowButtonRight}"/>
      <Button Grid.Row="1" Grid.Column="0"
           Style="{StaticResource MpArrowButtonDown}"/>
      <Button Grid.Row="1" Grid.Column="1"
   Style="{StaticResource MpArrowButtonUp}"/>
    </Grid>
    <CheckBox Width="200" Height="32" Style="{StaticResource MpCheckBox}"/>
    <CheckBox Width="200" Height="32" Style="{StaticResource MpRadioButton}"/>
    <Button Width="200" Height="32" Style="{StaticResource MpCloseButton}"/>
    <CheckBox Width="32" Height="32" Style="{StaticResource MpPlusMinButton}"/>
    <Rectangle Width="200" Height="32" Margin="0,10,0,10"
          StrokeThickness="2" Stroke="Red" Fill="Blue"/>
    <Ellipse Width="200" Height="32" Margin="0,10,0,10"
          StrokeThickness="2" Stroke="Red" Fill="Blue" />
    <Polygon Stroke="Red" Fill="Blue" Margin="0,10,0,10"
          StrokeThickness="2" Points="0,0 30,0 60,30 60,60 30,60 0,30"/>
    <Path Stroke="Red" Stretch="Fill" Fill="Blue" StrokeThickness="2"
   Width="41" Height="25" Data="M21.515036,0.10254623
   C33.858738,0.47503549   41.915491,7.5945522 43.263354,18.631958
   36.818281,25.975738 4.5835854,25.755277 0.75664204,18.690969
   1.592944,8.1747201 9.8216492,0.58923798 21.515036,0.10254623 z"/>
</StackPanel>
</MyXaml>

Testing yourself:

If you want you can play with the current WPF engine.
Todo this you will need to get the sourcecode from SVN and compile MP-II yourself. So.. this is for developers only

The WPF engine is disabled by default since its work-in-progress.
To enable it, open up skinengine/WindowManagement/window.cs
and un-comment the first line so it looks like:
#define TESTXAML

Now compile MP-II (make sure to set the platform from Any Cpu to x86)
and run it.. Mp-II will now open & render the skin/default/test.xml
which will show the above picture.

Frodo

Quote this article in website

Users' Comments (0)