Develop Reference

How to create camera mask in C# for UWP

I have searched the net but can't find an answer and need some help. I am creating a mobile HR program and need to provide a profile mask to the camera so that the user knows what distance to be at to take a picture of the person and to ensure all photos look the same.
What I would like to do is when the user clicks a button show the camera and have an area blacked out so that only the transparent section shows the focus of the camera in the desired shape.
If anyone knows where sample code is or a good tutorial on this subject is I would appreciate it.

For your requirement, you could use MediaCapture class to display the camera preview. And cover CaptureElement with human shape image just like the following.
MainPage.xaml
<Grid>
<CaptureElement Name="PreviewControl" Stretch="Uniform" Height="400" Width="400" >
</CaptureElement>
<Image Source="head.png" Height="400" Width="400" />
</Grid>

Manipulating Images in Windows Surface 2.0 (rotation)

I am using c# wpf for windows surface 2.0.
I have been working with a set of images that i import in the xmpl file.
I found some examples for text, but for the images they used GDI+ to manipulate images and animate them, but I do not want that.
The main thing that I want to do now is to rotate(transform rotate) an image and show that it is rotating.
Here is how I am addressing the images:
Canvas.SetTop(image1, 0);
Canvas.SetLeft(image1, 200);
Any help would be much appreciated.
Thank you.

If you want to rotate your image automatically and without user interaction, check Clemens' answer. However if you want to rotate with touch manipulations, I find it easy to put the image in a ScatterViewItem like so:
<s:ScatterView>
<s:ScatterViewItem CanMove="False" CanScale="False">
<s:ScatterViewItem.Background>
<ImageBrush ImageSource="yourImage.png" Stretch="UniformToFill"/>
</s:ScatterViewItem.Background>
</s:ScatterViewItem>
</s:ScatterView>
Of course, you have the overhead of having to put in a ScatterView and its content

Your question is not very specific and there are a lot of ways to animate the rotation of an image.
A simple approach would be to assign a RotateTransform to the RenderTransform of your Image controls and then animate the Angle property of these RotateTransforms.
<Image x:Name="image" Source="..."
RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<RotateTransform/>
</Image.RenderTransform>
</Image>
Start the animation in code like this:
var transform = (RotateTransform)image.RenderTransform;
var animation = new DoubleAnimation(360, TimeSpan.FromSeconds(5));
transform.BeginAnimation(RotateTransform.AngleProperty, animation);
You may start reading about animations in WPF in the Animation Overview article on MSDN. The Transforms Overview article may also be helpful.

Image.OpacityMask on WinRT XAML

Regarding this .net XAML UIElement property, Image.OpacityMask: http://msdn.microsoft.com/en-us/library/ms743320.aspx
I am having difficulty getting OpacityMask to work in my C# / XAML project for WinRT.
Sample XAML like this:
<Image ...
<Image.OpacityMask>
<ImageBrush ImageSource="Assets/alpha.png"/>
</Image.OpacityMask>
/>
Doesn't seem to work, "The attachable property OpacityMask property was not found in type Image"
How does one use an alpha mask .png to mask a Image UIElement in WinRT XAML?

There is no OpacityMask property on Image (or UIElement fo that matter) in XAML for Windows Store apps. You only have Opacity property available.

Depending on what you are trying to do, there are alternatives to OpactiyMask that you should check out. check out these alternatives here.

Changing Display color of PNG with transparency in XAML

I have some PNGs with transparency that I use for buttons in my WPF/C# application.
Right now I have two versions of each PNG, one for normal view and one for hover, each a different color. However, I would really like to just have one single PNG and maybe make everything that's not transparent white (each image is all one color, no detail other than shape.
Would it be possible to then alter the color of each using a SolidColorBrush or similar and create the Normal/Hover versions as a static resource in my XAML?
Something like this:
<Image Key="BtnMenu" Source="Images/Menu.png" Fill="ButtonNormalBrush" />
<Image Key="BtnMenuHover" Source="Images/Menu.png" Fill="ButtonHoverBrush" />
Yeah, I totally made up the "Fill" thing...
But the basic idea is that I have a ResourceDictionary that contains the color scheme that is used throughout the entire application, which makes it so that I can change any of the about 6 colors I use in the application in one place and it updates on every control that references that color... but the one place I cannot do it is those PNGs for the buttons. (Ideally in the future I'll make that ResourceDictionary something that can be loaded in at runtime to make the application have alternate "skins"..but right now the PNGs keep me from doing that).
Edit: BTW, if the solution requires a Converter or something written in code, that's totally fine.

Hmm... If you created a Grid, and put the Image inside that Grid, you could set the Background of the Grid to your fill color.
Edit: Here is some code:
<Button>
<Grid Background="SkyBlue">
<Image Source="img.png" Stretch="None" />
</Grid>
</Button>

There is a solution: http://msdn.microsoft.com/ru-ru/library/ms752364.aspx
You can simply create ImageSource with new Format-object from another ImageSource. Format object specifies color mask for an Image.

You could try to apply a ShaderEffect as the Effect on the hover image or create a markup extension which transforms your image. Another possibility would be to encapsulate such logic in a subclass of Image.

Draw text on a shape in a wpf

Some of you maybe find this question dull but I am still not deeply accustomed to wpf drawing. I want to add formatted text on a Rectangle which moves around on a canvas and I have got a hint to override the UIElement.OnRender method. However I do not know if I should override the canvas class or the Shape class. In any correct case, to what refers the drawingContext parameter of the method as described in the example: http://msdn.microsoft.com/en-us/library/bb613560.aspx#FormattedText_Object ?
Is the text ultimately assigned to the shape or is it a visual temporary effect that cannot move along with the shape on the canvas?
Is there any further effective means of drawing text on a shape?

You can draw Text on top of a Rectangle by placing both controls in a parent container that allows controls to overlap, such as a Grid or a Canvas
<Grid>
<Rectangle Fill="Red" Stroke="Black"
HorizontalAlignement="Stretch" VerticalAlignment="Stretch" />
<Label Content="Test"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
You can then apply whatever formatting you want to the Label, the Rectangle, and you can move the group around by setting the positioning of the Grid

Rachel's answer is correct, although you can extend it a bit, have some UserControl defined as:
And in the codebehind define 1. Label:String DependencyProperty, Shape:UIElement DependencyProperty.
Handle the Shape's change event and call:
private void UpdateShape()
{
grdShapeContainer.Children.Clear();
if(this.Shape != null)
{
grdShapeContainer.Children.Add(this.Shape);
}
}
This way you will be able to make things dynamic.
Regards,
Artak

You might also want to look into ZIndex property which can be set on objects like Grid (<Rectangle Background="Black" Grid.ZIndex = 99 /> for instance would put it overtop other items) which useful for making things like "loading" screens.