Silverlight Control with Measure / Desired Size issue with Image stretching from middle usercontrol
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.
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.
精彩评论