We Keep Coding

Screen width returns negative number

I want to get the Grid width from my page, so I tried this:
public MemeBuilder()
{
InitializeComponent();
ColumnWidth = (MainGrid.Width - (8 * 5)) / 7;
....
But MainGrid.Width returns -1.
Here is the xaml of the Grid:
<Grid x:Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
.....
What am I doing wrong?

You can subscribe to the SizeChanged event and from there get the Width:
private void MainGrid_SizeChanged(object sender, EventArgs e)
{
var grid = (Grid)sender;
var width = grid.Width;
}

My mistake, you are using xamarin form.I think you are not getting the width because of the lifecycle like what #Peter B said.
Either OnStart Event
protected override void OnStart()
{
ColumnWidth = (MainGrid.width- (8 * 5)) / 7;
}
or
Page Appearing Event if your grid is in another page
protected async override void OnAppearing()
{
if(!isLoaded)
{
//Do API Calls
isLoaded=true;
}
}

The best way to handle this is by using Xamarin.Essentials Device Display Information API
// Get Metrics
var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;
// Orientation (Landscape, Portrait, Square, Unknown)
var orientation = mainDisplayInfo.Orientation;
// Rotation (0, 90, 180, 270)
var rotation = mainDisplayInfo.Rotation;
// Width (in pixels)
var width = mainDisplayInfo.Width;
// Height (in pixels)
var height = mainDisplayInfo.Height;
// Screen density
var density = mainDisplayInfo.Density;
Now you can get the width by dividing the density something like:
var width = DeviceDisplay.MainDisplayInfo.Width / DeviceDisplay.MainDisplayInfo.Density;
Goodluck
Revert if you have questions

UWP Canvas drawing out of bounds

I have a canvas (not InkCanvas!) and I am able to draw Polylines on it. This is working just fine but there is a huge problem with drawing out of bounds like shown in the GIF below.
My canvas is inside a ScrollViewer and the ScrollViewer is inside a GridView.
I tried to catch the pointer leaving the canvas with the following event handlers:
canvas.PointerExited += Canvas_PointerExited;
canvas.PointerCaptureLost += Canvas_PointerCaptureLost;
But it seems those events are fired way too slow.
I tried to use the Clip property of my canvas but there is no change in behaviour. And there is no "ClipToBound" property for the UWP canvas.
My whole view is generated in Code-Behind because I have to generate multiple canvases on one view.
Is there a way to stop this behaviour?
EDIT1:
As requested: more insight of my code.
The XAML Page looks like this:
<Grid x:Name="BoundingGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="15*"/>
</Grid.RowDefinitions>
<Grid x:Name="InkGrid" VerticalAlignment="Top" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
<Grid x:Name="CanvasGrid" Grid.Row="1" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" VerticalAlignment="Top"/>
</Grid>
It's all inside a Page.
My code behind looks like this:
My constructors:
public ImprovedCanvasManager(Grid boundingGrid, Grid overviewGrid, string filepath, double height)
{
drawCanvas = new Canvas();
overviewGrid.Loaded += OverviewGrid_Loaded;
overviewGrid.SizeChanged += OverviewGrid_SizeChanged;
RowDefinition rd = new RowDefinition();
rd.Height = new GridLength(height);
overviewGrid.RowDefinitions.Add(rd);
InitializeScrollViewer();
Grid.SetRow(scroll, overviewGrid.RowDefinitions.Count);
Grid.SetColumn(scroll, 0);
scroll.Content = drawCanvas;
overviewGrid.Children.Add(scroll);
LoadImage(filepath);
}
public ImprovedCanvasManager(Grid boundingGrid, Grid overviewGrid, Grid inkToolGrid, string filepath, double height = 1000) : this(boundingGrid, overviewGrid, filepath, height)
{
AddDrawingToolsToCanvas(inkToolGrid, overviewGrid);
EnableDrawingOnCanvas(drawCanvas);
}
I only got two contructors to make it simple for me to instantiate canvases with the ability to draw and without the ability to draw.
This is how i initialise my ScrollViewer:
private void InitializeScrollViewer()
{
scroll = new ScrollViewer();
scroll.VerticalAlignment = VerticalAlignment.Top;
scroll.VerticalScrollMode = ScrollMode.Auto;
scroll.HorizontalScrollMode = ScrollMode.Auto;
scroll.VerticalScrollBarVisibility = ScrollBarVisibility.Visible;
scroll.HorizontalScrollBarVisibility = ScrollBarVisibility.Visible;
scroll.ZoomMode = ZoomMode.Enabled;
scroll.ManipulationMode = ManipulationModes.All;
scroll.MinZoomFactor = 1;
scroll.MaxZoomFactor = 3;
}
Those are the only lines of code that affect any viewbuilding.
Edit 2:
My canvas doesn't fill the surrounding Grid on the left, but on the bottom.

The code in your PointerMoved handler should be relative to the canvas.
private void OnPointerMoved(object sender, PointerRoutedEventArgs e)
{
var point = e.GetCurrentPoint(canvas); // <-- relative to canvas.
var x = point.Position.X;
var y = point.Position.Y;
x = Math.Max(x, 0);
y = Math.Max(y, 0);
x = Math.Min(canvas.ActualWidth, x);
y = Math.Min(canvas.ActualHeight, y);
// add point to polyline...
}
If x/y are negative or greater than the size of the canvas, then they are out of bounds. You can either limit the point to the border of the canvas as the code above does, or you can discard the point completely.

How to increase the height or width(through scrolling) for InkCanvas when the user Ink near the end?

I want to increase the height or width(through scrolling) of InkCanvas when the user Ink near the end of the InkCanvas Like OneNote.
Solution Tried:
I tried ScrollViewer for InkCanvas but It didn't work
I thought of re-styling it but I can't find the InkCanvas in generic.xaml
Here is my code for InkCanvas:
<ScrollViewer Grid.Row="1">
<Grid>
<InkCanvas Name="PATH_INK_CANVAS" Canvas.ZIndex="-1"/>
<RichEditBox Name="PATH_RICH_EDIT_BOX" Canvas.ZIndex="0" PlaceholderText="Input Text" Style="{StaticResource RichEditBoxStyle}"/>
</Grid>
</ScrollViewer>

We should find the Bound of Ink in InkCanvas and compare it with ActualSize of the InkCanvas then increase the InkCanvas if we need. It can be done using below code.
public MainPage()
{
this.InitializeComponent();
PATH_INK_CANVAS.InkPresenter.StrokeInput.StrokeEnded += StrokeInput_StrokeEndedAsync;
}
private async void StrokeInput_StrokeEndedAsync(InkStrokeInput sender, PointerEventArgs args)
{
await Task.Delay(100);
var XBound = PATH_INK_CANVAS.InkPresenter.StrokeContainer.BoundingRect.Bottom;
if (XBound > PATH_INK_CANVAS.ActualHeight - 400)
PATH_INK_CANVAS.Height = XBound + 400;
var YBound = PATH_INK_CANVAS.InkPresenter.StrokeContainer.BoundingRect.Right;
if (YBound > PATH_INK_CANVAS.ActualWidth - 400)
PATH_INK_CANVAS.Width = YBound + 400;
}

Textbox on canvas drag direction changed after rotated

I have a textblock control on canvas which can be dragged horizontally to the right correctly as shown in the first and second image.
Then after I a 90 degree rotation angle is applied to its CompositeTransform, dragging the textblock to the right actually move it vertically towards the top as shown by the third and fourth image. What am I missing?
public CompositeTransform CurrentTransform = new CompositeTransform();
.....
TextBlock.RenderTransform = CurrentTransform;
....
private double angle;
public double Angle
{
get
{
return angle;
}
set
{
if (angle != value)
{
angle = value;
CurrentTransform.CenterX = 0;
CurrentTransform.CenterY = 0;
CurrentTransform.Rotation = angle;
}
}
}
The moving of the textbox is handled inside
private void CanvasText_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
{
CurrentTransform.TranslateX += e.DeltaManipulation.Translation.X;
CurrentTransform.TranslateY += e.DeltaManipulation.Translation.Y;
}

For those who are in the same boat, I managed to fix this by attaching external gesture listener from Windows Phone toolkit instead of using the built-in CanvasText_ManipulationDelta event. The textbox dragging works correctly even after rotation.
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Image x:Name="ImageOriginal"
Source="{Binding WbPreview, Mode=TwoWay}"
Stretch="Uniform"/>
<Grid x:Name="GridDraw"
Tap="GridDraw_Tap"
Background="Transparent"/>
<Canvas x:Name="CanvasText">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Tap="GestureListener_Tap"
DragDelta="GestureListener_DragDelta"/>
</toolkit:GestureService.GestureListener>
</Canvas>
</Grid>

How to keep area of canvas centered in a ScrollViewer when Zoomed in or out, and not everything can be displayed in the viewing window

Everyone,
I have a WPF app that has a canvas that I have wrapped in a scroll Viewer. I have a slider in the status bar that allows the user to zoom in and out (just like Win 7's mspaint).
Here is some of the XAML:
<ScrollViewer Name="Map"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto">
<Canvas x:Name="WallsCanvas" Height="800" Width="1000" ClipToBounds="True">
<Canvas.LayoutTransform>
<ScaleTransform x:Name="WallsCanvasScale"
ScaleX="1" ScaleY="1" />
</Canvas.LayoutTransform>
</Canvas>
</ScrollViewer>
When I zoom in, and the scrollbars are visible, the scrollbars, no matter where they are set, jump to the middle.
It is exactly as if the value of the scrollbars stay the same but the max value increases.
What can I do to get them to ... say, if they were in the lower right corner, to stay in the lower right corner after a zoom in or out?
BTW, here is my Zoom in and out code:
private void SliderValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
var scales = new []{.125, .25, .5, 1, 2, 4, 8};
var scale = scales[(int)((Slider) sender).Value];
ScaleChanged(scale, WallsCanvasScale);
}
private static void ScaleChanged(double scale, ScaleTransform st)
{
st.ScaleX = scale;
st.ScaleY = scale;
}
So, no rocket science in my code but ...
Update idea: If I had access to the value and the max value of the scrollbars, could I get the percentage between the two and then after the zooming (scaling) I could re-apply the value of the scrollbar as a percentage of the max value????? But where is the value and the max value available?
Any help would be appreciated. I cannot think that I am the only one that has this problem since MSPaint (the Windows 7 version) works correctly and I assume it is a XAML app.
Here is a link (http://www.leesaunders.net/examples/zoomexample/zoomexample.zip) to a minimum working example project (VS 2010). When you run it, just move the scroll bars then zoom in a level, you will see the issue right away.

You just need to offset the shift which results from the scale because it scales from (0,0). It's a bit complicated but here's a sketch of what the method in your sample could look like:
private void SliderValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
var slider = (Slider)sender;
if (!slider.IsLoaded)
{
slider.Loaded += (s, le) => SliderValueChanged(sender, e);
return;
}
var scales = new[] { .125, .25, .5, 1, 2, 4, 8 };
var scale = scales[(int)((Slider)sender).Value];
// The "+20" are there to account for the scrollbars... i think. Not perfectly accurate.
var relativeMiddle = new Point((Map.ActualWidth + 20) / 2, (Map.ActualHeight + 20) / 2);
var oldLocation = CanvasScale.Transform(TemplateCanvas.PointFromScreen(relativeMiddle));
ScaleChanged(scale, CanvasScale);
var newLocation = CanvasScale.Transform(TemplateCanvas.PointFromScreen(relativeMiddle));
var shift = newLocation - oldLocation;
Map.ScrollToVerticalOffset(Map.VerticalOffset + shift.Y);
Map.ScrollToHorizontalOffset(Map.HorizontalOffset + shift.X);
lblScale.Content = scale.ToString("P1").Replace(".0", string.Empty);
}
Should be quite self-explanatory; the location of the center is measured before and after the scaling to calculate the shift of that point, which then is added to the current scroll-position.