I have WPF/VB application that animates an ellipse geometry along a path using point animation. I used PointAnimationUsingPath and a Storyboard as per this MSDN example and it works great.
I now want to show a number inside the ellipse. To do this I created a combined geometry and set my ellipse as geometry1. I then created a formattedtext(...).buildgeometry for my number and set that as geometry2. Like this:
Dim CarGeo AS New CombinedGeometry()
CarGeo.Geometry1 = New EllipseGeometry(StartPoint, 5, 5)
CarGeo.Geometry2 = New FormattedText(carIndex.ToString, System.Globalization.CultureInfo.GetCultureInfo("en-us"), Windows.FlowDirection.LeftToRight, New Typeface("Veranda"), 7, Brushes.White).BuildGeometry(New Point(StartPoint.X - 4, StartPoint.Y - 4))
The resulting geometry is exactly what I wanted.
The problem is I don't seem to be able to animate this geometry along my path because unlike an ellipse there is no center property in a combined geometry to set the targeted property to on the StoryBoard.
' Create a PointAnimationgUsingPath to move the car along the animation path.
cpAnimation = New PointAnimationUsingPath
cpAnimation.PathGeometry = pgSectorPath(intSector)
cpAnimation.Duration = timDuration
' Set the animation to target the Center property of the EllipseGeometry
Storyboard.SetTargetName(cpAnimation, "CarGeo")
Storyboard.SetTargetProperty(cpAnimation, New PropertyPath(EllipseGeometry.CenterProperty))
Is there I property in a combined geometry that I can use for the animation?
If not can I wrap the geometry in something else that can be animated?
I'm very new to WPF and have wasted way too much time searching for an answer to this. Any help would be greatly appreciated.
Just wrap the CombinedGeometry into a Path object, as in the MS example:
http://msdn.microsoft.com/en-us/library/system.windows.media.combinedgeometry(v=vs.110).aspx
Related
I need to draw a pushpin for the Bing Silverlight control that can have the head be a variable color. I can draw a nice dot like this:
Dim marker As Ellipse = New Ellipse
marker.Fill = New SolidColorBrush(Color.FromArgb(255, 11, 255, 0))
marker.Stroke = New SolidColorBrush(Colors.Gray)
marker.Width = 10
marker.Height = 10
I'll be making dozens of pushpins, each with a slightly different color for the Fill. How can I add the pointy part? I would like to have some amount of flaring out at the top so that it looks more like a pushpin and less like a lollipop.
Examples in C# are welcome as well.
Maybe there's a reason you need it to be a custom one rather than using the built-in pushpin objects, but if not, you can set the background color on those pushpins like so:
myPushpin.Background = new SolidColorBrush(Colors.Gray);
As far as actually drawing your own, I'm not as sure. Could you draw some sort of a triangle?
I am working on a paint like application in wpf.I want the users to be able to add some drawings over images or plain surfaces.Also i want to draw some basic shapes like line,ellipse or a rectangle.I am trying to work with an inkcanvas,where i can do freehand drawing,but i cant draw shapes like in paint.Can anyone guide me and provide some clues on how to do it.Please help me on this.Any inputs will be greatly appreciated.
There are two sorts of collections in an InkCanvas:
Strokes, which are composed of StylusPoints and defined by DrawingAttributes. That's what the Ink is, as drawn by a mouse or stylus.
The other is Children, which can contain FrameworkElements. Ellipse, for instance, is a Shape is a FrameworkElement.
Try playing around with yourCanvas.Children.Add(ellipse) and see how you go. There is certainly no reason to shy away from the InkCanvas just because you also want to use predefined shapes.
It's worth pointing out, though, that the InkCanvas's little brother, the InkPresenter, does NOT have a Children property. And Silverlight only has that one.
WPF provides a Shape class that includes prebuilt methods that you can draw shapes with. Don't use the inkcanvas and instead draw directly to a canvas.
Here http://ciintelligence.blogspot.com/2011/07/silverlight-drawing-tool-silver-draw.html
you can find better control which improved SilverDraw control with extra features:
Freatures are:
* You can draw basic shapes and also can draw using freehand pencil.
* You can erase drawing.
* You can undo and redo drawing.
* Can save drawing as jpeg in server side.
Here is a simple implementation:
public void drawCircleAp(Double EHeight, Double EWidth, InkCanvas surface)
{
Ellipse e1 = new Ellipse();
e1.Width = EWidth;
e1.Height = EHeight;
var brush = new SolidColorBrush();
brush.Color = Color.FromArgb(100, 0, 0, 0);
e1.Stroke = brush;
e1.StrokeThickness = 4;
surface.Children.Add(e1);
}
I am new to Silverlight. Just created my first application that shows deepzoom images.
Looking for some pointers how to display vector graphics in Silverligth. The graphics are all in 2D and is a series of lines (x1y1, x2y2), points (xy), basic shapes. The data is available in ASCII text files.
What is the way(s) to read the data from files and draw in SL? Do I need to convert / translate the vector objects into images (XAML) first? Where to start?
The ideal case is that all vector obects should be selectable either programmatically or by user actions.
Thanks,
Val
There is no direct drawing API to my knoweldge, but you can add the values seperately by adding various shapes to the visual tree.
The code you are looking for will likely involve the Path class and, in turn, PathFigure and PolyLineSegment (or possibly LineSegment).
Below is some code that draws a square:
PolyLineSegment segment = new PolyLineSegment();
segment.Points.Add(new Point(0, 50));
segment.Points.Add(new Point(50, 50));
segment.Points.Add(new Point(50, 0));
segment.Points.Add(new Point(0, 0));
PathFigure figure = new PathFigure()
{
StartPoint = new Point(0, 0)
};
figure.Segments.Add(segment);
PathGeometry geometry = new PathGeometry()
{
Figures.Add(pathFigure)
};
Path path = new Path()
{
Stroke = new SolidColorBrush(Colors.Black),
StrokeThickness = 2,
Data = pathGeometry
};
// To render, the Path needs to be added to the visual tree
LayoutRoot.Children.Add(path);
Edit If the data in the ASCII text files cannot change at runtime, it might be worth investigating writing a script that transforms the files into XAML so it can be compiled.
First of you have the issue of actually getting access to the files.
Getting the file content
If you have these files held somewhere serverside then you would use WebClient to fetch the file using DownloadStringAsync.
On the other hand if the user is to open a file locally then you need use the OpenFileDialog class to ask them to open the file and then use OpenText on the FileInfo object that OpenFileDialog provides to read the string data.
Parsing
Well its your format so you'll have to code that yourself.
__Generating UI elements_
You will not have to convert it to Xaml. Since you want these vector items to be individually selectable elements then you probably want to use the set of Shape types found in the System.Windows.Shapes namely, Elipse, Line, Path, Polygon, Polyline and Rectangle.
No doubt the format in question has someway to define the position of these elements relative to a fixed 0,0 point. Hence the best panel to use to display these is a Canvas.
You would read through each Vectored item, select create an instance of one of the appropriate shapes set its properties based on the data in the item. You would need to determine its correct location within a Canvas and use the Canvas.Left and Canvas.Top attached properties. The add the shape to the Children collection of the Canvas.
How do you get an image to be reflected in wpf without using the xaml? I have a rectangle with a BitmapImageBrush as its fill. I want to be able to regularly flip this image (X-axis) back and forth at will in C#. I've read about using the ScaleTransform property but this only seems to work in the xaml and that's not what I want.
This is how the image is created:
ImageBrush l = new ImageBrush(new BitmapImage(new Uri(uriPath, UriKind.Relative)));
_animation.Add(l);
_visual = new Rectangle();
_visual.Fill = _animation[0];
_visual.Width = width;
_visual.Height = height;
_visual.Visibility = Visibility.Visible;
_window.GameCanvas.Children.Add(_visual);
_animation is a list of ImageBrushes.
This is really simple, yet I can't seem to figure out how to do it. Please help.
You can still add a scale transform programmatically, rather than using xaml.
For instance, in this article.
To do the flip, set your scale transform to be negative in the direction you want to flip (ie, if horizontal, set x to -1, or -desiredScale if you also want to resize).
I would like to create a visual effect when an item in a listbox is double clicked. So far I have drag and drop functionality where the item is visually attached to the mouse and can be moved to a drop target. From that functionality I am able to animate the item using the same logic of getting the item container, however I am not able to leave the items control. Is there any way to remove the item from the ListBox and visually animate it to another location? Basically the main list box is a hand of cards. When a card is double-clicked I want it to visually move from the hand listbox to a discard listbox. As of now, the logic for moving the item from one collection to another is no problem, however I would really like an animated visual representation of this event. Any ideas or references on how to do something like this would be appreciated.
Thanks,
Brandon
Further Details on what I have attempted:
There are some concepts that I do not yet have a strong grasp of yet, which has led me to run face first into this wall. I have a method that I pass in(some may be unnecessary) the ListBox as an ItemsControl, a FrameworkElement that is the listbox item, and the data object associated with the ListBox item. What I attempted to do was FindVisualChild of the ListBoxItem that is a canvas. I can do that. In my mind I was wanting to somehow clone the canvas either as a canvas or as a bitmap, add it to the children of the child of the page in the same location, remove the ListBoxItem from the ListBox, and animate the clone to the discard pile. When the animation completes the clone will be removed or hidden, and as that object is added to the discard pile collection it will effectively take the replace the clone.
My problem with this, is that I feel like there really is a simpler way of doing this using the adorner layer or something. I also, don't know how I would position the clone at the exact same position in the element further up the visual tree. I am going to keep working on it and researching other approaches, and I will just hope that someone will share some insight on this.
Here's some code I worked up to draw a visual to a bitmap. You may be able to adapt this to your needs, and draw the bitmap by adorning the UIElement that represents a common ancestor of the two list views. Note the use of FrameworkElement.TransformToAncestor to get the coordinates of a nested element in terms of an ancestor element.
public static BitmapSource CreateBitmapFromElement(FrameworkElement element, Double dpiX, Double dpiY)
{
Size elementSize = new Size(element.ActualWidth, element.ActualHeight);
Visual root = GetAdornerDecoratorAncestor(element);
Rect elementBounds = element.TransformToAncestor(root).TransformBounds(new Rect(elementSize));
RenderTargetBitmap rtb = new RenderTargetBitmap((Int32)(elementBounds.Size.Width * dpiX / 96.0),
(Int32)(elementBounds.Size.Height * dpiY / 96.0),
dpiX,
dpiY,
PixelFormats.Pbgra32);
DrawingVisual dv = new DrawingVisual();
using (DrawingContext dc = dv.RenderOpen())
{
VisualBrush vb = new VisualBrush(root);
vb.ViewboxUnits = BrushMappingMode.Absolute;
vb.Stretch = Stretch.None;
vb.Viewbox = elementBounds;
dc.DrawRectangle(vb, null, new Rect(new Point(), elementBounds.Size));
}
rtb.Render(dv);
return rtb;
}
public static Visual GetAdornerDecoratorAncestor(DependencyObject obj)
{
while(obj != null && !(obj is AdornerDecorator))
{
obj = VisualTreeHelper.GetParent(obj);
}
return obj as AdornerDecorator;
}
OK, you could try taking a Visual element and setting it's background to a visualbrush of your ListItem and animate that to the other list box. You can wait for the storyboard completed event to actually do the switch. If this were me, I would animate from one box only to the edge of the other. If the switch happens fast enough it should look pretty seamless to the user. Finding the exact position of where the item is supposed to go into the list box would be pretty complex based on any sorting/filtering rules you have.
If the two listboxes are always in the same position, you could try animating the double-clicked item to a predetermined spot, let's say half-way between the old list and the new list. Then execute the code to move the item to the new list, but use a style that immediately starts an animation on that item starting it from that predetermined location and animating to its location in the new list. You'd probably have to tweak the initial offset of the new item at runtime based on where it's inserted in the list.