#1,182 – Using RenderSize Properties in Custom Elements

When writing rendering code for a custom element that derives from FrameworkElement, you can use the ActualWidth and ActualHeight properties to know how to render the element.  These properties indicate the desired final size of the element, after all layout calculations have been done.

    public class MyFrameworkElement : FrameworkElement
    {
        protected override void OnRender(DrawingContext dc)
        {
            dc.DrawLine(new Pen(Brushes.Blue, 2.0),
                new Point(0.0, 0.0),
                new Point(ActualWidth, ActualHeight));
            dc.DrawLine(new Pen(Brushes.Green, 2.0),
                new Point(ActualWidth, 0.0),
                new Point(0.0, ActualHeight));
        }
    }

If a custom control derives from UIElement, it won’t have access to the ActualWidth and ActualHeight properties, but can instead use RenderSize.Width and RenderSize.Height.  (You can also use these properties from within an element that derives from FrameworkElement, since FrameworkElement inhertis from UIElement).

    public class MyUIElement : UIElement
    {
        protected override void OnRender(DrawingContext dc)
        {
            dc.DrawLine(new Pen(Brushes.Blue, 2.0),
                new Point(0.0, 0.0),
                new Point(RenderSize.Width, RenderSize.Height));
            dc.DrawLine(new Pen(Brushes.Green, 2.0),
                new Point(RenderSize.Width, 0.0),
                new Point(0.0, RenderSize.Height));
        }
    }

#758 – Access Actual Height and Width from within LayoutUpdated Event Handler

The ActualHeight and ActualWidth properties of a FrameworkElement can be read to get the values for the final height and width that the layout system assigned to the element.

The LayoutUpdated event of a UIElement (parent of FrameworkElement) will fire whenever the layout changes.  You can handle this event and read the values of ActualHeight and ActualWidth from within the handler.

You should typically only read these properties from within the LayoutUpdated handler.  If you try reading them at some other point, there’s no guarantee that they have arrived at their final values as a result of the layout changing.

#757 – RenderSize, ActualHeight and ActualWidth

The ActualHeight and ActualWidth properties of an element that inherits from FrameworkElement indicate the final height and width of the element, after layout has taken place.

This same information is also available via the UIElement.RenderSize property (UIElement is the parent class of FrameworkElement).  RenderSize is of type Size, which is a struct containing the width and the height.

#432 – Height and Width vs. ActualHeight and ActualWidth

Specifying the height and width of a control using the Height and Width properties indicates the desired height and width.  The layout system will take the requested height and width into account, but the actual height and width depends on a number of factors.

You can use the ActualHeight and ActualWidth properties to get at the actual height and width, after layout.

    <StackPanel>
        <Button Name="btnA" HorizontalAlignment="Stretch" Content="Get Info"
                Click="btnA_Click"/>
        <Button Name="btnB" HorizontalAlignment="Center" Width="1in" Content="Push or Pull Me"/>
        <Button Name="btnC" Width="175" MaxWidth="{Binding ElementName=btnB, Path=ActualWidth}" Content="Push Me"/>
    </StackPanel>


Clicking on GetInfo, we display info about the third button.  ActualWidth is smaller than the requested Width, because it can’t be wider than the second button.

The first button’s Width is set to “NaN” (Not a Number), indicating that Width is set to Auto.

The second button’s width was set to 1 inch, which is 96 units on my 96 dpi display.