We Keep Coding

Specify a Path control using behind code in WPF

I am trying to draw an ellipse using the Path control dynamically.
In my MainWindow():
EllipseGeometry ellipse = new EllipseGeometry(new Point(50, 50), 45, 20);
var path = new Path();
path.VerticalAlignment = VerticalAlignment.Top;
path.HorizontalAlignment = HorizontalAlignment.Left;
path.Fill = Brushes.Black;
path.Stroke = new SolidColorBrush(Colors.Green);
path.StrokeThickness = 2;
path.Data = ellipse;
but nothing shows up.
I realised that I need to "associate" the path object with my dialog box but I do not know how to do that. Is there a way to accomplish this via non-XAML methods since I will need to dynamically generate many different path objects?

All you are missing is basically that:
SamplePanel.Children.Add(path);
The above assumes that there is a Panel named SamplePanel in your window's XAML, e.g.
<Grid x:Name="SamplePanel" />

How to render InkStroke on Canvas using BezierSegment in UWP C#

I am porting an application from javascript to UWP c# and I am struggling with the new InkCanvas. If you are familiar with the new InkCanvas in UWP, I would truly appreciate your help.
This is the code I wrote that takes renders an InkStroke onto a Canvas.
public static void Bezier(Canvas canvas, InkStroke stroke)
{
var segments = stroke.GetRenderingSegments();
PathFigure pthFigure = new PathFigure() { StartPoint = new Point(segments[0].Position.X, segments[0].Position.Y)};
for (int i = 1; i < segments.Count; i++)
{
var segment = segments[i];
var bezier = new BezierSegment();
bezier.Point1 = new Point(segment.BezierControlPoint1.X, segment.BezierControlPoint1.Y);
bezier.Point2 = new Point(segment.BezierControlPoint2.X, segment.BezierControlPoint2.Y);
bezier.Point3 = new Point(segment.Position.X, segment.Position.Y);
pthFigure.Segments.Add(bezier);
}
PathGeometry pthGeometry = new PathGeometry();
pthGeometry.Figures.Add(pthFigure);
Path path = new Path();
//path.Stroke = new SolidColorBrush(stroke.DrawingAttributes.Color);
//path.StrokeThickness = stroke.DrawingAttributes.Size.Height;
path.Stroke = new SolidColorBrush(Colors.Red);
path.StrokeThickness = 1;
path.Data = pthGeometry;
canvas.Children.Add(path);
}
Unfortunately, the control points seem to be messed up, and I do not understand why.
You can see below an image of what I get running this code.
The black stroke is the one originally rendered in the InkCanvas, and the red stroke is the one rendered on the Canvas from the code above.
The black stroke is the one originally rendered in the InkCanvas, and the red stroke is the one rendered on the Canvas from the code above
Anyone has any idea of what I am doing wrong?

I found the problem! I was setting drawingAttributes.FitToCurve = false and this caused the control points to be zero. I assumed this setting was only affecting the rendering, but now it makes sense because I was calling GetRenderingSegments. I was able to draw the shape by using GetInkPoints and then draw a polyline.

How can I update/redraw a Microsoft Powerpacks canvas in C#?

I have a method which finds relationships between two objects, if it exists, I would like to draw two Lineshapes to the link. I have started to implement the first lineshape, however whenever I test the code the lines persist. I have tried multiple methods (as you can see) and these do not refresh the canvas for the new lines to be drawn.
private void DrawRelationshipLines()
{
_canvas = new ShapeContainer {Parent = panelCredentialsVisualisation};
//These methods below do not redraw the canvas
_canvas.Shapes.Remove(_tableinfoLine);
_canvas.Shapes.Clear();
_canvas.Refresh();
_canvas.Update();
//
List<string> relationships = lvSelectedTableInfoCredentialsIntersection.GetAllRelationships();
if (relationships.Capacity == 0)
return;
foreach (string context in relationships)
{
Label contextLabelName = GetLabelByName(context);
_tableinfoLine = new LineShape
{
Parent = _canvas,
BorderWidth = 2,
BorderColor = Color.BlueViolet,
StartPoint = new Point(lblselectedTableinfo.Right, lblselectedTableinfo.Top + 10),
EndPoint = new Point(contextLabelName.Left, contextLabelName.Top + 10)
};
}
The code works fine in searching for relationships and drawing them, however I'd like to be able to clear the canvas before drawing a different relationship, is this possible?
Thanks if anyone can help.

Moving _canvas = new ShapeContainer {Parent = panelCredentialsVisualisation}; outside of the method made this work. Seems like initializing a new ShapeContainer each time was causing issues.

Custom tile generates a System.OutOfMemoryException exception in wp8

Has anyone got any idea why I'm getting an OutOfMemoryException when I'm creating my custom tile?
I'm trying to create custom images for my primary tile on a windows phone 8 app from a ScheduledAgent. The error doesn't occur until my very last line of code is executed which is the NotifyComplete().
Here is the code (Not the cleanest but ok for prototyping I guess). This code only handles the wide tile and it tries to load an image an image downloaded from a website and then it tries to render a logo and a description over this image.
Here is the code:
private void CreateTiles()
{
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
for (int i = 0; i < 2; i++)
{
var bmp = new WriteableBitmap(691, 336);
var articleImg = new BitmapImage(new Uri(articles[i].ImageFilename, UriKind.Relative));
var articleImage = new Image { Source = articleImg };
articleImage.Stretch = Stretch.UniformToFill;
articleImg.CreateOptions = BitmapCreateOptions.None; // Force the bitmapimage to load it's properties so the transform will work
var bmpLogo = new WriteableBitmap(100, 100);
var logoImg = new BitmapImage(new Uri("/Assets/Tiles/FlipCycleTileSmall.png", UriKind.Relative));
var logoImage = new Image { Source = logoImg };
logoImage.Opacity = 1.0;
logoImg.CreateOptions = BitmapCreateOptions.None; // Force the bitmapimage to load it's properties so the transform will work
var articleBannerGrid = new Grid();
articleBannerGrid.Background = ColorExtensions.ToSolidColorBrush("#000F558E");
articleBannerGrid.Opacity = .5;
articleBannerGrid.Height = 100;
articleBannerGrid.VerticalAlignment = VerticalAlignment.Bottom;
articleBannerGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(100) });
articleBannerGrid.ColumnDefinitions.Add(new ColumnDefinition());
articleBannerGrid.Children.Add(logoImage);
Grid.SetColumn(logoImage, 0);
var textBlock = new TextBlock();
textBlock.Text = articles[i].Description;
textBlock.FontWeight = FontWeights.Bold;
textBlock.Margin = new Thickness(10, 5, 30, 5);
textBlock.TextWrapping = TextWrapping.Wrap;
textBlock.Foreground = new SolidColorBrush(Colors.White); //color of the text on the Tile
textBlock.FontSize = 30;
textBlock.Opacity = 1.0;
var articleTextGrid = new Grid();
articleTextGrid.Height = 100;
articleTextGrid.VerticalAlignment = VerticalAlignment.Bottom;
articleTextGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(100) });
articleTextGrid.ColumnDefinitions.Add(new ColumnDefinition());
articleTextGrid.Children.Add(textBlock);
Grid.SetColumn(textBlock, 1);
var canvas = new Grid();
canvas.Width = articleImg.PixelWidth;
canvas.Height = articleImg.PixelHeight;
canvas.Children.Add(articleImage);
canvas.Children.Add(articleBannerGrid);
canvas.Children.Add(articleTextGrid);
bmp.Render(canvas, null);
bmp.Invalidate(); //Draw bitmap
FileStream fs = new FileStream(articles[i].ImageFilename, FileMode.Create);
bmp.SaveJpeg(fs, bmp.PixelWidth, bmp.PixelHeight, 0, 100);
fs.Close();
fs.Dispose();
articleImage = null;
articleImg = null;
}
//GC.Collect();
//GC.WaitForPendingFinalizers();
ShellTile TileToFind = ShellTile.ActiveTiles.FirstOrDefault();
if (TileToFind != null)
{
string title = articles[0].Tag;
string backTitle = articles[1].Tag;
string content = articles[0].Description;
string backContent = articles[1].Description;
FlipTileData tileData = new FlipTileData()
{
Title = title,
BackTitle = backTitle,
BackContent = backContent,
WideBackContent = backContent,
BackgroundImage = new Uri(articles[0].ImageFilename, UriKind.Relative),
BackBackgroundImage = new Uri(articles[1].ImageFilename, UriKind.Relative),
WideBackgroundImage = new Uri(articles[0].ImageFilename, UriKind.Relative),
WideBackBackgroundImage = new Uri(articles[1].ImageFilename, UriKind.Relative),
};
TileToFind.Update(tileData);
}
NotifyComplete();
});
}
I assume that it is the correct place to generate the custom tile i.e. ScheduledAgent.
I found an article Dynamic Live Tile issue WP8 [WriteableBitmap] on the Nokia website with the same problem but no solution there either.
I'll continue debugging this tomorrow by removing everything and adding each bit individually step by step to see if I can spot anything but if anyone has got any suggestion or solution, I'd appreciate if you could help.
If I'm going about it the wrong way, please let me know what's the best method to update tiles in the scheduled agent.
Thanks.

WP BackgroundAgents have a small memory cap. 20MB for WP8 without update 3 and 25 for WP8 with Update 3.
I would suggest that you create a another project and add Coding4Fun toolkit and MemoryCounter in to your page and then add the code in your BackgroudAgent to the sample page and try to create the tiles. Then look at how much memory it uses. I think amount of memory usage is higher than the 20/25MB cap. if so you have to find a way to reduce it.

As usual, Microsoft is omitting critical information from its documentation.
After reducing the size of my tile from 691x336 to 336x165, it worked, so it got me thinking and I thought that the size recommended by Microsoft in this article Flip Tile template for Windows Phone 8 for wp8 and wp8.1 seemed excessive, so I did a bit more research and this is when I found this excellent explanation in an article in stackoverflow i.e.
Windows Phone 8 Startscreen Tile sizes and margins
This clearly states the size of the tiles but not based on OS versions but based on screen resolutions.
In my test environment, I was using the default 'Emulator WVGA 512MB' and again by default the screen size is 480x800, so taking into account the information provided in the answer of this article, my tile size should have been 430x210.
I resized my (already reduced) tile back up to 430x210, and it still worked.
While there is a memory cap of 20/25Mb depending on OS and patch being used, which probably causes many problems from the various articles I've read on the web, in my instance I believe it was more likely to have been affected by tile size being incorrect, and therefore the additional memory, or lack thereof.
I will update this article once I get to using 8.1 in my IDE with a larger resolution but for now, I have to assume that it was definitely related to the size of my tile.
I'll definitely make sure to add code to create tile based on os, patch and resolution being used. Bit of a pain to best honest!
Hope this helps.

Transform control in WinRt

I have several boxes from type Windows.UI.Xaml.Controls.Control with different sizes. I wanna transform a few of them vertically. Like shown in the picture.
I'm struggling doing this.I'm sure that should not be very difficult but I don't get it...
Btw. I wanna do that in code behind not in XAML.
Many thanks for your help.
Cheers
Daniel
edit:
DoubleAnimation scaleAnimation = new DoubleAnimation();
scaleAnimation.From = startHeight;
scaleAnimation.To = this.ClientHeight * Percentage;
scaleAnimation.Duration = TimeSpan.FromMilliseconds(500);
scaleAnimation.EasingFunction = new QuarticEase() { EasingMode = EasingMode.EaseOut };
Storyboard storyScaleX = new Storyboard();
storyScaleX.Children.Add(scaleAnimation);
Storyboard.SetTarget(storyScaleX, slice);
scaleAnimation.EnableDependentAnimation = true;
Storyboard.SetTargetProperty(storyScaleX, "Height");

You can apply a TranslateTransform to the LayoutTransform or RenderTransform of the element (depending on what you need). e.g.
element.LayoutTransform = new TranslateTransform(0, 100)
If the effect you require depends on the height of the element, use the element's ActualHeight as the value to translate by.