Question

I’m trying to create a custom control with C#/WPF. See below for the XAML of my control, and a window I’m trying to put it into.

The problem: When I set the HorizontalAlignment or vertical alignment properties to Center, the upper-left corner of the control is centered, but extends down and to the right. The bounding box of the control as shown in the designer is very small (zero width/heigh I think).

It seems like I have a problem with my control not reporting its size properly when the layout is doing its thing. Also, it doesn’t seem to resize when Height and Width are adjusted. I have nothing in the code-behind (yet) that alters the appearance of the control (e.g. no Measure overrides).

This is my first attempt at a custom control – probably better ways of doing it (TextBlock comes to mind), but hey, this is how I learn! 😀

The XAML defining my control:

<UserControl x:Class="LCD.LiquidCrystalDisplay"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignWidth="300" d:DesignHeight="122">
    <Canvas>

        <Rectangle Fill="#FFD1D1D1" Width="300" Height="122" />
        <Rectangle Fill="#FF345534" Margin="12,8,12,8" Width="276" Height="106" />
        <Rectangle Fill="#FF293E29" Margin="15,11,15,11" Width="270" Height="100" />

        <Line X1="32" X2="32" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
        <Line X1="50" X2="50" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
        <Line X1="67" X2="67" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
        <Line X1="84" X2="84" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
        <Line X1="101" X2="101" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
        <Line X1="117" X2="117" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
        <Line X1="134" X2="134" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
        <Line X1="151" X2="151" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
        <Line X1="168" X2="168" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
        <Line X1="184" X2="184" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
        <Line X1="201" X2="201" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
        <Line X1="218" X2="218" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
        <Line X1="235" X2="235" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
        <Line X1="251" X2="251" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
        <Line X1="268" X2="268" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />

        <Line X1="15" X2="285" Y1="36" Y2="36" StrokeThickness="1" Stroke="#FF345534" />
        <Line X1="15" X2="285" Y1="61" Y2="61" StrokeThickness="1" Stroke="#FF345534" />
        <Line X1="15" X2="285" Y1="86" Y2="86" StrokeThickness="1" Stroke="#FF345534" />

    </Canvas>
</UserControl>

And the XAML including it in a window:

<Window x:Class="TestJunk.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:LCD;assembly=LCD"
        Title="MainWindow" Height="341" Width="544">
    <Grid Name="MainGrid">
        <my:LiquidCrystalDisplay Name="lcd" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</Window>

Answer 1

This is the behaviour of a Canvas. Here is what MSDN has to say:

Canvas is the only panel element that has no inherent layout
characteristics. A Canvas has default Height and Width properties of
zero, unless it is the child of an element that automatically sizes
its child elements. Child elements of a Canvas are never resized, they
are just positioned at their designated coordinates. This provides
flexibility for situations in which inherent sizing constraints or
alignment are not needed or wanted. For cases in which you want child
content to be automatically resized and aligned, it is usually best to
use a Grid element.

If you want to have the UserControl resize, wrap it around a Viewbox and set a Height and Width to the Canvas.