I'm creating an application for WP7 where the background of it (a grid) receives the image from the camera. Here is how it works:
XAML:
<Grid x:Name="ContentPanel" Grid.Row="1">
<Grid.Background>
<VideoBrush x:Name="video" />
</Grid.Background>
</Grid>
C#:
Microsoft.Devices.PhotoCamera m_camera;
// Constructor
public MainPage()
{
InitializeComponent();
Loaded += (s, e) =>
{
m_camera = new Microsoft.Devices.PhotoCamera();
video.SetSource(m_camera);
};
}
My question: Is there a way to access the zoom options of the camera with this? Or can I define the source as the camera totally zoomed in or out?
Unfortunately, no. You can manipulate a higher resolution image to fill the background with only the part that you'd like to zoom in on. See resolution example here
Related
Problem : I am using UWP Community Toolkit Scale animation and it works as expected for most of the images in the GridView, but for some the image goes out of bounds . (Please see the image below)
I have detected that the issue happens when the image width is more than 2x (2 times) the height of the image. That is when the image is very wide.
Code
I am using a user control as data template
Xaml :
<!-- Grid View -->
<GridView x:Name="gridView" SelectionChanged="gridView_SelectionChanged">
<GridView.ItemTemplate>
<DataTemplate>
<local:GridViewMenu/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<!-- GridViewMenu User Control markup -->
<Grid>
<StackPanel>
<Image Source="{Binding webformatURL}" Stretch="UniformToFill" PointerEntered="image_PointerEntered" PointerExited="image_PointerExited"/>
</StackPanel>
</Grid>
C# Code :
private void image_PointerEntered(object sender, PointerRoutedEventArgs e)
{
Image img = sender as Image;
img.Scale(centerX: (float)(grid.ActualWidth / 2),
centerY: 100,
scaleX: 1.2f,
scaleY: 1.2f,
duration: 500, delay: 0).StartAsync();
}
private void image_PointerExited(object sender, PointerRoutedEventArgs e)
{
Image img = sender as Image;
img.Scale(centerX: (float)(grid.ActualWidth / 2),
centerY: 100,
scaleX: 1f,
scaleY: 1f,
duration: 500, delay: 0).StartAsync();
}
Result (Top left image is not scaling as expected, that is, it is going out of bounds)
How can I solve this issue ?
The scale animation of UWP Community Toolkit package actually use the CompositeTransform class for scaling. According to the description of Transforms and layout section:
Because layout comes first, you'll sometimes get unexpected results if you transform elements that are in a Grid cell or similar layout container that allocates space during layout. The transformed element may appear truncated or obscured because it's trying to draw into an area that didn't calculate the post-transform dimensions when dividing space within its parent container.
So that the parts overflow the bound that being truncated are unexpected. In another words, the image goes out is the transform expected. The current way you are using to meet your requirements is not reliable. If you change width-height ratio of GridViewMenu to 1.0 , you may find more images that width-height ratio larger than 1.0 will go out.
For a solution inside GridView, you could consider to use the ScrollViewer to zoom in the image instead, which can ensure the image is limited in a fixed area. For example:
<Grid x:Name="grid">
<ScrollViewer
x:Name="currentscroll"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden">
<Image
x:Name="myImage"
Width="300"
Height="180"
PointerEntered="image_PointerEntered"
PointerExited="image_PointerExited"
Source="{Binding webformatURL}"
Stretch="UniformToFill">
</Image>
</ScrollViewer>
</Grid>
Code behind:
private void image_PointerEntered(object sender, PointerRoutedEventArgs e)
{
currentscroll.ChangeView(0, 0, 1.2f );
}
private void image_PointerExited(object sender, PointerRoutedEventArgs e)
{
currentscroll.ChangeView(0, 0, 1.0f);
}
You can try to use clipping:
<Grid>
<StackPanel>
<Image Source="{Binding webformatURL}" Stretch="UniformToFill"
PointerEntered="image_PointerEntered"
PointerExited="image_PointerExited">
<Image.Clip>
<RectangleGeometry Rect="0,0,300,150" />
</Image.Clip>
</Image>
</StackPanel>
</Grid>
300 and 150 would be the width and height of the grid item.
Otherwise it looks like a bug in the UWP Community Toolkit, it would be best to report it as an issue on GitHub.
I have an XAML code with binding to property MainImage:
<Grid>
<Grid.Background>
<ImageBrush ImageSource="{Binding MainImage}"/>
</Grid.Background>
</Grid>
MainImage is a ImageSource property. But, now I want to set simple Brush background of grid to. Application is using ImageSource, if there is an image, otherwise app have to set simple Brush color. There is the problem with covertation from Brush to ImageSource, if this is possible.
I would use the OnLoaded event and check for nulls and change it that way. Unless you want to create an image and then paint it a certain color and return that as an image source. I don't think there are any fallbacks unless you roll your own.
<Grid x:Name="my_grid" Loaded="my_grid_Loaded">
<Grid.Background>
<ImageBrush ImageSource="{Binding MainImage}"/>
</Grid.Background>
</Grid>
private void my_grid_Loaded(object sender, RoutedEventArgs e)
{
Grid g = sender as Grid;
System.Windows.Media.ImageBrush ib = g.Background as ImageBrush;
if (ib.ImageSource == null)
{
g.Background = new SolidColorBrush(Colors.MYCOLOR);
}
}
If your image is not transparent, I would simply create different Grid or even Rectangle, make it full screen and with color. If there is image available, then it will just cover the color and done.
What's the best way for implementing Zoom (possibly with Pinch) and Move (possibly with for Slide) for a Canvas?
I'm drawing some very simple stuff (e.g Lines, Ellipses and more) on a Canvas and now I want to allow the user the Zoom-in, Zoom-out and move the view-port freely around.
here you go. in the XAML code, wrap it with scroll viewer. like this
<ScrollViewer x:Name="scrl" ZoomMode="Enabled" HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" SizeChanged="OnSizeChanged" MinZoomFactor="1">
<Canvas Background="AliceBlue" RenderTransformOrigin="0.5,0.5" x:Name="Main">
<Image Source="Assets/Floorplan.gif" Canvas.Left="358" Canvas.Top="84"></Image>
</Canvas>
</ScrollViewer>
then in my c#code you will put this.
private void OnSizeChanged(Object sender, SizeChangedEventArgs args) {
Main.Width = scrl.ViewportWidth;
Main.Height = scrl.ViewportHeight;
}
this will make your canvas zoom to pinch and pan enabled.
the image there is just a sample to see if the zoom function is working. It works fine.
the best way is creating a matrix for your canvas and scale and move the matrix like this :
Canvas can = new Canvas();
Matrix matrix = new Matrix();
matrix.Translate(50, 0);
matrix.Scale(1.5,1.5);
can.RenderTransform = new MatrixTransform(matrix);
Hope helps you
I have an image in a WPF window with the default Stretch setting, Uniform, and am making an attempt to make it fill the screen horizontally. I do not wish to use a different Stretch setting as this is supposed to a learning experience. The image dimensions being loaded are 420x800. This is the XAML for the window..
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="Red" Height="1200" Width="840">
<Image Name="Image" Source="{Binding SourceUri}">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="Scale" />
<TranslateTransform x:Name="Translate" />
</TransformGroup>
</Image.RenderTransform>
</Image>
</Window>
On the code-behind, I am attempting to calculate the scaling to zoom the image to fill the horizontal screen and I am using translate transform the move it to the center of the screen. The following bit of code is obviously wrong...
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace WpfApplication1 {
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
DataContext = this;
double ImageWidth = 420;
Scale.ScaleX = Width / ImageWidth;
Translate.X = -(ImageWidth / 2);
}
public string SourceUri {
get {
return #"C:\Users\Roel\Desktop\test.png";
}
}
}
}
I am attempting to understand how stretching and transformations are working together but I am having difficulty with this. I would appreciate all insights, even references to detailed explanations, as I have trouble finding any informational source explaining clearly and concisely how the transformations are applied.
You would usually just do this:
<Image Name="Image" Source="{Binding SourceUri}" Stretch="Fill"/>
In case you really need to calculate the stretch transformation manually, you would only need a ScaleTransform, no TranslateTransform, and you would put that into the LayoutTransform of the Image control. Moreover, the Image control would have to be placed into a Grid, which provides the size of the Windows's "client area". You can't calculate anything based on the Window's Width (or ActualWidth) as that includes the width of the Window's borders.
<Grid SizeChanged="Grid_SizeChanged">
<Image Name="image" Source="{Binding SourceUri}">
<Image.LayoutTransform>
<ScaleTransform x:Name="scale"/>
</Image.LayoutTransform>
</Image>
</Grid>
In the Grid's SizeChanged handler you would calculate the scaling as shown below.
private void Grid_SizeChanged(object sender, SizeChangedEventArgs e)
{
scale.ScaleX = e.NewSize.Width / image.Source.Width;
scale.ScaleY = e.NewSize.Height / image.Source.Height;
}
I added camera to an my App which is all in Portrait mode so would like the to keep it this way.
Here is the relevant code snippets I use in my .XAML
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480"
<Canvas x:Name="viewfinderCanvas" Width="480" Height="800" >
<!--Camera viewfinder -->
<Canvas.Background>
<VideoBrush x:Name="viewfinderBrush">
</VideoBrush>
</Canvas.Background>
</Canvas>
Here is my setup code from the .XAML.CS
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
if (PhotoCamera.IsCameraTypeSupported(CameraType.FrontFacing))
{
cam = new Microsoft.Devices.PhotoCamera(CameraType.FrontFacing);
}
else
{
cam = new Microsoft.Devices.PhotoCamera(CameraType.Primary);
}
cam.Initialized += new EventHandler<Microsoft.Devices.CameraOperationCompletedEventArgs>(cam_Initialized);
cam.CaptureCompleted += new EventHandler<CameraOperationCompletedEventArgs>(cam_CaptureCompleted);
cam.CaptureImageAvailable += new EventHandler<Microsoft.Devices.ContentReadyEventArgs>(cam_CaptureImageAvailable);
cam.CaptureThumbnailAvailable += new EventHandler<ContentReadyEventArgs>(cam_CaptureThumbnailAvailable);
viewfinderBrush.SetSource(cam);
}
The problem is that I hold the phone in Portrait and point the phone at a person. The screen shows the persons head on the right side of the screen and the persons feet at the left of the screen.
While as they stand in front of me there head should be at the top of the screen and there feet at the bottm, cause these people aint superman.
So it seems the image from the camera is getting rotated -90 before it appears on the screen.
Can anybody explain whats going wrong and what sample code I need to implement to fix this problem.
Thanks,
-Code
You need to implement a VideoBrush.RelativeTransform, as detailed in the following article :-
http://msdn.microsoft.com/en-us/magazine/hh708750.aspx
Also covered in the following :-
ViewFinder Orientation With Windows Phone 7 Mango PhotoCamera
just add this line to the C# code of your camera page. It will transform and handle the camera video stream in portrait mode correctly.
viewfinderTransform.Rotation = 90;