By Andreas Grech

2009-03-03 19:42:42 8 Comments

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.


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


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 ?


@Muad'Dib 2009-03-03 19:48:57

Width/Height is the requested or layout size. If you set to Auto, then the value is double.NaN when you access the property in code behind.

ActualWidth/ActualHeight and RenderSize.Width/RenderSize.Height both return the element's rendered size, as RenderSize is of type Size. If you want/need the actual size of the item, then use any of these attributes.

@chuckj 2009-03-04 09:40:45

It is actually the layout size not the rendered size.

@dumbledad 2015-07-05 15:39:39

@chuckj, what attribute would one use to get the rendered size?

@Mafii 2016-07-12 12:39:40

@dumbledad .RenderSize.Width

@Pascal 2013-10-04 11:32:10

There is a very good reason not to use the ActualWidth to bind to (obviously ActualHeight accordingly). When you set the Width of an element, to the ActualWidth of another one you may break the layout chain.

In the best case your element/control needs to be parsed after the layout process of the parent (the binding source) finished. That means additional time. If it is at the same hierarchy level as the parent the layout process needs two runs (at least) to calculate a definitive size.

For example I had a control which had it's size property overridden in a style that would set it to the TemplatedParent (don't do):

<Rectangle DockPanel.Dock="Top" Width="{TemplateBinding ActualWidth}" 
           Height="1" Fill="#000000"/>

When resizing the containing window, the control would prevent the container from becoming smaller and brake the layout. Setting it to the Width will resolve the problem (do):

<Rectangle DockPanel.Dock="Top" Width="{TemplateBinding Width}" 
           Height="1" Fill="#000000"/>

If you have to use the ActualWidth in general something is wrong with your xaml. Better fix that instead of messing up with the final sizes of the layout run.

@PIntag 2014-08-19 18:15:06

Your code snippets ("dont do" and "do") are exactly the same?!?!

@Pascal 2014-08-20 14:54:10

Thanks for the comment. Fixed that.

@Steven Rands 2015-02-06 11:13:58

@tuner I disagree with this: "If you have to use the ActualWidth in general something is wrong with your xaml". There is nothing wrong with binding to ActualWidth (or ActualHeight), indeed in certain cases this may be the easiest way of solving a particular layout problem. Just because binding to these properties causes problems on (rare) occasions is no reason to avoid them completely.

@Pascal 2015-02-06 12:23:40

@StevenRands : The problem with your rare occasions is that it is very hard to find the source of a problem. If you bind properties that determine the size of an component to ActualWidth or similar, there need to be at least two layout passes to determine the size of the component. My personal experience is, that this works at first. Then, after introducing other non-standard behavior (which it is), stuff breaks and you have real problems nailing it down.

@Steven Rands 2015-02-06 12:33:06

@tuner I've used this technique a fair number of times and never had any of the problems you mention. Maybe I've just been lucky. There are places where I wouldn't use it but I think a blanket statement that basically says "use this and you're doing it wrong" isn't helpful. I take your point about the multiple layout passes but I think this kind of binding is often the easiest way of saying in XAML: I want this element to be the same width (or height) as that element. Just an opinion anyway.

@TWood 2010-10-21 16:20:57

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

edit: removed Margin b/c it isn't part of ActualWidth.

@Simon_Weaver 2010-10-25 02:34:56

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 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"/>

    <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"/>


@Guffa 2009-03-03 19:52:28

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.

@John Leidegren 2009-03-03 19:47:11

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.

@Andy Mikula 2009-03-03 19:46:41

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.

Related Questions

Sponsored Content

5 Answered Questions

[SOLVED] What are the differences between flex-basis and width?

  • 2015-12-18 09:17:22
  • jpeltoniemi
  • 71269 View
  • 232 Score
  • 5 Answer
  • Tags:   css flexbox width

15 Answered Questions

[SOLVED] In WPF, what are the differences between the x:Name and Name attributes?

8 Answered Questions

[SOLVED] What's the difference between StaticResource and DynamicResource in WPF?

1 Answered Questions

[SOLVED] wpf - Binding issue ActualWidth

1 Answered Questions

[SOLVED] wpf ScrollViewer and SizeChanged event

1 Answered Questions

[SOLVED] Determining the size of a UIElement in Silverlight

1 Answered Questions

[SOLVED] WPF giving incorrect size values

Sponsored Content