아래 URL의 질문에 대한 답변입니다.

http://www.hoons.kr/board.aspx?Name=QAnet3&BoardIdx=24419&Page=1&Mode=2

안녕하세요 WPF를 시작한지 얼마 안됩니다.
기존의 Winform program과 너무 달라서 많이 해매고 있습니다.
다름이 아니라 UserControl에서 UserControl 안에 넣어놓은 Canvas에 동적으로 Line등을 그리려고 하는데
Canvas의 크기를 Width="Auto" Height="Auto"로 되어있어서 그런지 Size가 변경될때 마다
해당 Canvas의 크기를 가져와서 Line을 그리려고 하는데 계속 canvas.Width의 속성이 NaN으로 나오네요..
결국 목적은 Canvas의 크기에 맞게 Pixel 단위로 계산해서 바둑판 모양으로 선을 그려주려고 하는것입니다.
도움 부탁드립니다.

// UserControl1.xaml
<UserControl x:Class="CanvasTest.UserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Name="root">
    <Canvas x:Name="canvas" />
</UserControl>

// UserControl1.xaml.cs
public partial class UserControl1 : UserControl
    {
        public UserControl1()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(UserControl1_Loaded);            
        }

        void UserControl1_Loaded(object sender, RoutedEventArgs e)
        {
            Debug.WriteLine(string.Format("{0}, {1}", canvas.Width, canvas.Height));
        }
    }

위와 같이 일반적으로 UserControl에 Width, Height를 명시적으로 지정하지 않은 Canvas를 사용하면
UserControl이 로드 되었을 때 canvas.Width, canvas.Height  값은 NaN이 됩니다.

이 문제를 해결하기 위한 방법은 크게 2가지가 있는데요.

첫번째는 아래와 같이 Canvas의 Parent element의 크기에 바인딩 하는 것입니다.

<UserControl x:Class="CanvasTest.UserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Name="root">
    
    <Canvas x:Name="canvas" Width="{Binding ElementName=root, Path=ActualWidth}" 
Height="{Binding ElementName=root, Path=ActualHeight}">
    </Canvas>
</UserControl>

두번재 방법은 아래와 같이 canvas에 SizeChanged 이벤트를 이용하는 방법입니다.

public UserControl1()
        {
            InitializeComponent();
            canvas.SizeChanged += new SizeChangedEventHandler(canvas_SizeChanged);
        }


        private double canvasWidth;
        private double canvasHeight;
        void canvas_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            canvasWidth = e.NewSize.Width;
            canvasHeight = e.NewSize.Height;
        }

Canvas의 크기가 변경될 때마다 e.NewSize 값을 저장하고 있는 것입니다.