I am looking to draw an equilateral triangle with rounded corners in Expression Blend, kind of like the radius of the rectangle behaves.
I am thinking along the lines of drawing a circle/arc at each end-point and clipping, but this is cumbersome.
Is there a shape that can do this or do you have any other ideas on how to do this?
Thanks
It may be a little late, but just in case someone is trying to do the same...
I was trying to do the same, struggling with the lines in blen... I got discouraged and finally did it in Adobe Illustrator, then import my illustrator file in blend... IT WORKED! :D.
Here is a basic Rounded Triangle you can use and resize as you need with the width and height
<Grid x:Name="Root">
<Path Data="M42.6987,213C26.1987,213,19.5187,201.349,27.8537,187.109L115.1947,37.891C123.5307,23.651,137.1687,23.651,145.5047,37.891L232.8457,187.109C241.1807,201.349,234.4997,213,217.9997,213L42.6987,213z" Fill="White" Canvas.Left="-0.5" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="Black" StrokeThickness="3" StrokeMiterLimit="10" StrokeLineJoin="Miter" Canvas.Top="-0.5" Width="45" Height="30" RenderTransformOrigin="0.5, 0.5" />
</Grid>
Draw a line with an arc at each end point. You can then group all these three shapes and play along from there.
Related
I think I might have found a bug in WPF, or maybe I just don't fully understand how OpacityMasks work. As you can see on the first image, I have a diamond shaped path and a red circle. My goal is to make everything outside the diamond invisible. It works when the circle is inside the diamond shape, but whenever I move it to one of the corners, or outside the path, the OpacityMask seems to get stretched or distorted as you can see on the second image. My question is how can I make the OpacityMask work regardless of where the circle (or any other child element) is.
First image
Second Image
And this is my XAML code
<Grid Name="rootGrid">
<Grid>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=path}"/>
</Grid.OpacityMask>
<Path Name="path"
Stretch="Fill"
Fill="Cyan"
StrokeThickness="1"
Stroke="GreenYellow"
Data="M 0,-1 1,0 0,1 -1,0 0,-1"/>
<Ellipse Fill="Red"
Margin="20,-17,22,61"/>
</Grid>
</Grid>
Sorry for posting the images with links, but I don't have enough reputation to directly embed images.
Any help is appreciated!
Clemens solved my issue
Set ViewportUnits="Absolute" on the VisualBrush, and then set its Viewport property to an appropriate rectangle, e.g. Viewport="0,0,100,100"
I have a drawing with <Path> element. It contains dificult Data attribute so how I can show part of this path.
There are certainly several ways to do this. A very easy one would be to put the Path in a Canvas, set its position inside the Canvas and clip it by the Canvas' bounds:
<Canvas Width="80" Height="60" ClipToBounds="True">
<Path Canvas.Left="-10" Canvas.Top="-10" Data="M0,0 L100,0 100,100 Z"
Stroke="Black" StrokeThickness="2" Fill="AliceBlue"/>
</Canvas>
make use of Blend tool for this where if you copy the data attribute for the path, you could see how it is generated.
It would make your job easier to modify the path as well see the data generation at the same time.
I'm trying to build an application that reveals a picture covered initially with a solid color(black). The idea is that when I click somewhere on that black screen (initially) a circular area around the black pixel I clicked to be made transparent so I can see the image behind.
The solution that I came up with is to use a canvas with the picture I want covered set as background. The black cover will be divided in pixels (stored on a matrix perhaps - the image will be maximum 500x500). All those pixels will be colored black initially and then, knowing the pixel the user clicks make transparent (or delete) all pixels around that one until I clear a circular area with a preset diameter.
I don't have much experience with canvases and this solution seems quite rough to me. I wanted ask a second opinion, or if someone can give me a better solution
I'm developing the app in Silverlight, if that's relevant.
Thanks!
After some time I spend reading about silverlight controls I ended up using Image.Clip. Here's an example in case somebody like me needs it:
<Image Source="Images/img.jpg" Width="150" Height="150" Canvas.Left="30" Canvas.Top="19">
<Image.Clip>
<GeometryGroup FillRule="Nonzero">
<EllipseGeometry RadiusX="20" RadiusY="20" Center="100,100"></EllipseGeometry>
<EllipseGeometry RadiusX="20" RadiusY="20" Center="80,100"></EllipseGeometry>
<EllipseGeometry RadiusX="20" RadiusY="20" Center="80,83"></EllipseGeometry>
<EllipseGeometry RadiusX="20" RadiusY="20" Center="60,60"></EllipseGeometry>
</GeometryGroup>
</Image.Clip>
</Image>
Of course, ellipses can be placed programmatic.
I want to get a window like this
How should i get this and i am confused between Border and Rectangle in XAML.
Border is a container control aos its use is pretty simple to get, what is the use of ractangle as it can't contain any control in it.
Kindly help
Neither Border nor Rectangle will achieve this, you probably need a Path or something similar.
I would like to answer your last question
What is the use of ractangle as it can't contain any control in it.
Yes it can't contain any controls, but you can always draw it in the background
<Grid>
<Rectangle/>
<TextBlock/>
</Grid>
The user will propably don't see any difference. Why having two different Controls for that? Not sure, but my guess is that a Border is a shortcut to have a rectangle around a control, there might be more behind it, but thats how i see it. Also a Rectangle is a Shape, and it makes sense to have a Rectangle besides an Ellipse, Line etc.
You can draw a plygon as follow:
<Polygon
Points="100 50, 100 150,250 150, 250 75, 225 50"
Stroke="Black"
StrokeThickness="2">
<Polygon.Fill>
<SolidColorBrush Color="White"/>
</Polygon.Fill>
</Polygon>
Here you can find some other interesting example
This path is like your shape, if you use Expression Blend you can draw it into the editor.
<Path Data="M20.5,0.5 L153.81876,0.5 194.5,41.181242 194.5,103.5 C194.5,114.54569 185.5457,123.5 174.5,123.5 L20.5,123.5 C9.4543047,123.5 0.5,114.54569 0.5,103.5 L0.5,20.500004 C0.5,9.4543067 9.4543047,0.50000197 20.5,0.5 z" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black" HorizontalAlignment="Left" Height="124" VerticalAlignment="Top" Width="195"/>
The MediaElement doesn't support rounded corners (radiusx, radiusy). Should I use a VideoBrush on a Rectangle with rounded corners?
Yeah - In a way you're both asking and answering the question yourself... But that is one of the two options I can think of. The reasons that might be a problem is that you lose some of the features/control you get from the MediaElement control. Another option is to do this:
Add your MediaElement to your page.
Draw a Rectangle on top of it and set wanted corner radius
Right click the rectangle in Blend and choose "Create Clipping Path"
Apply the clipping path to your MediaElement
That way you're still using a MediaElement control, but you can "clip" away what ever you want to get the desired rounded effect.
This example shows a clipped MediaElement. I know it's not easy to picture the vector path, but if you open it open in Blend you will see a rounded MediaElement.
<MediaElement
Height="132" Width="176" Source="Egypt2007.wmv"
Clip="M0.5,24.5 C0.5,11.245166 11.245166,0.5 24.5,0.5 L151.5,0.5
C164.75484,0.5 175.5,11.245166 175.5,24.5 L175.5,107.5 C175.5,
120.75484 164.75484,131.5 151.5,131.5 L24.5,131.5 C11.245166,
131.5 0.5,120.75484 0.5,107.5 z"/>
Using a rounded rectangle and a VideoBrush doesn't lose you any features/control over using a displayed MediaElement - since the element has to be in the Xaml anyway, you can control it using the usual Play/Pause/Stop methods, except that the playback happens in your rectangle. Using a clip region is a little unwieldy because it's harder to resize the region. A Rectangle is better because you have flexibility of layout.
<MediaElement x:Name="myElement" Source="clip.wmv" Visibility="Collapsed"/>
<Rectangle RadiusX="10" RadiusY="10" Width="640" Height="480">
<Rectangle.Fill>
<VideoBrush Source="myElement" Stretch="Uniform"/>
</Rectangle.Fill>
<Rectangle/>
The clip path with give you "hard" edges - you could also use an OpacityMask as well (though I imagine this requires much more processing power).
Try this
<Border CornerRadius="8" BorderBrush="Black" Background="Black" BorderThickness="3">
<MediaElement HorizontalAlignment="Center" VerticalAlignment="Top" Stretch="Fill" x:Name="Player" Source="/Assets/Videos/x.mp3" />
</Border>