When I run this code in WPF it gives me 1/4 of a circle. When removing the ClipToBounds tag, i get my whole circle.
1. Why is it clipping before rendering?
2. How to i fix that, while keeping clipping?
<Canvas ClipToBounds="True">
<Ellipse Canvas.Left="-10"
Canvas.Top="-10"
Width="20"
Height="20"
Fill="LightSeaGreen"/>
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="4.8"
ScaleY="4.8"
CenterX="0"
CenterY="0"/>
<TranslateTransform X="48"
Y="48"/>
</TransformGroup>
</Canvas.RenderTransform>
</Canvas>
Why is it clipping before rendering?
It's not.
As you can see from here:
Your Ellipse is rendered perfectly. The ClipToBounds="True" is what ruins is as you can see from your Canvas:
How to i fix that, while keeping clipping?
This is quite a broad question. Your problem comes from the fact you are putting your Ellipse outside the Canvas (Canvas.Left="-10" Canvas.Top="-10") and then you clip it. Explain what is your goal and I can try to help you out.
This behaviour is by design. The authors of the textbook (Computer Graphics: Principles and Practice - Third Edition) have confusingly introduced ClipToBounds in a way that makes it seem like it is a part of the examples that follow in the book. In fact, they are not using ClipToBounds="True". You can verify that by downloading their lab package from http://sklardevelopment.com/graftext/ChapWPF2D/ .
To illustrate, here is the actual source code for one of their examples:
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Name="ClockCanvas" >
<Ellipse
Width="20.0" Height="20.0"
Canvas.Left="-10.0" Canvas.Top="-10.0"
Fill="lightgray"/>
</Canvas>
Note that there is no ClipToBounds="True" on the canvas.
Related
I've downloaded the sample here: https://code.msdn.microsoft.com/windowsapps/Media-Capture-Sample-adf87622
I have compiled and everything runs perfectly. However I want to rotate the camera so that it is in portrait mode. After consulting the documentation I found the following code:
MediaCapture.SetPreviewRotation(VideoRotation.Clockwise270Degrees)
and
MediaCapture.SetRecordRotation(VideoRotation.Clockwise270Degrees).
I have added the two lines above and it has indeed rotated the output which is exactly what I am after. The only issue is the preview now has an orange and blue distortion running through it. The Recording one worked perfectly.
Any ideas?
I ended up using the following code for the preview:
<Canvas x:Name="previewCanvas1" Width="576" Height="720" Background="Gray">
<CaptureElement x:Name="previewElement1" Width="720" Height="576" RenderTransformOrigin=".5,.5" >
<CaptureElement.RenderTransform>
<RotateTransform Angle="270" CenterX="0.5" CenterY="0.5" />
</CaptureElement.RenderTransform>
</CaptureElement>
</Canvas>
I'm looking for a way to add a Drop Shadow Effect to the multiple kind of elements in my Windows Phone 8.1 Runtime (not Silverlight!) application. The main problem is that.. there's no offical API for it. The main problem is that I need to mimic this effect not only to the basic shapes (like rectangle or a line), but also a path, like here:
Picture is borrowed from this question: path-with-broken-shadow-effect - I hope the owner won't mind ;) Now, he has achieved this effect because it was done in WPF. I'm working on a Universal App (so WinRT), and there's no Effects extension.
I've searched the web multiple times, and found some kind of workarounds, but they all miss something. For example this one:
http://www.silverlightshow.net/items/Simple-Xaml-Drop-Shadows-in-Silverlight-2.aspx <- I can't work on Canvas, the content has to be a Grid.
Do you any idea how can I achieve satisfying results on faking Drop Shadow Effect in Windows Phone 8.1 Runtime?
Apply a RenderTransform to the shadow shape. Set the scale to make it bigger:
<Grid Style="{StaticResource LayoutRootStyle}" Background="#FF803535" >
<Rectangle Width="100" Height="100" Opacity="0.3" RenderTransformOrigin="0,0" StrokeThickness="16" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeStartLineCap="Round" Stroke="Black" >
<Rectangle.RenderTransform>
<CompositeTransform ScaleX="1.07" ScaleY="1.07" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="100" Height="100" Fill="Blue"></Rectangle>
</Grid>
I'm new to WPF and would like to know what to use to get a shape like the image below:
I also wonder if it is possible that this design may follow the form's dimensions, ie, if the form is resized, the design is too.
In advance, thank you!
Windows 8.1, Visual Studio 2013, C#, WPF Application
To draw the shape you can use a Path. A path can draw any type of shape specified by its Data property. The Fill and Stroke defines the colors of the shape.
To "follow the form's dimensions" you can set the Stretch property to "Uniform". The shape will then scale accordingly to the window.
Here is an example:
<Window x:Class="WpfApplication57.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="600" Width="800">
<Grid>
<Path Data="F1 M 0 0 800 0 800 30 200 30 150 60 0 60 0 0"
Fill="Yellow"
Stretch="Uniform"
Stroke="Black"
StrokeThickness="4"
VerticalAlignment="Top" />
</Grid>
</Window>
Happy coding :-)
Best regards,
Casper Korshøj
You can use a Path to get that shape and you can even use Blend to draw any shape, if you want just shapes.
<Path Data="M200.125,197.375 L200.125,190.25 277.375,190.25 277.375,191.5 277.375,192.375 220,192.375 217.25,195.125 214.5625,197.8125 z" HorizontalAlignment="Left" Height="8.562" Margin="200.125,190.25,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="78.25" Fill="#FFF0F00C"/>
That should give you the Shape you wanted and in the comment mention above use that link
http://msdn.microsoft.com/en-us/library/ms747393%28v=vs.110%29.aspx
I'm trying to reuse a class that I implemented a long time ago in Windows Forms in a new WPF project. This class overrides the OnRender method that uses an object Graphics that draws various objects on the form. Now that I'm using my class in WPF, I have substituted the Graphics object with the DrawingContext object, but some methods of the Graphics class aren't implemented. In particular the methods FillPie, FillEllipse, DrawBeziers are the ones that I need.
Does a class exist that implements these methods? How can I implement these methods?
This is a simple example of how something like this could work in practice.
<Window x:Class="WpfApplication4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Width="500"
Height="500">
<StackPanel>
<Slider Name="PositionSlider"
Margin="10"
Maximum="50"
Minimum="1"
Value="10" />
<Canvas Width="300" Height="300">
<Path Fill="Gold"
Stroke="Black"
StrokeThickness="1">
<Path.Data>
<EllipseGeometry Center="150,150"
RadiusX="{Binding ElementName=PositionSlider,
Path=Value}"
RadiusY="{Binding ElementName=PositionSlider,
Path=Value}" />
</Path.Data>
</Path>
</Canvas>
</StackPanel>
</Window>
The above WPF shows a simple slider and a circle. The radius of the circle is databound to the value of the slider. As you move the slider the circle because bigger or smaller. In your old world when the slider ( ie. your zoom state changed) you will get a repaint in which you will draw a bigger smaller circle. But in the WPF world this is taken care of by dependency properties and databinding.
The above example is very elementary , you can do more complicated things by doing multibinding bindings with value converters and objects implementing dependency properties and INotifyPropertyChanged all of which is too much to explain in one answer.
I am in the following situation: designing an interactive flow-chart GUI. I stuck with animating a scale down animation of the flow-chart. Composed elements of the flow-chart are minimized, but they keep being active.
I have something like this:
<Canvas Canvas.Left="55" Canvas.Top="720" Height="100" Width="500" Tag="stepDown">
<Line Stroke="#99CCFF" StrokeThickness="8" X1="0" X2="720" Y1="10" Y2="10">
<Polygon Stroke="Black" StrokeThickness="2" Points="0,30 40,0 40,60" Canvas.Left="-20" Canvas.Top="-20" Fill="#99CCFF"></Polygon>
<Polygon Stroke="Black" StrokeThickness="2" Points="0,0 0,60 40,30" Canvas.Left="720" Canvas.Top="-20" Fill="#99CCFF"></Polygon>
<Image Canvas.Left="-50" Canvas.Top="-70" Height="53" Name="image32" Source="img/outlet.png" Stretch="Fill" Width="30" Tag="relative" />
</Canvas>
And I would like to shift the whole canvas and its elements to the left - no problem with Translate Transform. Furthermore I would like to scale down only the Line, no problem with Scale Transform.
But (!) at the same time, I want that the Polygons stick to the two line endings of the line. When scaling down only the line, the Polygons, at least one, floats away.
I don't know how to dock these elements or define them at a relative basis. It works fine with a scale down on the whole Canvas, but this changes the Polygon and Images as well.
In order to me you have to define hanchors points, as attached properties. Even define a behavior that track these points accordingly to poligon placements. Then you can bind these property to the line start/end point. In this way line should stay gripped to the polygons. But I did'nt try, is just a design idea.