Download XamlChessBoard_X11_32.zip Mono solution including full source and executable
Download XamlChessBoard_X11_64.zip Mono solution including full source and executable
Download XamlChessBoard_Win10.zip Visual Studio 2015 solution including full source and executable
Introduction
This article is a case study, how to write a MVVM (Model View ViewModel) design pattern based X11/Windows (cross platform) application (utilizing the DrawingBrush including offset and repeating tiles) with XAML using the Roma Widget Set (Xrw). The Roma Widget Set is a zero dependency GUI application framework for X11 (it requires only assemblies of the free Mono standard installation and libraries of the free X11 distribution; it doesn't particularly require GNOME, KDE or commercial libraries) and is implemented entirely in C#.
This article continues the works Writing a XAML dialog application for X11, Writing a XAML ribbon application for X11, Writing a XAML application for X11 with massive data binding and zero code, Writing a XAML calculator application for X11, Writing a XAML application with geometry objects (shapes) for X11, Writing a XAML application for X11 with UserControls, Writing a XAML 7 segment LCD display UserControl for X11 and Windows and Writing a XAML Minesweeper game for X11 and Windows. As far as i know, this (utilizing the Xrw) is the first attempt to use XAML for X11 application development after the abandonment of Moonlight.
Neither the Roma Widget Set nor the XAML implementation are complete. This sample application is intended as a more complex 'proof of concept' and checks out if and how it is possible bo create MVVM design pattern based X11/Windows (cross platform) application with XAML.
Since this ninth attempt to use XAML for a X11 application development has been successful, other articles about XAML using the Roma Widget Set on X11 will follow centenly.
Background
The Motivation and the general Concept to use XAML for X11 application development are already explained in the Writing a XAML dialog application for X11 article.
Some major enhancements (System.Windows.Media.GeometryGroup, System.Windows.Media.DrawingBrush and X11.X11DrawingBrushInfo) have been made and some bugs of the Xrw XAML wrapper have been fixed for this demonstration application after the release of Xrw version 0.9.
Focus
Since the previous eight articles "Writing a XAML ..." already demonstrated several MVVM techniques, this article shall demonstrate that with XAML for X11
- a windows compatible DrawingBrush can create easily a nice looking chess board utilizing drawing offset, repeating tiles and color gradient.
Using the code
The sample application was written with Mono Develop 2.4.1 for Mono 2.8.1 on OPEN SUSE 11.3 Linux 32 bit EN and GNOME desktop. Neither the port to any older nor to any newer version should be a problem. The sample application's solution is build with MONO/.NET 3.5. It consists of two projects (the complete sources are provided for download):
- XamlChessBoard contains the source code of the sample application.
- XamlPreprocessor contains the source code of the XAML preprocessor.
The sample application is also tested with Mono Develop 3.0.6 for Mono 3.0.4 on OPEN SUSE 12.3 Linux 64 bit DE and GNOME desktop, IceWM, TWM und Xfce.
The only difference between the 32 bit and the 64 bit solution is the definition of some X11 specific data types, as already described in the Programming Xlib with Mono develop -Part 1: Low level (proof of concept) article.
The Xlib/X11 window handling is based on the X11Wrapper assembly version 1.0 (a library version 1.0 release candidate is included in this solution), that defines the function prototypes, structures and types for Xlib/X11 calls to the libX11.so. This assembly has been developed for the Programming Xlib with Mono Develop - Part 1: Low-level (proof of concept) project and has been advanced during the Programming the Roma Widget Set (C# X11) - a zero dependency GUI application framework - Basics project.
The GUI framework is based on the Xrw assembly version 1.0 (a library version 1.0 release candidate is included in this solution), that defines the widgets/gadgets and its wrapper classes used within the XAML code (that should be as near to the Microsoft® original as reasonable). This assembly has been developed during the Programming the Roma Widget Set (C# X11) - a zero dependency GUI application framework - Basics project.
The sample application implements a DrawingBrush drawingbrushBoard that utilizes its Viewport and TileMode properties to realize repeating tiles, a LinearGradientBrush to polish the look of the black fields and its parent Rectangle's Margin property to realize a border around the board (offset to the parent Canvas).
The Windows Visual Studio 2015 project of the sample application is completely based on the source code of the article DrawingBrush in WPF by Purushottam Rathore (many thanks for tis great idea to demonstrate DrawingBrush). The Linux/Unix (X11) Mono projects are derived from this source code. | |
Advice: To use the class library documentation shortcut (F1) from MonoDevelop, the "mono-tools" package has to be installed.
The images of the sample application show the chess board on several platforms.
The first image shows the sample application on OPEN SUSE 11.3 Linux 32 bit EN and GNOME desktop.
The second image shows the sample application on OPEN SUSE 12.3 Linux 64 bit DE and Xfce.
The third image shows the sample application on Windows® 10 64 Bit Edition.
The application window utilizes the System.Windows.Controls.Canvas as its root layout manager. It also defines the child System.Windows.Shapes.Rectangle and its System.Windows.Media.DrawingBrush used to fill the rectangle.
The layout is defined by the rectangle's Margin property. The drawing brush size is 100px * 100px while the rectangle's width and height are 400px * 400px. Therefore the drawing brush must be applied 4 times in x and 4 times in y to fill the rectangle entirely.
There is no functional difference between the X11 and Windows® 10 versions of the sample application, they share the same XAML code (except the margin values) and there is no code behind (so nothing can differ here).
Walk through
Main view file context
The XAML (MainWindow.xaml)
Here the complete code of the XAML file (X11 32 Bit MonoDevelop solution):
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ext="clr-namespace:System.Windows.ExtControls"
x:Class="XamlChessBoard.MainWindow"
Name="DigiClock" Title="Chess Board"
Height="500" Width="500" Icon="XrwIcon16.bmp"
Background="#FFDDDDDD">
<Canvas Name="canvasRoot" Background="SkyBlue">
<Rectangle Name="rectangleBoard" Width="400" Height="400" Margin="50,45,40,40">
<Rectangle.Fill>
<DrawingBrush x:Name="drawingbrushBoard" Viewport="0,0,0.25,0.25" TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup x:Name="drawinggroupBoard">
<GeometryDrawing x:Name="geometrydrawingWhiteBackground" Brush="White">
<GeometryDrawing.Geometry>
<RectangleGeometry x:Name="geometryWhiteBackground" Rect="0,0,100,100" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing x:Name="geometrydrawingBlackForeground">
<GeometryDrawing.Geometry>
<GeometryGroup x:Name="geometrygroupBlackForeground">
<RectangleGeometry x:Name="rectanglegeometryBlack1" Rect="0,0,50,50" />
<RectangleGeometry x:Name="rectanglegeometryBlack2" Rect="50,50,50,50" />
</GeometryGroup>
</GeometryDrawing.Geometry>
<GeometryDrawing.Brush>
<LinearGradientBrush>
<GradientStop Offset="0.0" Color="Black" />
<GradientStop Offset="1.0" Color="Gray" />
</LinearGradientBrush>
</GeometryDrawing.Brush>
</GeometryDrawing>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
</Window
The sample application doesn't have any resources - the DrawingBrush is defined directly within the Rectangle's Fill property besause it is used/referenced only once.
To draw background and foreground with one single brush, background and foreground must be combined - and this is done within the DrawingGroup drawinggroupBoard.
While background is realized by just one white rectangle GeometryDrawing geometrydrawingWhiteBackground, the foreground GeometryDrawing geometrydrawingBlackForeground requires to combine two black rectangles - and this is done within the GeometryGroup geometrygroupBlackForeground.
To fill the chess bord (defined by the Rectangle rectangleBoard) entirely, the DrawingBrush must be applied 4 times in x and y. The Viewport property of the DrawingBrush defines no mapping offset for the DrawingBrush relative to the Rectangle to fill (see Viewport="0, 0, ...") and a scale of 25% with regard to the Rectangle size (see Viewport="..., 0.25, 0.25"). The TileMode property of the DrawingBrush enables drawing of repeated tiles.
The code behind (MainWindow.xaml.cs)
The corresponding C# code file of the main view is MainWindow.xaml.cs and it contains just the minimum code:
namespace XamlChessBoard
{
public partial class MainWindow : XrwXAML.Window
{
public MainWindow()
: base (-1, -1)
{
InitializeComponent();
}
}
}
Main view model file context
There is no ModelView for the main view, because no Model is required.
Main model file context
There is no Model for the main view, because no data are to process.
Points of Interest
This is another XAML application for X11, fully compatible with Microsoft®, showing the main advantages of this approach (compared to an implementation with GTK+ or KDE): The 100% cross platform compatible GUI definition and the savings of code lines to create the GUI.
The use of DrawingBrush offers a very simple way to create a polished and this can be applied for X11 and Windows (cross platform).
History
The first version of this article is from 12. February 2017.
