Logo Subtitle Subtitle

Jun 21, 2011 0

Silverlight breakpoints not hit in Firefox

Sometimes, for no reason at all, something that worked yesterday can be broken today. Like debugging a Silverlight project in Firefox. Since this afternoon my breakpoints are not hit anymore when I run from Visual Studio 2010. I found the solution here and decided to blog about it just to have a link to it for future references.

Enable Silverlight debugging in Firefox:

  • Open Firefox
  • type about:config in the address bar
  • Search for dom.ipc.plugins.enabled
  • Change the value to false
  • Restart Firefox

Jun 13, 2011 0

Using custom fonts with HTML5

I create web sites and web applications for fifteen years and I cannot count the times I have rendered a header text in Photoshop to get that specific font that was used by the graphic designer. Flash and Silverlight allow me to use any font I like and now HTML5 can do the same. How does it work?

Create an HTML5 page like this:

<!doctype html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Loek van den Ouweland - Custom Fonts</title>
	<meta name="description" content="">
	<meta name="author" content="Loek van den Ouweland">
</head>
<body>
    <h1>Using custom fonts</h1>
</body>
</html>

That will render like this:

Use a font without worrying about copyrights

To avoid any discussion about copyrights and other boring stuff, I am going to use the great Google WebFonts resource (http://www.google.com/webfonts) that states:

All fonts in the directory are available for use on your website under an open source license and are served by Google servers.

So visit http://www.google.com/webfonts, select any font and click on the “Use this font” tab.

Add the link to the style sheet in the HEAD section of your page and add a style like this:

<!doctype html>
<head>

  <link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>

	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Loek van den Ouweland - Custom Fonts</title>
	<meta name="description" content="">
	<meta name="author" content="Loek van den Ouweland">

  <style>
    h1 {
      font-family: 'Permanent Marker', arial, serif;
      font-size:50px;
    }
  </style>

</head>
<body>
    <h1>Using custom fonts</h1>
</body>
</html>

Run the page in an HTML5 capable browser and view the result.

Jun 3, 2011 1

Positioning items on X and Y within an ItemsControl

Download demo project

If you need to overlay points of interest on a map or distribute usercontrols on a game board, you can foreach over the items and add them to a placeholder. But all this can be accomplished much easier with an ItemsControl that has a Grid or Canvas as its ItemsPanelTemplate. First let me show you what this demo project does:

Steps to create this

Create a model to hold the name and position of the label:

public class Location {
    public string Name { get; set; }
    public double X { get; set; }
    public double Y { get; set; }
}

Place an ItemsControl and edit the DataTemplate and ItemsPanelTemplate:


<ItemsControl ItemsSource="{Binding Locations}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid HorizontalAlignment="Left" Background="#FFFF0069" RenderTransformOrigin="0.5,0.5" Height="30">
                <Grid.RenderTransform>
                    <CompositeTransform Rotation="-45" TranslateX="{Binding X}" TranslateY="{Binding Y}"/>
                </Grid.RenderTransform>
                <Rectangle Fill="#FFFF0069" RenderTransformOrigin="0.5,0.5" Width="15" Height="15" HorizontalAlignment="Right" Margin="0,0,-3,0">
                    <Rectangle.RenderTransform>
                        <CompositeTransform Rotation="45"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Name}" d:LayoutOverrides="Height" FontFamily="Arial Black" FontSize="16" Margin="2"/>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid/> // this is a StackPanel by default
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

The trick here is to use a Grid in the ItemsPanelTemplate and bind the TranslateX and TranslateY to the X and Y of the model.

Create an ObservableCollection<Location>

public ObservableCollection<Location>  Locations { get; set; }
public MainViewModel() {
    Locations = new ObservableCollection<Location>();
    Locations.Add(new Location { Name = "London", X = 175, Y = 35 });
    Locations.Add(new Location { Name = "Eindhoven", X = 240, Y = 40 });
    Locations.Add(new Location { Name = "Muenchen", X = 330, Y = 100 });
}

Bind it to the ItemsControl.

<ItemsControl ItemsSource="{Binding Locations}">

Does not work on the Windows Phone yet

You can only bind to dependency properties which the CompositeTransform properties are not in Silverlight 3 so this does not work on a pre-mango Windows Phone.

My Recent Tweets