I would like to make a sector of a circle on WP7. I tried to do this with the ellipse class and I found a lot of solution, which make a gauge or pie chart or something, but I need just the essence.
Could anyone help?
the aim is to show just one part of a circle (or ellipse). Like the yellow area in the picture:
Thanks,
Laci
Here's a fairly simple solution to the problem, though it does not use an Ellipse and it requires a little trigonometry:
<Path Fill="Black"
Data="M0,0 L0,-100 A100,100 0 0 1 70.7,-70.7 z" />
The Data property uses Path Markup Syntax.
The "M" at the beginning tells the pen to Move to the location 0,0.
The "L" tells the pen to draw a Line from the current location (0, 0) to 0,-100.
The "A" tells the pen to draw an elliptical Arc from the current location to 70.7,-70.7 (the "100,100" portion determines the horizontal and vertical radius of the ellipse and the "0 0 1" portion is for RotationAngle, IsLargeArc, and SweepDirection (1 for clockwise, 0 for counter-clockwise)).
The "z" tells the pen to close or complete the shape (which will cause a line to be drawn from 70.7,-70.7 back to 0,0).
Where did the 70.7 come from? Well, this particular arc sweeps out an angle of 45 degrees from a circle with radius 100, so the coordinates 70.7,-70.7 are determined by 100 * sin(45) and 100 * cos(45).
You need to do something like this:
define a canvas wrapper for ellipse
define the visible part of the canvas (clip). For this part you need to use PathGeometry as the Clip to define the slice of the circle you want to be visible. (see link)
<Canvas>
<Canvas.Clip>
<PathGeometry>
// define your path here (see link above)
</PathGeometry>
<Ellipse Background="Yellow" Width="200" Height="200" />
</Canvas.Clip>
</Canvas>
Alternatively you can use CombinedGeometry to combine a PathGeometry and EllipseGeometry to form the slice. (the link provides a good example of CombinedGeometry)
Related
I am drawing a sequence of lines with DropShadowEffect in WPF. I want all the effects to display behind all the lines. So I drew the sequence twice: The first time I set Line.Stroke to Transparent and added the effect, and the second time I set Line.Stroke how I wanted and left off the effect. Unfortunately, a transparent stroke seems somehow to hide the effect as well, so my first sequence of lines doesn't display anything. Setting StrokeThickness to 0 also hides the effect. How can I show Line.Effect without showing the Line itself?
As commented, WPF - Element is invisible but has dropshadow effect asks the same question I do, but I want a code solution if possible, not just a Blend feature.
A dropshadoweffect is a sort of gaussian blur.
It takes pixels and sort of copies them offset.
You need something to copy.
So the answer is no, you cannot.
You could maybe try clipping the line to remove it, but I would think that's going to give you a hole where the line was.
In fact if you take the question as stated then the shadow is a blurred version of the line offset by a few pixels.
If your line is say:
<Line X1="0" X2="100" Y1="0" Y2="150"
StrokeThickness="5"
Stroke="Black">
<Line.Effect>
<DropShadowEffect/>
</Line.Effect>
</Line>
The shadow is something like:
<Line X1="4" X2="104" Y1="3" Y2="153"
StrokeThickness="5"
Stroke="Black">
<Line.Effect>
<BlurEffect/>
</Line.Effect>
</Line>
If this is not exactly what you want I could give you code which does a box blur on a black white image.
It's not as neat as gaussian but gaussian is hard to code. You'd have to paint your lines then blur em.
For interest
This is an explanation of the gaussian algorithm:
https://blog.en.uwa4d.com/2022/08/11/screen-post-processing-effects-chapter-1-basic-algorithm-of-gaussian-blur-and-its-implementation/#:~:text=Gaussian%20Blur%2C%20also%20known%20as,pixel%20values%20in%20the%20field.
I need to put a image as background of whole page, and put over it a rectangle with a transparent circle hole. The example result is bellow.
Update
I found some solutions using Geometry.Combine, but this does not exists in WP8. With this aproach I could draw a rectangle and a circle and combine both using GeometryCombineMode.Exclude. But this method seems to not exist in WP8. How create something that can I achieve a similar result to Geometry.Combine to create a hole inside a element?
You should look into the Path element and learn the mini-language for the path data. This is a rough example:
<Path x:Name="path" Data="M0,100 v-50 h100 a10,10,0,1,0,50,0 h100 v50 z" Fill="Gray" />
Basically:
Move down 100 px
vertical line up 50 px
horizontal line 100 px
arc of radius 10 px (with some magic; read the docs ;-) )
horizontal line of 100 px
vertical line of 50 px
**z* (automatically complete the path)
I need to draw a sine curve (from x = 0 to 2pi) as part of a DrawingVisual and would like to use WPF's basic path capabilities to get a smooth curve. Probably I need some sort of bezier curve for that. Unfortunately I don't even know how they work. (Just that they can "pull" the line towards a control point somehow.)
Can somebody tell me what coordinates I should use to make it look right?
I could apply a ScaleTransform if I want to stretch it a little, so the normal form would be fine.
A thread in the MSDN forums just brought me in the middle of a formula mess in Wikipedia's scientific depths. I haven't studied maths so that's not much use to me.
Nevermind, I played a while with Kaxaml and found this pretty neat. It's probably a bit stretched already, but it makes the plot more recognisable.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Path Data="M0,100 L50,0 L50,200 L100,100" Stroke="Gray" StrokeThickness="0.5"/>
<Path Data="M0,100 C50,0 50,200 100,100" Stroke="Red" StrokeThickness="3"/>
</Grid>
</Page>
The first Path (grey) shows the control points used and how they are on the same horizontal offset; the second Path (red, bold) shows the final bezier curve.
This is how it looks like:
I want to use an ImageBrush in a WPF element, and I want it to tile. But I want the image to line up with the bottom-left of the control, not the top-left. That is, instead of the top of the topmost tile being even with the top of the control, and a partial tile on the bottom end, I want it the other way around: the bottom of the bottom-most tile even with the bottom of the control, and a partial tile at the top. How can I do this?
Here's some XAML that repeats an image, but that anchors it to the control's top-left:
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="C:\Temp\triangle.png"
Viewport="0 0 31 31"
ViewportUnits="Absolute"
TileMode="Tile"/>
</Rectangle.Fill>
</Rectangle>
Here's an illustration of what this does, and what I'm looking for (including what I want to happen as the element resizes):
(source: excastle.com)
How can I anchor the tiled images to the bottom of the element instead of the top (and make sure they stay anchored at the bottom, even as the element resizes)?
The 'easiest' way is by calculating a other Viewport coordinates.
If the image is 20x20: Viewport="0 11 31 31" I could be wrong by a couple of units.
I have an image object and a rectangle object. Now I want to be the image to be only visible where the rectangle is, everything else should have an opacity of 0.5 - the result should look something simliar to the following:
When I set the opacity of the rectangle to 0.5 the effect is the antipode - so how could I realize it as shown in the image? Size and position of the rectangle is changed by code-behind, but that shouldn't make any differences...
All hints / answeres appreciated :)
If you want to add an opaque mask to partially hide your image outside of a rectangle, it's rather easy.
<Grid>
<Image Source="myImage.jpg" Opacity="0.5/>
<Image Source="myImage.jpg" >
<Image.Clip>
<RectangleGeometry Rect="x,y,w,h"/>
</Image.Clip>
</Image>
</Grid>
Where x,y,w and h are your rectangle position and size (see MSDN). If you want to move the visible portion around, set the Clip property by code.
If you want to add the "black stroke effect", you could simply add a Rectangle with position and size matching those of your clipping path after the second image in your grid.
Do you want more infos?