Develop Reference

Transform a colored image to a grayscale image using XAML?

Using XAML preferably,
I need to dynamically apply a gray-scale filter on a colored image from bottom to top. That's to say, i would like to be able to change the offset value of the gray-scale filter applied to my image pro grammatically.
For example, I would like to programmatically set 50% of the image in color (from the bottom of the image to its middle), and the other 50% of the image in gray-scale (e.g. from the middle of the image to its top).
I have read a lot of different answers, tried a lot of different things, and thought about a lot of different ways to do this.
I could have two images, one on top of the other. One would be in gray-scale and the other would be in color. I would then programmatically change the size of the gray-scale image so that the image in color below it would partially show and create a sort of half-half view to the user.
However, this solution poses an issue that I do not seem to be able to resolve. When changing the height value of the gray-scale image, the image automatically rescale itself due to the 'Stretch' property which is set to Uniform (and that I do not wish to change to None).
Another way to do this would be to programmatically change the color pixels of the image. I have had some success with this in the past, however, this is too slow for what I am trying to do here (ideally, I would be changing the colors of the image from gray-scale to the original color of the image selected by the user every 50 milliseconds until a certain height is reached).
A third method could be to apply an Opacity Mask on the image and use LinearGradientBrush to change the offset value to the desired position. This is the code I am currently using, it works but simply apply a gray color to the image without changing the original colors of the image to gray-scale (resulting in a sort of a washed out colored image):
XAML:
<Image x:Name="myImage" HorizontalAlignment="Left" VerticalAlignment="Top" Source="C:\Users\Clement\Desktop\test.png" Canvas.Left="159" Canvas.Top="81" Width="500" Height="375" >
<Image.OpacityMask>
<LinearGradientBrush EndPoint="0.5,0" MappingMode="RelativeToBoundingBox" StartPoint="0.5,1">
<GradientStop x:Name="myImageLinearGradientBrushStop" Color="Black"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
Code-behind (in a timerEventProcessor that repeats itself every 50ms):
myImageLinearGradientBrushStop.Offset = percent * 0.01;
As mentioned previously, I have browsed a lot of different websites, read a lot of similar questions and tried a lot of different answers and still cant satisfactorily solve the problem.

The XAML below uses a Grid with two rows to display two Images on top of each other. The Width and Heigh of the top Image are bound to the size of the bottom Image, which spans both Grid rows. An inner Grid is used to clip the top Image.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image x:Name="image" Grid.RowSpan="2" Source="..."/>
<Grid>
<Image Width="{Binding ActualWidth, ElementName=image}"
Height="{Binding ActualHeight, ElementName=image}"
HorizontalAlignment="Center" VerticalAlignment="Top">
<Image.Source>
<FormatConvertedBitmap Source="{Binding Source, ElementName=image}"
DestinationFormat="Gray8"/>
</Image.Source>
</Image>
</Grid>
</Grid>

Thanks to Clemens' help, I was able to get a solution to my problem!
This is the final XAML code for those whom might be interested:
<Grid Width="500" Height="375">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image x:Name="image" Grid.RowSpan="2" Source="C:\Users\Clement\Desktop\test_image.png" />
<Grid Margin="0,0,0,166" Grid.RowSpan="2">
<Image Width="{Binding ActualWidth, ElementName=image}"
Height="{Binding ActualHeight, ElementName=image}"
HorizontalAlignment="Center" VerticalAlignment="Top">
<Image.Source>
<FormatConvertedBitmap Source="{Binding Source, ElementName=image}"
DestinationFormat="Gray8"/>
</Image.Source>
<Image.OpacityMask>
<ImageBrush ImageSource="C:\Users\Clement\Desktop\test_image.png"/>
</Image.OpacityMask>
</Image>
</Grid>
</Grid>
Here I simply added the OpacityMask to the Gray8 image to bring back its transparency.
Happy coding!

UWP Fit zoomable image in its container

To make an image zoomable I'm using wrapping the image control with a ScrollViewer like such:
<Page ...>
<ScrollViewer ZoomMode="Enabled" HorizontalScrollMode="Auto" VerticalScrollMode="Auto">
<Image Source="http://i.imgur.com/iseJWq1.jpg" />
</ScrollViewer>
</Page>
I want the image to be resized to fit inside the page in both horizontal and vertical directions, just like the Stretch="Uniform" behaviour of the Image control:
But instead it resizes the image to fit horizontally only, clipping the excess of the image on the vertical direction:
I got some head start from this website, so I changed the xaml to look like:
<Page x:Name="Page"
... />
<ScrollViewer ZoomMode="Enabled" HorizontalScrollMode="Auto" VerticalScrollMode="Auto">
<Image Source="http://i.imgur.com/iseJWq1.jpg" Width="{Binding ActualWidth, ElementName=Page}" Height="{Binding ActualHeight, ElementName=Page}" />
</ScrollViewer>
</Page>
While this works fine on the stretching side of things, the image then becomes aligned to the left of the screen, and weird things happen when you zoom in/out:
Playing with the Stretch properties of the image have no effect.
How do I then make the image zoomable while initially fitting the image inside its container, just like any photo viewer app would do?

This works:
<Page x:Name="Page" ...>
<ScrollViewer ZoomMode="Enabled" MinZoomFactor="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Image Source="http://i.imgur.com/iseJWq1.jpg" MaxWidth="{Binding ActualWidth, ElementName=Page}" MaxHeight="{Binding ActualHeight, ElementName=Page}"/>
</ScrollViewer>
</Page>
...which is exactly what the article recommended to be done.

how to make MediaElement to take the whole space of a Grid?

I have a MediaElement in a Grid , and i want it to take the entire space when i play it.
here is my code:
<Grid Grid.Row="2" Grid.ColumnSpan="2">
<Grid.Background>
<ImageBrush ImageSource="Resource/bgrdMedia.png" Stretch="None"/>
</Grid.Background>
<MediaElement x:Name="VideoControl" LoadedBehavior="Manual" UnloadedBehavior="Stop"
Stretch="Uniform" StretchDirection="DownOnly" MediaEnded="Element_MediaEnded"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
</Grid>
but i have that:
any ideas! thanks !

By setting the StretchDirection to DownOnly you are preventing it from scaling upwards:
DownOnly | The content scales downward only when it is larger than the parent. If the content is smaller, no scaling upward is performed.
Source
If you leave the StretchDirection as Both (the default) and have the horizontal and vertical alignments as Stretch (which you have) it should give the result you want.
Note, however, that upscaling may result in a blurred or pixelated image if the original media isn't of sufficiently high resolution.

XAML image gets cut off

In XAML I'm trying to make a large image that's cut off as a background to slowly move across the screen until it reaches the images otherside. Problem is the image is always no bigger than the display even it was stretched out. So I'm left with a image that's the size of the screen moving off with a black background.
<Image x:Name="background" HorizontalAlignment="Left" Grid.Row="1" Width="1500" Stretch="Fill" MaxWidth="1500" MinWidth="1500">
<Image.RenderTransform>
<TranslateTransform x:Name="bgTranslate" X="0"></TranslateTransform>
</Image.RenderTransform>
</Image>

The Grid control arranges the Image with the available cell size. Then the Image control cuts off the parts of the image that are outside the arrange rectangle (and hence not visible), before any RenderTransform is applied.
A simple workaround is to put the Image in a Canvas, which arranges its child elements with their desired size:
<Grid ...>
...
<Canvas Grid.Row="1">
<Image x:Name="background" Width="1500">
<Image.RenderTransform>
<TranslateTransform x:Name="bgTranslate"/>
</Image.RenderTransform>
</Image>
</Canvas>
...
</Grid>

SurfaceInkCanvas scales strokes when painting out of bounds

I have a ScatterView that contains an image over which I should be able to draw.
<s:ScatterView HorizontalAlignment="Center" Margin="0,0,0,0" Name="desk" VerticalAlignment="Center">
<s:ScatterViewItem Width="200" Height="200">
<Grid>
<Image Name="img1" Source="/Resources/Desert.jpg"/>
<Viewbox>
<s:SurfaceInkCanvas Name="cvs1"/>
</Viewbox>
</Grid>
</s:ScatterViewItem>
</s:ScatterView>
I noticed that whenever I draw an ink trail towards the border of the image, the strokes on the ink canvas are scaled down to make room for more stuff. I do not want these strokes to be zoomed out. How can I change this behavior?
Here is a video that shows what's going on.

I figured it out. This behavior is caused by the fact that I hadn't defined a Width and Height on the SurfaceInkCanvas. This should do the trick:
<s:SurfaceInkCanvas Name="cvs1" Width="200" Height="200" />