We Keep Coding

how to check if an element is going out of its parent in c# wpf

I am creating shapes at run time on canvas in my app and except all the shapes, ellipse is going out of canvas. How do I restrict it to canvas? All other shapes are contained in canvas because of the control points at their vertices. How do I keep a check as to not let ellipse go out of canvas without clipping. I have used ClipToBounds and it doesn't meet my needs.
Also, an alternate solution is if I can add a controlpoint at the left side of ellipse of radiusX property. I can't add a controlpoint to left side of radiusX on ellipse. If you could help me with either of that?
radiusXcp = new ControlPoint(this, EllipseGeom, EllipseGeometry.RadiusYProperty, 1, true, false);
radiusXcp.RelativeTo = EllipseGeometry.CenterProperty;
shape_ControlPoints.Add(radiusXcp);
radiusXcp = new ControlPoint(this, EllipseGeom, EllipseGeometry.RadiusXProperty, 0, true, false);
radiusXcp.RelativeTo = EllipseGeometry.CenterProperty;
shape_ControlPoints.Add(radiusXcp);
//EllipseGeom.RadiusX = -EllipseGeom.RadiusX;
//radiusXcp = new ControlPoint(this, EllipseGeom, EllipseGeometry.RadiusXProperty, 0, true, false);
//radiusXcp.RelativeTo = EllipseGeometry.CenterProperty;
//shape_ControlPoints.Add(radiusXcp);
//EllipseGeom.RadiusX = -EllipseGeom.RadiusX;

Here is a quick example of what i would do. It could be improved on and the code is mainly written to be easy to read and follow. It also does not handle the possibility to if the shape's size is bigger than the Canvas (not sure if that is a use case in your project).
For the example I used the "Loaded" event on the Canvas, to reset the position before drawing. You would want this check before you draw the Ellipse object.
private void TestCanvas_Loaded(object sender, RoutedEventArgs e)
{
//canvas = 450 x 800
Ellipse test_ellipse = new Ellipse();
test_ellipse.Width = 100;
test_ellipse.Height = 100;
test_ellipse.Fill = Brushes.Red;
Canvas.SetLeft(test_ellipse, 700);
Canvas.SetTop(test_ellipse, -500);
Reset_Ellipse_Bounds(TestCanvas, ref test_ellipse);
TestCanvas.Children.Add(test_ellipse);
}
private void Reset_Ellipse_Bounds(Canvas myCanvas, ref Ellipse myEllipse)
{
var left = Canvas.GetLeft(myEllipse);
var top = Canvas.GetTop(myEllipse);
//handle too far right
if (left + myEllipse.Width > myCanvas.ActualWidth)
Canvas.SetLeft(myEllipse, myCanvas.ActualWidth - myEllipse.Width);
//handle too far left
if(left < 0)
Canvas.SetLeft(myEllipse, 0);
//handle too far up
if (top < 0)
Canvas.SetTop(myEllipse, 0);
//handle too far down
if (top + myEllipse.Height > myCanvas.ActualHeight)
Canvas.SetTop(myEllipse, myCanvas.ActualHeight - myEllipse.Height);
}
For Completeness the XAML:
<Grid>
<Canvas x:Name="TestCanvas" Loaded="TestCanvas_Loaded" />
</Grid>
The idea is to check the bounding box against the Canvas edges. There are ways to improve this, but i figured the simplest solution is easier to follow.
Within each if statement you could add more logic or a method to do further processing, but this should answer the general question of knowing if it is outside the parent.

Just set ClipToBounds="true" to its father control, it avoids the canvas to be drawn outside of it.
In my case I set it to Grid as followed :
<Grid x:Name="MainGrid" Background="WhiteSmoke" ClipToBounds="true">
<Canvas Margin="10" Background="Transparent"
SizeChanged="ViewportSizeChanged"
MouseLeftButtonDown="ViewportMouseLeftButtonDown"
MouseLeftButtonUp="ViewportMouseLeftButtonUp"
MouseMove="ViewportMouseMove"
MouseWheel="ViewportMouseWheel">
<Canvas x:Name="canvas" Width="1000" Height="600"
HorizontalAlignment="Left" VerticalAlignment="Top">
<Canvas.RenderTransform>
<MatrixTransform x:Name="transform"/>
</Canvas.RenderTransform>
</Canvas>
<Canvas x:Name="canvas2" Width="1000" Height="600"
HorizontalAlignment="Left" VerticalAlignment="Top">
<Canvas.RenderTransform>
<MatrixTransform x:Name="transform2"/>
</Canvas.RenderTransform>
</Canvas>
</Canvas>
</Grid>

Apply outer outlines to text in WPF

Here there is a demo for a textBlock with an outlines.
With the code below I get this result
<local:OutlinedTextBlock Stroke="Red"
FontSize="16"
Fill="Transparent"
StrokeThickness="1">
abc
</local:OutlinedTextBlock>
The outline stands on the center of the border of the letter, how can I make the outline be out of the letters? I need the fill to be transparent and only the outline will have color.
Something like that:
My text is not fixed but can be changed by the user.

You need to push clip geometry, Just add 4 new lines to this code
protected override void OnRender(DrawingContext drawingContext)
{
EnsureGeometry();
var boundsGeo = new RectangleGeometry(new Rect(0, 0, ActualWidth, ActualHeight));
var invertGeo = Geometry.Combine(boundsGeo, _TextGeometry, GeometryCombineMode.Exclude, null);
drawingContext.PushClip(invertGeo);
drawingContext.DrawGeometry(null, _Pen, _TextGeometry);
drawingContext.Pop();
drawingContext.DrawGeometry(Fill, null, _TextGeometry);
}
But then you would need to double the StrokeThickness, since only half of the stroke is visible.
result:

Is there possible add aero effect in Control itself in WPF?

I have a WriteableBitmap that would display video in the Window.
Currently I need to covert the subtitle in the bottom. I want to use a aero effect, but only cover the bottom of the WriteableBitmap.
Which mean, this is the original :
And I want to add a Grid Control which has aero effect, like This:
But I don't know how, I already think about take the picture bottom place and use some effect , and then put it on the top, But It looks a low performance for writableBitmap, because which mean it need to process 25 around picture every second...
Update:
Here is my code:
<Grid>
<Image x:Name="imgFrame"/>
</Grid>
private WriteableBitmap bitmap;
private void OnVideoFrameRunning(FrameArgs e)
{
if (null == bitmap)
{
bitmap = new WriteableBitmap(e.Width, e.Height, 72, 72,PixelFormats.Bgr24, null);
imgFrame.Source = bitmap;
}
bitmap.WritePixels(new Int32Rect(0, 0, e.Width, e.Height), e.Buffer, e.Width * 3, 0, 0);
}

You could do something like this:
<Grid>
<Grid.Effect>
<BlurEffect Radius="18"/>
</Grid.Effect>
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Bottom"
FontSize="40"
Foreground="#444444"
Text="Some Subtitles"
Margin="0 0 0 20"/>
</Grid>
Radius="0":
Radius="18":

Zooming into all content of a Canvas

I have this Xaml:
<Grid x:Name="DrawingGrid" Visibility="Collapsed">
<AppBarButton x:Name="ExitDrawingButton" Icon="Cancel" Click="ExitDrawingButton_Click"></AppBarButton>
<ScrollViewer x:Name="DScrollViewer" ManipulationMode="All" MaxZoomFactor="2.0" MinZoomFactor="1.0" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" DoubleTapped="DScrollViewer_DoubleTapped" Width="1140" Height="770">
<Canvas x:Name="inkCanvas" Background="Transparent" Width="1140" Height="770">
<StackPanel x:Name="DStackPanel" Orientation="Horizontal" Margin="0,0,0,0">
<Image x:Name="DImage0" HorizontalAlignment="Left" Source="{Binding nextImage}" Width="570" Canvas.ZIndex="0"/>
<Image x:Name="DImage1" HorizontalAlignment="Left" Source="{Binding nextImage}" Width="570" Canvas.ZIndex="0"/>
</StackPanel>
</Canvas>
</ScrollViewer>
</Grid>
I am drawing on Canvas using the CanvasManager.cs class and it is working fine.
Now I need to zoom on the Canvas: Zoom the Canvas (the ink) and Zoom what it contains (the StackPanel + the Images) together.
On doubleTapping the ScrollViewer containing the Canvas I have this method:
private async void DScrollViewer_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
{
Point point = e.GetPosition(DScrollViewer);
if (DScrollViewer.ZoomFactor == 1)
{
await Task.Delay(300);
DScrollViewer.ChangeView(point.X, point.Y, 2.0F, false);
}
else
{
await Task.Delay(300);
DScrollViewer.ChangeView(point.X, point.Y, 1.0F, false);
}
}
The result is: only the Canvas (its Ink) is Zooming and the StackPanel and its Images are left at the place, same scale, intact!
What Am I doing wrong?

Your mistake is you are assign a constant value for the width of each image (Width="570") so that it will never zoomed in or out unless you have change it's width programmatically.
The best way to change the image's width is bind a variable value for it, you can create a converter that divide the width of canvas over two (canvas.width / 2) and bind the width of each image to this converter..
Then your zoom will work perfectly.

How to place an image by its center, not top-left corner?

I have an image (inside canvas). I need to specify the coordinates of the image in text box, and I want the image center to be in this point (not its top-left corner). How can I do that?
Update: I don't need to place my image in the center of the canvas. I want the position of the image to be defined by image center. Example, I have a code: <Image source"..." canvas.Left="0" canvas.Top="0">, and this point (0,0) means that the image center is in the top-left corner of the canvas.

Set the position using Attached properties:
Canvas.Left
Canvas.Top
If you want to place at center, set
Canvas.SetLeft(image, (canva.Width - Image.Width) / 2);
Canvas.SetTop(image, (canva.Height- Image.Height) / 2);
Also look Align images in WPF canvas in center
Update
Canvas.SetLeft(image, Image.Width / 2);
Canvas.SetTop(image, Image.Height / 2);
You can set it from behaviors for example
<Window x:Class="WpfSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:wpfSample="clr-namespace:WpfSample"
Title="MainWindow"
Width="800"
Height="800"
Background="Gray">
<Border Width="400"
Height="400"
HorizontalAlignment="Center"
VerticalAlignment="Center"
BorderBrush="Black"
BorderThickness="2">
<Canvas >
<Rectangle Fill="OrangeRed" Width="150" Height="150">
<i:Interaction.Behaviors>
<wpfSample:CenterBehavior/>
</i:Interaction.Behaviors>
</Rectangle>
</Canvas>
</Border>
</Window>
and the behavior (raw sample)
public class CenterBehavior : Behavior<FrameworkElement>
{
protected override void OnAttached()
{
base.OnAttached();
UpdatePosition();
AssociatedObject.SizeChanged += OnSizeChanged;
}
private void UpdatePosition()
{
Canvas.SetLeft(AssociatedObject, -AssociatedObject.Width/2);
Canvas.SetTop(AssociatedObject, -AssociatedObject.Height/2);
}
private void OnSizeChanged(object sender, SizeChangedEventArgs e)
{
UpdatePosition();
}
}

Just subtract half of your Image.Width value your current Canvas.Left value and subtract half of your Image.Height value your current Canvas.Top value.