WPF 3d LinearGardientBrush / TextureCoordinates - wpf

I have the following LinearGradientBrush
var brush = new LinearGradientBrush();
brush.GradientStops.Add(new GradientStop { Color = Colors.Transparent, Offset = 0 });
brush.GradientStops.Add(new GradientStop { Color = Colors.Blue, Offset = 0.1 });
brush.GradientStops.Add(new GradientStop { Color = Colors.Cyan, Offset = 0.2 });
brush.GradientStops.Add(new GradientStop { Color = Colors.GreenYellow, Offset = 0.4 });
brush.GradientStops.Add(new GradientStop { Color = Colors.Yellow, Offset = 0.6 });
brush.GradientStops.Add(new GradientStop { Color = Colors.Red, Offset = 0.8 });
brush.GradientStops.Add(new GradientStop { Color = Colors.Magenta, Offset = 1 });
and I use the following code to set the texture coordinates
textureCoordinates.Add(new Point(z_value / 100d, 0));
The result is not bad. But as you can see in the following image the highest value is always magenta even if the z value I used for the texture coordinate is quite low:
The right example should be colored blue.
How can I set the color correctly? My z values are all between 0 and 100.

This took me hours too before I found the solution here.
The LinearGradientBrush is using the bounding box as reference by default.
To fix this, the Property MappingMode of your brush object must be set to BrushMappingMode.Absolute. So in your case try this :)
brush.MappingMode=BrushMappingMode.Absolute

Related

How to have a second color for a drawing group in wpf

I need to be able to draw horizontal lines against a background color, say red. I have the lines being drawn, but I don't know how to set the background color. Right now, the background is white.
GeometryGroup stdGeometryGroup = new GeometryGroup();
DrawingBrush db = new DrawingBrush();
GeometryDrawing stdDrawing = new GeometryDrawing(null, pen, stdGeometryGroup);
if (stdDrawing != null)
{
db.Drawing = stdDrawing;
db.ViewboxUnits = BrushMappingMode.Absolute;
db.ViewportUnits = BrushMappingMode.Absolute;
db.Viewbox = new Rect(0, 0, 30, 30);
db.Viewport = new Rect(0, 0, 4, 4);
db.TileMode = TileMode.Tile;
db.Stretch = Stretch.UniformToFill;
db.Transform = new RotateTransform(45, 0.5, 0.5);
stdGeometryGroup.Children.Add(new LineGeometry(new Point(0, 15), new Point(30, 15)));
menuItem.Background = db;
}
In this case, menuItem is a Telerik RadMenuItem. The Pen is black.

How to reduce size of image captured from webcam

I am using a webcam to capture images in Silverlight. Is there a way to configure the webcam to catch images with a lower resolution?
http://programmerpayback.com/2010/01/21/use-silverlight-to-resize-images-and-increase-compression-before-uploading/
public static WriteableBitmap GetImageSource(Stream stream, double maxWidth, double maxHeight)
{
BitmapImage bmp = new BitmapImage();
bmp.SetSource(stream);
Image img = new Image();
img.Effect = new DropShadowEffect() { ShadowDepth = 0, BlurRadius = 0 };
img.Source = bmp;
double scaleX = 1;
double scaleY = 1;
if (bmp.PixelHeight > maxHeight)
scaleY = maxHeight / bmp.PixelHeight;
if (bmp.PixelWidth > maxWidth)
scaleX = maxWidth / bmp.PixelWidth;
// maintain aspect ratio by picking the most severe scale
double scale = Math.Min(scaleY, scaleX);
return new WriteableBitmap(img, new ScaleTransform() { ScaleX = scale, ScaleY = scale });
}

Scaling and moving an item at the same time

I'm trying to create a storyboard that scales and moves an element to a specific position. The basic idea is there are a row of 6 small cards, clicking on one will zoom into a more detailed image, starting from the position and size of the small card and ending up with a large centered card.
The card doesn't end up in the X,Y position I specify, I believe because the scaletransform is also moving it. I saw that a matrixtransform may work, but couldn't get it to work, at least in WP8. Here is my original code, card is the small card for starting location, item is the large detailed card to be scaled and moved
private void ZoomIn(UIElement item, UIElement card)
{
// setup
var _Scale = new ScaleTransform
{
ScaleX = 1,
ScaleY = 1,
CenterX = item.RenderSize.Width / 2,
CenterY = item.RenderSize.Height / 2,
};
var transform = card.TransformToVisual(Application.Current.RootVisual as FrameworkElement);
Point absolutePosition = transform.Transform(new Point(0, 0));
var _Translate = new TranslateTransform();
var _Group = new TransformGroup();
_Group.Children.Add(_Scale);
_Group.Children.Add(_Translate);
item.RenderTransform = _Group;
// animate
var _Storyboard = new Storyboard { };
// scale X
var _ScaleAnimateX = new DoubleAnimation
{
To = 1.0,
From=0.5,
Duration = TimeSpan.FromSeconds(.25)
};
_Storyboard.Children.Add(_ScaleAnimateX);
Storyboard.SetTarget(_ScaleAnimateX, _Scale);
Storyboard.SetTargetProperty(_ScaleAnimateX,
new PropertyPath(ScaleTransform.ScaleXProperty));
// scale Y
var _ScaleAnimateY = new DoubleAnimation
{
To = 1.0,
From = 0.5,
Duration = TimeSpan.FromSeconds(.25)
};
_Storyboard.Children.Add(_ScaleAnimateY);
Storyboard.SetTarget(_ScaleAnimateY, _Scale);
Storyboard.SetTargetProperty(_ScaleAnimateY,
new PropertyPath(ScaleTransform.ScaleYProperty));
// translate (location X)
var _TranslateAnimateX = new DoubleAnimation
{
From = absolutePosition.X,
To = 300,
Duration = TimeSpan.FromSeconds(.25)
};
_Storyboard.Children.Add(_TranslateAnimateX);
Storyboard.SetTarget(_TranslateAnimateX, _Translate);
Storyboard.SetTargetProperty(_TranslateAnimateX,
new PropertyPath(TranslateTransform.XProperty));
// translate (location Y)
var _TranslateAnimateY = new DoubleAnimation
{
From = absolutePosition.Y,
To = 40,
Duration = TimeSpan.FromSeconds(.25)
};
_Storyboard.Begin();
}
I found the solution, the panel with the zoomed card didn't have a horizontal/vertical alignment, I set it to left/top, used CenterX/CenterY of 0, and movements are now pixel perfect

Unable to position Rectangle in Canvas in Silverlight 4

I'm new to SL. I just wrote a simple app drawing a Rectangle and Line. When I try to position the Rectangle it has no effect and always puts it in the lower-right corner:
Canvas.SetLeft(r, 100);
Canvas.SetTop(r, 100);
When I try to use SetValue, the app hangs (ie. get stuck on the loading animation in the browser):
r.SetValue(Canvas.LeftProperty, 10);
r.SetValue(Canvas.TopProperty, 10);
Has anyone experienced anything like this, and/or know how to get past it?
[EDIT] Here's the more complete source:
public MainPage()
{
InitializeComponent();
Rectangle r = new Rectangle() {
Stroke = new SolidColorBrush(Colors.Black),
Width = 100,
Height = 20,
Fill = new SolidColorBrush { Color = Color.FromArgb(80, 143, 12, 28) }
};
//r.SetValue(Canvas.LeftProperty, 10);
//r.SetValue(Canvas.TopProperty, 10);
Canvas.SetLeft(r, 100);
Canvas.SetTop(r, 100);
this.LayoutRoot.Children.Add(r);
var line = new Line() {
Stroke = new SolidColorBrush(Colors.Black),
X1 = 10, Y1 = 10, X2 = 100, Y2 = 200
};
LayoutRoot.Children.Add(line);
}
I've tried putting the LayoutRoot..Add call before the SetValue/SetLeft but it doesn't seem to make any difference.
Try this :
this.LayoutRoot.Children.Add(r);
Canvas.SetLeft(r, 100);
Canvas.SetTop(r, 100);
Rather than:
Canvas.SetLeft(r, 100);
Canvas.SetTop(r, 100);
this.LayoutRoot.Children.Add(r);
Update : It got fixed since in XAML it is by default a grid tag as LayoutRoot. After changing it to a canvas tag and it no longer gets stuck.

WPF image thumbnail with the offset

I have an image 800x600 and I would show a thumbnail 90x30 with some offset x=12 and y 12.
I have created a brush but I am struggling to apply an offset.
var source = new ImageBrush(groundSource);
source.Stretch = Stretch.None;
source.AlignmentX = AlignmentX.Left;
source.AlignmentY = AlignmentY.Top;
source.RelativeTransform = new TranslateTransform(0.5, 0);
var grid = new Grid();
grid.ClipToBounds = true;
grid.Background = source;
grid.VerticalAlignment = System.Windows.VerticalAlignment.Top;
grid.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
grid.Margin = new System.Windows.Thickness(12, 12, 0, 0);
grid.Width = SpriteSize.SpriteWidht + 33;
grid.Height = SpriteSize.SpriteHeight;
grid.SnapsToDevicePixels = true;
I would appreciate any suggestions.
There is a hacky solution for this problem:
Add Image as a child to the Grid.
Set Grid attribute as ClipToBounds=true
Set Image margin to control thumbnail offset.

Resources