What is the difference between Width and ActualWidth in WPF?

Question

I am currently working with Panels in WPF, and I noticed that as regards the Width and Height properties, there are also two other properties called ActualWidth and ActualHeight.

ActualWidth

Gets the rendered width of this element. This is a dependency property. (Inherited from FrameworkElement.)

Width

Gets or sets the width of the element. This is a dependency property. (Inherited from FrameworkElement.)

Reference: MSDN

Can anyone point out the differences between the two and when to use either one ?

Answer 1

ActualWidth is set by the rendering system, and may be different depending on the widths of other elements and overall size constraints. As a result, it can not be changed. Width is a property that can be changed, and should be used to increase or decrease the width of the element.

From MSDN:

This property is a calculated value based on other width inputs, and the layout system. The value is set by the layout system itself, based on an actual rendering pass, and may therefore lag slightly behind the set value of properties such as Width that are the basis of the input change.

Answer 2

It's exactly that, the render width != layout width. One is intended to be used for layout the other one is intended for render. It like with WinForms, there was a Size and a ClientSize property, the differ slightly and you should use the Atual/Client size of rendering and the Width/Height for layout.

Answer 3

Width/Height is the requested or layout size. If you set to Auto, then the value is double.Nan when you view it in codebehind.

ActualWidth/ActualHeight is the rendered size. If you want/need the actual size of the item, then use this attribute.

Answer 4

You can set the Width property, but not the ActualWidth property.

The Width property is used to determine how the panel is rendered, then the ActualWidth is set to the actual width that was used. This may not be the same value as Width, depending on the size of it's child elements and constrictions from it's parent element.

The ActualWidth is not set immediately when setting the Width property, but will be updated (one or more times) during rendering.

Answer 5

ActualWidth accounts for padding and margins in it's value so anytime you need to know that number you can call actualwidth instead of width and avoid the calculation.

Answer 6

I find 'ActualWidth' most useful when I want to bind the width or height of one element to another.

In this simple example I have two buttons arranged side by side and a comment underneath that is constrained to the width of the StackPanel containing the two buttons.

<StackPanel>

    <StackPanel Margin="0,12,0,0" Orientation="Horizontal" Name="buttonPanel" HorizontalAlignment="Left" >
         <Button Content="Yes - Arm the missile" FontWeight="Bold" HorizontalAlignment="Left"/>
         <Button Content="No - Save the world" HorizontalAlignment="Left" Margin="7,0,0,0"/>
    </StackPanel>

    <TextBlock Text="Please choose whether you want to arm the missile and kill everybody, or save the world by deactivating the missile." 
               Width="{Binding Path=ActualWidth,ElementName=buttonPanel}" Margin="0,5,0,0" HorizontalAlignment="Left" TextWrapping="Wrap"/>

</StackPanel>