We Keep Coding

ms-appx not working for image in uwp assets folder

I've been stuck on this one problem for a bit and all I've found on the web seems to be a small variation of the same code involving a URI with the ms-appx scheme or baseURI. Nothing seems to work however.
Basically I have a UWP app with several pages. When I navigate to one of the pages I want to add an image from the assets folder of the app to a canvas on this page. When I do this in XAML the figure is added without difficulty.
<Grid Name="basicGrid" >
<Grid.Background>
<ImageBrush ImageSource="/Assets/kamelenrace_background.png"
Stretch="UniformToFill"/>
</Grid.Background>
<Canvas Name="GameCanvas">
<Image Source="\Assets\kameel1.png"/>
</Canvas>
</Grid>
When I try to add the figure in C# code nothing works (one example I've tried)
private Image player1 = new Image();
private Image player2 = new Image();
private bool singlePlayMode;
public CamelRacePage()
{
this.InitializeComponent();
BitmapImage p1 = new BitmapImage(new Uri("ms-appx:///Assets//kameel1.png"));
player1.Source = p1;
Canvas.SetLeft(player1, GameCanvas.Width / 2);
Canvas.SetTop(player1, GameCanvas.Width / 2);
GameCanvas.Children.Add(player1);
}
While I might be able to make it work for now using the XAML, I would really like to understand why the C# code isn't working. I'm still learning...
any help would be much appreciated...

I would really like to understand why the C# code isn't working
The issue is caused by the incorrect values of Canvas.Left and Canvas.Top setting by code snippet. Since you didn't set the Height and Width values for GameCanvas, so that you will not get the GameCanvas.Width value. If you debug the code snippet you will find the value is NaN, so that with Canvas.Left and Canvas.Top values to NaN, you cannot see the Image.
You could just delete the two code lines the code snippet will work. Or if you want to get the actual Width of GameCanvas you should get ActualWidth property. For example:
Canvas.SetLeft(player1, GameCanvas.ActualWidth / 2);
Canvas.SetTop(player1, GameCanvas.ActualHeight / 2);
GameCanvas.Children.Add(player1);
By the way, using XAML to set style and layout will be better.

How to move a picture in Surface Application (Smart Table, C Sharp .Net 4)

I am programming in C Sharp for a simple Surface Table Application.
I have a canvas and an image frame:
<Canvas Name="InputCanvas"
Background="SeaGreen"
TouchDown="InputCanvas_TouchDown"
TouchMove="InputCanvas_TouchMove"
TouchUp="InputCanvas_TouchUp"
MouseLeftButtonDown="InputCanvas_MouseLeftButtonDown"
MouseMove="InputCanvas_MouseMove"
MouseLeftButtonUp="InputCanvas_MouseLeftButtonUp">
<Image Canvas.Left="0" Canvas.Top="0"
Height="610" Width="1590"
Name="imgKeyboard" Stretch="None" />
</Canvas>
When I put a picture inside the 'imgKeyboard" like this:
BitmapImage kbdBitmap = new BitmapImage();
kbdBitmap.BeginInit();
kbdBitmap.UriSource = new Uri(BaseUriHelper.GetBaseUri(this), "Resources/keyboard_1x.png");
kbdBitmap.EndInit();
imgKeyboard.Source = kbdBitmap;
The keyboard picture will appear in the center of the Image (the picture is much smaller than the canvas).
Of course I can move the keyboard picture in the XML by changing the 'Canvas.Left', 'Canvas.Top', .etc.
But I want to move the keyboard picture in the C Sharp code dynamically.
I found some code on MSDN, but they seem to be irrelevant:
private void DrawImagePoint(PaintEventArgs e)
{
// Create image.
Image newImage = Image.FromFile("SampImag.jpg");
// Create Point for upper-left corner of image.
Point ulCorner = new Point(100, 100);
// Draw image to screen.
e.Graphics.DrawImage(newImage, ulCorner);
}
I don't know where to put these codes, and I can't use these classes in my Surface code.
Could anyone give me some suggestions? Thank you :)

The code you've found seems to be related to GDI and System.Drawing, Surface apps use WPF.
You can move an element within a canvas, by setting the Canvas.Left and Canvas.Top attached properties.
You would do:
Canvas.SetLeft(imgKeyboard, 1000)
or
Canvas.SetTop(imgKeyboard, 500)
in your code to set the position of the imgKeyboard image element.
You could also investigate using a Storyboard to move the image, see:
Storyboards on MSDN

WPF Custom shaped button

I have a circle shaped button and I like to add a pair of Angel Wings to it, but I can't seem to draw it correctly.
I'd like to draw a border with an angel wing on the left and a circle in the middle and an angel wing on the right, in one custom shape..
the Custom shape is the border of the button.
The button is a resizable button, it means it can change Height & Width with the Window, and still maintain the same position.
this button is just an example of what I have made so far.
I've searched for a solution on Google and this site but can't find anything that can help me..

You can use software like Inkscape and with that you can open most image format and from images you can use the trace bitmap option to trace a path. This will create a <path> object in a <canvas>. It can then be used as a background.
things to note :
The quality highly depends on the image source quality and precision. So if your image have lots of color and gradient, huge line thickness and uses anti aliasing you will get very bad result because of a huge amount of vector on the path result. if you use thinner lines and very little color with no gradient you can get amazing conversion result.
You can also hand trace over the image and use that instead of the automatic option. You will get better result like that but it require more work.
With this path created you can create a resource in your application dictionary and use it for icon or background on anything you want. It is scalable in any direction without quality lost as it is now a vector "image".

try looking for image/Photoshop/any other image or drawing method to Xaml converter
you can create an image and convert it to xaml
see http://vectormagic.com
taken form here

Can you try this if it helps
Create Custom control , something like this
<Grid ClipToBounds="True" HorizontalAlignment="Center" VerticalAlignment="Center">
<ed:Arc x:Name="KnobA" ArcThickness="1" ArcThicknessUnit="Percent" EndAngle="360" Height="120" Stretch="None"
Stroke="Black"
StartAngle="0" Width="120" RenderTransformOrigin="0.5,0.5" StrokeThickness="0">
<ed:Arc.Fill>
<ImageBrush ImageSource="/Gazelle;component/Resources/Images/image.png" Stretch="UniformToFill" />
</ed:Arc.Fill>
</ed:Arc>
</Grid>
Use it in your other XAML
<controls:BoundRotaryButton Grid.Column="1" Margin="0,0,35,30"
VerticalAlignment="Bottom" HorizontalAlignment="Right" Opacity="0.2"
Grid.ColumnSpan="2"
BoundRotaryButtonState="{Binding myvm.RotaryPressed, Mode=OneWayToSource,
NotifyOnTargetUpdated=True, UpdateSourceTrigger=PropertyChanged}" />
Create the dependency in code behind of the button control and the handler for mouse clicks.
public static readonly DependencyProperty KnobAPushButtonStateProperty = DependencyProperty.Register("KnobAPushButtonState", typeof (bool), typeof (KnobA));
public bool KnobAPushButtonState
{
get { return (bool) GetValue(KnobAPushButtonStateProperty); }
set { SetValue(KnobAPushButtonStateProperty, value); }
}
private void KnobA_MouseDown(object sender, MouseEventArgs e)
{
Mouse.Capture(this);
KnobAPushButtonState = true;
private void KnobA_MouseUp(object sender, MouseEventArgs e)
{
Mouse.Capture(null);
KnobAPushButtonState = false;
}
In your viewmodel you will know when this dependency property changes the button is pressed or released and invoke the command you need.
I have something like a circular button, which you can rotate and press and so on. But you can use any shape you like with Blend.

Why is my image being displayed larger?

I'm trying to display an image on a splash screen and it's being stretched upon display. The image I'm trying to display is a simple bmp file. Any ideas why?
In SplashWindow.xaml:
<Window ... SizeToContent="WidthAndHeight">
<Grid>
...
<Image Grid.Row="0" Source="{Binding SplashImage}"></Image>
</Grid>
</Window>
In SplashViewModel.cs
public ImageSource SplashImage
{
get
{
return ImageUtilities.GetImageSource(_splashImageFilenameString);
}
}
From ImageUtilities.cs
public static ImageSource GetImageSource(string imageFilename)
{
BitmapFrame bitmapFrame = null;
if(!string.IsNullOrEmpty(imageFilename))
{
if(File.Exists(imageFilename))
{
bitmapFrame = BitmapFrame.Create(new Uri(imageFilename));
}
else
{
Debug.Assert(false, "File " + imageFilename + " does not exist.");
}
}
return bitmapFrame;
}

In your XAML, set the "Stretch" property to "None" (I believe it defaults to "Fill"):
<Image Grid.Row="0" Source="{Binding SplashImage}" Stretch="None"></Image>
You can also explicitly set the Width and Height properties if you like.

typically you want:
<Image Source="{Binding ImagePath}" Stretch="Uniform" />
this value will enlarge the image as much as possible while still fitting entirely within your parent control. It will not distort it, it will maintain the source's aspect ratio. If you use
Stretch="None"
it will display the image (or what fits of the image, it will clip) at it's native size which is not always what you want.
Anyhow, you have some choices but setting Stretch to what you want will effect the way the image stretches or not.

WPF doesn't display things in pixels (at least not on the surface). WPF displays things in device-independent units, specifically 1/96ths of an inch.
Image files have DPI/resolution information in their metadata which tells the computer how big that image is in inches. If your image file has been programmed to say it is 8 inches wide, that's going to be equal to 768 units in WPF, regardless of how many pixels the image is.
You can use an image editing program like Photoshop or equivalent to change the DPI of your image, or just give it an explicit Width and Height when you display it in WPF.

How do you get the REAL position of objects in silverlight?

How do you get the REAL position of objects in silverlight?
I have a header image centered on the screen. When I make the browser window smaller, obviously, the header's left side goes off the screen. Finding out the actual position is good to know if you want to position objects on top of the image.
I capture the Content_Resized and I run a little test:
if (App.Current.Host.Content.ActualWidth > header.Width)
{
TEST = Canvas.GetLeft(header);
}
else
{
TEST = Canvas.GetLeft(header);
}
TEST always returns zero.
EDIT: header sits on a grid instead of a canvas. "Well, there is your problem..." So a better question might be this. How would I get the margins of an image sitting on a grid?

I probably should just answer the question but how to find the position of an element relative to another is probably something that has been answered before (by myself and others) here and elsewhere on the tinternet.
However if your goal is to place an item over an image then place the image in a Grid and then add the item as child of the Grid. That way you assign the relative position over the image as the margin of the item and let Silverlight's layout system do the rest.
As a general rule if you feel that you need to write code to move stuff about when the size of things change then unless you are writing a custom panel or something you're probably not using Silverlight layout system properly.
Edit:
Try this experiment:-
<Grid x:Name="LayoutRoot">
<Grid x:Name="headerContainer" Margin="50, 60, 0, 0" HorizontalAlignment="Left" VerticalAlignment="Top">
<Image Source="YourLargeImage" />
<Image Source="YourSmallerImage" HorizontalAlignment="Center" VerticalAlignment="Top" />
</Grid>
</Grid>
Now try changing the inner grid's Margin to move its position around the screen. Note the smaller image always remains at the top center of the large image.

I got it working.
First of all, these images are on a grid, not a canvas. But switching the grid to a canvas caused lots of other problems one of which is that I could not have the header image centered like before.
The solution was to change the margin of the smaller image sitting on top of the larger header image when the content resized like this:
blankbarimage.Margin = new Thickness((App.Current.Host.Content.ActualWidth - header.Width) / 2, 0, 0, 0);
and, by the way, you create a content resized method like this:
App.Current.Host.Content.Resized += new EventHandler(Content_Resized);
So, to answer my own question, the way you get the REAL position of object in silverlight is (if they are on a grid) by looking at their margin settings.