Develop Reference

Nozzle geometry WPF

I'm currently doing a CFD simple problem with C# in WPF analyzing a quasi-one-dimensional flow (only varying with x) and I want to represent the results in a "decent" way. Hence, imagine it as a rectangle with a given number of vertical sections. The form is not a rectangle, but a nozzle. What I was wondering is if there is a way of representing with Stackpanels or something similar a certain form.
In the image attached the shape can be seen, to help understand the problem.
Every section (a rectangle "cut" by the edges of the nozzle) has a temperature associated and already computed.Just to give an example, a temperature value of 250 for the section drawn, and for example I want to paint it with a Red color.
My question is: Is there any way of "shaping" stackpanels or something similar to display something like the shape shown?
I've searched for information and this is the most similar option found:
<Path Stroke="Black" StrokeThickness="1">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="10,100">
<PathFigure.Segments>
<PathSegmentCollection>
<QuadraticBezierSegment Point1="200,200" Point2="300,100" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
Which draws this image. What I would like to construct is the nozzle with this method and be able to divide it or place vertical segments inside it as suggested at the first image, painting them according to the value they have.

You have defined a pretty complex problem which may be too much for a single SO question. By no means am I providing a complete solution to your problem. But maybe it will be enough to point you in the right direction. From there, you can start on your own solution and ask further questions if you get stuck.
Your best solution is probably to manually draw shapes on the canvas using c# (or possibly XAML).
Here's the best link I could find after a quick search.
https://msdn.microsoft.com/en-us/library/ms751808(v=vs.100).aspx
It is a Microsoft tutorial of drawing Geometry and Geometric Shapes in XAML and code.
See the section about path geometries.
I would think that by combining two ArcSegments for the curved sides and LineSegments connecting the two sides that you could get the basic shape you are looking for.
I think that for your rectangular "cuts", you will have to build those explicitly in code as well. It will be tricky to match their shape exactly when overlaying them over the nozzle. One simple work around could be to create all your horizontal bars and paint them. Then create a top and a bottom white overlay that covers up the rectangles. One overlay would have the shape of the top nozzle and cover the parts of the rectangles you don't want shown. And similarly for another shape that makes up the bottom of the nozzle.

Omit an edge from a shape in WPF (C# code)?

I'm creating a speech bubble control for my application, and the way I'm looking to do it is to use a rectangle with rounded corners, then place a shape on top that forms the "origin" of the speech bubble. These are arranged in a Grid so that the bubble resizes to its content whilst keeping the origin shape constant (i.e. it won't stretch). Now, here's my question; is it possible to create a Path in WPF with one of the sides omitted (i.e. so the stroke is omitted from that edge, but the fill is still present)?
I know I could do it by placing 2 shapes on top of each other, but I'm looking for a solution that's as simple as possible!
Thanks, Lee.

Yes, it's possible. You just omit one of the edges. The Fill will still be applied inside the shape:
<Path Fill="Beige" Stroke="Black" Data="M 0,0 L 20,0 L 0,20"></Path>

Manipulating Images in Windows Surface 2.0 (rotation)

I am using c# wpf for windows surface 2.0.
I have been working with a set of images that i import in the xmpl file.
I found some examples for text, but for the images they used GDI+ to manipulate images and animate them, but I do not want that.
The main thing that I want to do now is to rotate(transform rotate) an image and show that it is rotating.
Here is how I am addressing the images:
Canvas.SetTop(image1, 0);
Canvas.SetLeft(image1, 200);
Any help would be much appreciated.
Thank you.

If you want to rotate your image automatically and without user interaction, check Clemens' answer. However if you want to rotate with touch manipulations, I find it easy to put the image in a ScatterViewItem like so:
<s:ScatterView>
<s:ScatterViewItem CanMove="False" CanScale="False">
<s:ScatterViewItem.Background>
<ImageBrush ImageSource="yourImage.png" Stretch="UniformToFill"/>
</s:ScatterViewItem.Background>
</s:ScatterViewItem>
</s:ScatterView>
Of course, you have the overhead of having to put in a ScatterView and its content

Your question is not very specific and there are a lot of ways to animate the rotation of an image.
A simple approach would be to assign a RotateTransform to the RenderTransform of your Image controls and then animate the Angle property of these RotateTransforms.
<Image x:Name="image" Source="..."
RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<RotateTransform/>
</Image.RenderTransform>
</Image>
Start the animation in code like this:
var transform = (RotateTransform)image.RenderTransform;
var animation = new DoubleAnimation(360, TimeSpan.FromSeconds(5));
transform.BeginAnimation(RotateTransform.AngleProperty, animation);
You may start reading about animations in WPF in the Animation Overview article on MSDN. The Transforms Overview article may also be helpful.

Lines in a windows store app

Just a simple question: I'm developing a Windows store app and for one function I want to show an intercept theorm. For that (now my question) I need some lines. Do I need to create an Image or is there any other possibility to display simple lines on a XAML-Form (I'm using XAML and C#).
I'm coming from Windows forms and there I used a line control from the Toolbox, but I can't find anything like that in the Toolbox of VS for Windows 8. I also had the idea to use GDI, but I read that it doesn't exist any longer (am I wrong?).

You should draw shape elements, in your XAML (or code-behind).
See MSDN: http://msdn.microsoft.com/en-us/library/windows/apps/hh465055.aspx

you can use like bellow
<Line X1="0" Y1="0" X2="100" Y2="100" Stroke="Red"></Line>
this draws a line from (0,0) to (100,100).
don't forget to use stroke otherwise it won't be displayed.

How do I animate a PathGeometry to show itself slowly?

Hi have the following piece of XAML
<Path Stroke="#FF000000" StrokeThickness="3" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Name="kvg_0994c_s1">
<Path.Data>
<PathGeometry FillRule="Nonzero" Figures="M28.27,12.64C28.32,13.27 28.52,14.32 28.17,15.16 25.86,20.7 19.22,31.55 9.81,39.71" />
</Path.Data>
</Path>
I wish to animate the PathGemorty to reveal itself slowly (over 2 seconds or so). Basically the effect that I am after is drawing a line on the screen automatically, in particular the path that is specified in the code above.
I need to do this in C# code as I am loading the XAML dynamically from an external file. Any help would be greatly appreciated.

You must use WPF animation for it. Look here: http://msdn.microsoft.com/en-us/library/ms752312.aspx More information about animation you can find in excellent book "Windows Presentation Foundation Unleashed" by Adam Nathan.
I think you can find exact answer on your question here: http://social.msdn.microsoft.com/Forums/en/wpf/thread/19a7bd4b-cf28-4b31-a329-a5f58b9ec374

what do you mean by 'reveal itself slowly' ? You mean like it was drawn bit by bit ? Then you'll have to decompose the Data, then re-compose a geometry adding elements one by one. So you might, using the Path's name (kvg_0994c_s1) in code behind, (and assuming the Path.Data is always a PathGeometry, so you can cast it to PathGeometry) you get the PathGeometry.Figures in an initial List, then clear the figures in the displayed Path. Then you set-up a timer (a DispatchTimer might be enough) to call a function every 200ms or so and in this function you add one by one the figures to the PathGeometry.Figures of the displayed path. You might have to adjust both the number of parts you add each time, and timer values to get the effect you want. And if you want constant 'speed' -> you have to compute the length of each part and adjust. But it might be nice to have non-constant speed to look more like hand-drawing.