Define a logo

The title bar of a ModernWindow includes an area for a custom window logo.

Logo.Empty.png

A window logo is set by specifying the ModernWindow.LogoData property. The LogoData property is of type Geometry and supports the Path.Data mini-language. The Path shape that renders the logo has a fixed size of 24x24 pixels. Any path data will be stretched to this size.

The following code snippet defines a smiley logo. The path data has been taken from the Modern UI Icons project, a great icon resource for Modern UI styled apps.

<mui:ModernWindow x:Class="FirstFloor.ModernUI.App.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mui="http://firstfloorsoftware.com/ModernUI"
  LogoData="F1 M 24.9015,43.0378L 25.0963,43.4298C 26.1685,49.5853 31.5377,54.2651 38,54.2651C 44.4623,54.2651 49.8315,49.5854 50.9037,43.4299L 51.0985,43.0379C 51.0985,40.7643 52.6921,39.2955 54.9656,39.2955C 56.9428,39.2955 58.1863,41.1792 58.5833,43.0379C 57.6384,52.7654 47.9756,61.75 38,61.75C 28.0244,61.75 18.3616,52.7654 17.4167,43.0378C 17.8137,41.1792 19.0572,39.2954 21.0344,39.2954C 23.3079,39.2954 24.9015,40.7643 24.9015,43.0378 Z M 26.7727,20.5833C 29.8731,20.5833 32.3864,23.0966 32.3864,26.197C 32.3864,29.2973 29.8731,31.8106 26.7727,31.8106C 23.6724,31.8106 21.1591,29.2973 21.1591,26.197C 21.1591,23.0966 23.6724,20.5833 26.7727,20.5833 Z M 49.2273,20.5833C 52.3276,20.5833 54.8409,23.0966 54.8409,26.197C 54.8409,29.2973 52.3276,31.8106 49.2273,31.8106C 46.127,31.8106 43.6136,29.2973 43.6136,26.197C 43.6136,23.0966 46.127,20.5833 49.2273,20.5833 Z">
</mui:ModernWindow>
And the result looks like this.

Logo.Smiley.png

Last edited Feb 11, 2013 at 12:45 AM by kozw, version 5

Comments

evolcoder Jan 19, 2014 at 2:35 PM 
it's very simple to make logo in Expression Blend. And paste it to "LogoData" variable

MithunChopda Sep 27, 2013 at 6:44 PM 
Got it! Changed the Stretch="Fill" to "Uniform" in Themes/ModernWindow.xaml preserving the Height and Width to 24x24. And now the logo doesn't stretch.
Even if we all agree to live the 24x24 dimension, the default "Stretch" setting has be "Uniform" instead of "Fill".

MithunChopda Sep 27, 2013 at 6:23 PM 
I have a logo that is of size 24x24 but the actual graphic in the logo (the white area) is rectangular in shape?
The loga finally appears vertically stretched. Does this mean the logo content should be exactly a square of 24x24? It is quite unrealistic to always have a square logo.

timothyparez May 29, 2013 at 5:28 AM 
I agree with adeelsansari restricting it that way does complicate things... simply specifying an image would be a lot easier, same goes for the moddern UI buttons

mabeale May 28, 2013 at 9:10 AM 
...Nevermind. I found the answer. I just had to edit the Themes/ModernWindow.xaml in the FirstFloor.ModernUI project.

mabeale May 28, 2013 at 8:24 AM 
I know it says the logo is a fixed size of 24 x 24 pixels but is it possible to make this wider as my logo is stretching? Alternatively, can you explain how I might be able to add whitespace to the logo in Inkscape to make it a square so it doesn't stretch? My logo is wider than it is taller so I need a rectangular area for my logo or I need whitespace in the logo to make the canvas square.

Very nice work by the way!

kozw Apr 20, 2013 at 10:54 AM 
LogoData is of type Geometry, it cannot be an image.

Plusky Apr 10, 2013 at 6:17 AM 
Can I set Logo to an image file?

adeelsansari Apr 3, 2013 at 7:09 PM 
never mind, i found my answer here: http://stackoverflow.com/questions/129972/convert-an-image-to-xaml

adeelsansari Apr 2, 2013 at 8:29 PM 
I dont get it, most companies have complex logos, and setting one up using Path.Data - mini-language would be a painful excersize. Why not take a picture?