Question

I’ve got a Custom Control I’m working on and got it to work fine on it’s own, however when it is grids where the width is being set I’m getting errors such as:

Layout measurement override of element ‘Microsoft.Windows.Design.Platform.SilverlightViewProducer+SilverlightContentHost’ should not return PositiveInfinity as its DesiredSize, even if Infinity is passed in as available size.

These errors only occur in my app not in my test harness – but I can’t post the former here, but there might be something here I’m missing – may be able to compensate for the issue – but if anyone can help it would be great

Here is the Class Code:

public class UXImage : Control
    {
        #region Private Constants
        private const string RightImageControl = "RightImage";
        private const string MiddleImageControl = "MiddleImage";
        private const string LeftImageControl = "LeftImage";
        #endregion

    #region Private Members
    private int sourceHeight;
    private int sourceWidth;
    private int middleWidth = 1;
    WriteableBitmap crop;
    TransformGroup transform = new TransformGroup();
    TranslateTransform position = new TranslateTransform();
    ScaleTransform scale = new ScaleTransform();
    // Controls
    private Image image = new Image();
    private Image rightImageControl;
    private Image middleImageControl;
    private Image leftImageControl;
    #endregion

    #region Dependency Properties

    public static readonly DependencyProperty SourceProperty =
    DependencyProperty.Register("Source", typeof(BitmapSource),
    typeof(UXImage), null);

    public static readonly DependencyProperty RightCapWidthProperty =
    DependencyProperty.Register("RightCapWidth", typeof(int),
    typeof(UXImage), null);

    #endregion

    #region Public Properties

    public BitmapSource Source
    {
        get { return (BitmapSource)GetValue(SourceProperty); }
        set
        {
            SetValue(SourceProperty, value);
        }
    }

    public int RightCapWidth
    {
        get { return (int)GetValue(RightCapWidthProperty); }
        set
        {
            SetValue(RightCapWidthProperty, value);
        }
    }
    #endregion

    #region Public Methods

    /// <summary>
    /// On Apply Template
    /// </summary>
    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        sourceHeight = Source.PixelHeight;
        sourceWidth = Source.PixelWidth;
        image.Source = Source;
        // Right Element
        rightImageControl = (Image)GetTemplateChild(RightImageControl);
        crop = new WriteableBitmap(RightCapWidth, sourceHeight);
        position.X = -sourceWidth + RightCapWidth;
        crop.Render(image, position);
        crop.Invalidate();
        rightImageControl.Source = crop;
        rightImageControl.Width = RightCapWidth;
        // Middle Element
        middleImageControl = (Image)GetTemplateChild(MiddleImageControl);
        crop = new WriteableBitmap(middleWidth, sourceHeight);
        position.X = -sourceWidth + RightCapWidth + middleWidth;
        crop.Render(image, position);
        crop.Invalidate();
        middleImageControl.Source = crop;
        middleImageControl.Height = sourceHeight;
        // Left Element
        leftImageControl = (Image)GetTemplateChild(LeftImageControl);
        crop = new WriteableBitmap(sourceWidth - RightCapWidth - middleWidth, sourceHeight);
        position.X = 0;
        crop.Render(image, position);
        crop.Invalidate();
        leftImageControl.Source = crop;
        leftImageControl.Height = sourceHeight;
        this.Height = sourceHeight;
        this.Width = sourceWidth;
    }

    public UXImage()
    {
        DefaultStyleKey = typeof(UXImage);
    }
    #endregion

}

Generic.xaml

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
xmlns:local="clr-namespace:UXLibrary">
<Style TargetType="local:UXImage">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:UXImage">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Image x:Name="LeftImage" Stretch="Uniform" Source="{TemplateBinding Source}" Grid.Column="0"/>
                        <Image x:Name="MiddleImage" Stretch="Fill" Grid.Column="1"/>
                        <Image x:Name="RightImage" Stretch="Uniform" Grid.Column="2"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</ResourceDictionary>

Usage:

<ux:UXImage RightCapWidth="10" Source="Images/example.png"/>

I’ve not seen a control like this in Silverlight, is based on the UIImage from iOS and Android 9-Patch which I’ve heard of but not seen.
Can anyone help? Is there an alternative to doing what I’m doing to do this as one image element that can stretch in the middle if this is a solution.

Answer 1

I can give a basic idea of what’s going on and some suggestions on how to proceed. In general, the Control.Width and Control.Height properties are for the user to supply, not you. The control is supposed to take these values as inputs and use them as part of the layout process to affect the resulting ActualWidth and ActualHeight properties.

Now, even if you never intend to let the user specify Width or Height in XAML, the problem is still the same. You, as the control author, are supposed to tell the layout system your desired size during the MeasureOverride and ArrangeOverride method calls as described here:

• Layout System

In particular, since you haven’t overridden MeasureOverride, the default behavior is return the desired size of the first visual child, which in your case will be the Grid, whose size is not specified, and therefore wants to be as big as possible, i.e. infinite.

So, the solution sounds simple: calculate your sizes in MeasureOverride and ArrangeOverride instead of OnApplyTemplate, right? The problem is, you may not have all the information you need at the right time. If you do not, then you will need to simply return your best guess for a desired size and then when you get the correct information, force a new layout pass so that MeasureOverride will be called again. The link above and the documentation in general describes how to do this.