While I was fiddling around with WPF in general I noticed that when
I dropped inane little circles and boxes onto a canvas I'd never be
able to center it inside the containing canvas just right. If you try
the following XAML in the excellent Kaxaml
tool for instance:
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300"
Height="300"
Title="Centered?">
<Grid>
<Canvas Background="Black" Width="300" Height="300">
<Ellipse Width="50"
Height="50"
Canvas.Left="125"
Canvas.Top="125"
Fill="LightGray"
x:Name="ellipse" />
</Canvas>
</Grid>
</Window>
Here's what you see:
Clearly the ellipse is not positioned in the center of the
containing canvas even though the point (125,125)
should in fact have done so. If however
you set the value None for the
WindowStyle attribute of the
Window tag like so (note the
code in bold):
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300"
Height="300"
Title="Centered?"
WindowStyle="None">
<Grid>
<Canvas Background="Black" Width="300" Height="300">
<Ellipse Width="50"
Height="50"
Canvas.Left="125"
Canvas.Top="125"
Fill="LightGray"
x:Name="ellipse" />
</Canvas>
</Grid>
</Window>
Then here's what you get (you'll have to hit Alt+F4 to close
this window):
As you can probably tell, the circle seems nicely centered now. The problem
therefore is the title bar. In the first XAML code snippet above I had
given a dimension of 300x300 for the canvas. Accounting for
the height of the title bar, this causes the canvas to actually extend
beyond the window border which of course, gets clipped by the OS. In order
to trim the canvas to size I decided to put it inside a dock panel and remove
the explicit width/height specification. Here's what I came up with:
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300"
Height="300"
Title="Centered?">
<DockPanel>
<Canvas Background="Black">
<Ellipse Width="50"
Height="50"
Canvas.Left="125"
Canvas.Top="125"
Fill="LightGray"
x:Name="ellipse" />
</Canvas>
</DockPanel>
</Window>
This produced a window that looked like this:
Again, not quite in the center of the client area. The issue here is of course
that now, the canvas size is not 300x300 which means the point
(125,125) should not be the top left co-ordinate of the ellipse if
we want it centered. Here's a little XAML that shows you the real dimensions of
the canvas.
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300"
Height="300"
Title="Centered?">
<DockPanel>
<Canvas Background="Black" x:Name="canvas">
<Ellipse Width="50"
Height="50"
Canvas.Left="125"
Canvas.Top="125"
Fill="LightGray"
x:Name="ellipse" />
<TextBlock Text="{Binding ElementName=canvas, Path=ActualWidth}"
Canvas.Left="10"
Canvas.Top="10"
Foreground="White"/>
<TextBlock Text=", "
Canvas.Left="30"
Canvas.Top="10"
Foreground="White"/>
<TextBlock Text="{Binding ElementName=canvas, Path=ActualHeight}"
Canvas.Left="38"
Canvas.Top="10"
Foreground="White"/>
</Canvas>
</DockPanel>
</Window>
Here's what the window that this produces looks like:
The correct top-left co-ordinate to center the ellipse therefore
is (121,108). The straightforwad solution seems to be
to just handle it in code and be done with it. For example, the
following code in the window class's constructor manages to do the job:
this.Loaded += (sender, e) =>
{
Canvas.SetLeft(ellipse, (canvas.ActualWidth - ellipse.ActualWidth) / 2);
Canvas.SetTop(ellipse, (canvas.ActualHeight - ellipse.ActualHeight) / 2);
};
But this isn't quite the WPF way of doing things and besides if you resized
the window the ellipse would again be off center and you'd need to write
more code to handle the window resize events and re-layout the ellipse in
response. Ideally, these sort of things should be handled using the WPF
binding system. At first I figured this should be really easy to do with
XAML like this:
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300"
Height="300"
Title="Centered?">
<DockPanel>
<Canvas Background="Black" x:Name="canvas">
<Ellipse Width="50"
Height="50"
Canvas.Left="{Binding ElementName=canvas, Path=((ActualWidth - 50)/2)}"
Canvas.Top="{Binding ElementName=canvas, Path=((ActualHeight - 50)/2)}"
Fill="LightGray"
x:Name="ellipse" />
</Canvas>
</DockPanel>
</Window>
Here's what this produced:
As it turns out one cannot use expressions for the value of the Path
attribute of the Binding markup extension! Some folks over at
blendables.com have however solved this
problem by developing a custom WPF markup extension that allows the specification of
expressions. You can get it
here.
But this seemed a bit extreme given the circumstances. The alternative as it happens
is to use multi-binding with a custom value converter. First we write a class that implements
IMultiValueConverter like so:
public class HalfValueConverter : IMultiValueConverter
{
#region IMultiValueConverter Members
public object Convert(object[] values,
Type targetType,
object parameter,
CultureInfo culture)
{
if (values == null || values.Length < 2)
{
throw new ArgumentException(
"HalfValueConverter expects 2 double values to be passed" +
" in this order -> totalWidth, width",
"values");
}
double totalWidth = (double)values[0];
double width = (double)values[1];
return (object)((totalWidth - width) / 2);
}
public object[] ConvertBack(object value,
Type[] targetTypes,
object parameter,
CultureInfo culture)
{
throw new NotImplementedException();
}
#endregion
}
And then we use the following XAML (you cannot do this in Kaxaml
because it does not support writing code-behind) to get the job done!
<Window x:Class="CenterWin.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Centered?"
Height="300"
Width="300"
Background="Black"
xmlns:local="clr-namespace:CenterWin">
<DockPanel>
<DockPanel.Resources>
<local:HalfValueConverter x:Key="HalfValue" />
</DockPanel.Resources>
<Canvas x:Name="canvas">
<Ellipse Width="50"
Height="50"
Fill="LightGray"
x:Name="ellipse">
<Canvas.Left>
<MultiBinding Converter="{StaticResource HalfValue}">
<Binding ElementName="canvas" Path="ActualWidth" />
<Binding ElementName="ellipse" Path="ActualWidth" />
</MultiBinding>
</Canvas.Left>
<Canvas.Top>
<MultiBinding Converter="{StaticResource HalfValue}">
<Binding ElementName="canvas" Path="ActualHeight" />
<Binding ElementName="ellipse" Path="ActualHeight" />
</MultiBinding>
</Canvas.Top>
</Ellipse>
</Canvas>
</DockPanel>
</Window>
That's it! Now you can resize to your heart's content and the WPF binding
system will take care of all the updates. Here's a screenshot of the window
after resizing it a bit.
