I'm binding following XAML to RotateAngle property and it works great with one "but". Image displays cropped. Image control doesn't seem to be refreshing/resizing after rotation. Is there any way to force resize on image and scrollviewer?
<ScrollViewer Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" BorderThickness="0" HorizontalScrollBarVisibility="Auto">
<Image
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Source="{Binding Input, Converter={StaticResource ByteArrayToBitmapConverter}}"
RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<RotateTransform Angle="{Binding RotateAngle}"></RotateTransform>
</Image.RenderTransform>
</Image>
</ScrollViewer>
http://www.silverlight.net/content/samples/sl3/toolkitcontrolsamples/run/default.html
Go to this page, there is a control called LayoutTransformer. See the sample of that control. It handles rotation, scaling and skewing of images, textbox, listbox, etc.
You will get the code there.
Hope that helps.!
You can try:
<Image x:name="ctrl"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Source="{Binding Input, Converter={StaticResource ByteArrayToBitmapConverter}}"
RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<RotateTransform Angle="{Binding DataContext.RotateAngle, ElementName=ctrl}"></RotateTransform>
</Image.RenderTransform>
</Image>
Or you can use:
<Image
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Source="{Binding Input, Converter={StaticResource ByteArrayToBitmapConverter}}"
RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<RotateTransform Angle="{Binding DataContext.RotateAngle, RelativeSource={RelativeSource Self}}"></RotateTransform>
</Image.RenderTransform>
</Image>
Assuming you want to scale your image down to fit the original image space, you could use my CalculateConstraintScale method from here:
Silverlight Rotate & Scale a bitmap image to fit within rectangle without cropping to scale the image down based on the rotation.
Click here for a working testbed app created for that answer (looks like the image below):
Related
I currently have the following code:
<ScrollViewer DockPanel.Dock="Top">
<InkCanvas Name="InkCanvasOnImage" Height="203">
<InkCanvas.LayoutTransform>
<ScaleTransform ScaleX="{Binding ElementName=ZoomSlider,Path=Value}" ScaleY="{Binding ElementName=ZoomSlider,Path=Value}"></ScaleTransform>
</InkCanvas.LayoutTransform>
</InkCanvas>
</ScrollViewer>
<Slider DockPanel.Dock="Top" Name="ZoomSlider" Value="1" Minimum="0.3" Maximum="3" Height="20" />
When I adjust the slider, the entire ScrollViewer is changing sizes, and moving the slider up and down in the application. What I intended was just the image that is inside the InkCanvas to zoom in and out. Am I using the right WPF control for this, or did I mess up somewhere? My understanding is that I'm altering the scale of the InkCanvas and not the ScrollViewer Dimensions with the Slider.
Apply Scale Transformation On Image Instead Of InkCanvas
<ScrollViewer DockPanel.Dock="Top">
<InkCanvas Name="InkCanvasOnImage" Height="203">
<Image Source="AddImageSourceHere">
<Image.LayoutTransform>
<ScaleTransform ScaleX="{Binding ElementName=ZoomSlider,Path=Value}" ScaleY="{Binding ElementName=ZoomSlider,Path=Value}"></ScaleTransform>
</Image.LayoutTransform>
</Image>
</InkCanvas>
</ScrollViewer>
<Slider DockPanel.Dock="Top" Name="ZoomSlider" Value="1" Minimum="0.3" Maximum="3" Height="20" />
I want to show a specific area of an image in my WPF control.
Let's say the original image dimensions are 600x400 and I'm trying to show a rectangle inside that image, positioned on X=420,Y=330 with width=60, height=40.
So I tried to use ScaleTransform and calculate the scale factor as 10, and the RenderTransformOrigin to 0.75, 0.85.
But when I view the control I don't get the image I expected. (only the red rectangle).
The is the code:
<Grid>
<Button Width="600" Height="400">
<Button.Template>
<ControlTemplate>
<Grid ClipToBounds="True">
<Image Source="c:\temp\sample.bmp" Stretch="Uniform" RenderTransformOrigin="0.75, 0.85">
<Image.RenderTransform>
<ScaleTransform ScaleX="10" ScaleY="10" />
</Image.RenderTransform>
</Image>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
That the result:
You could use a CroppedBitmap:
<Image>
<Image.Source>
<CroppedBitmap Source="c:\temp\sample.bmp" SourceRect="420,330,60,40"/>
</Image.Source>
</Image>
Or you use an ImageBrush with an appropriate Viewbox:
<Grid>
<Grid.Background>
<ImageBrush ImageSource="c:\temp\sample.bmp"
ViewboxUnits="Absolute" Viewbox="420,330,60,40"/>
</Grid.Background>
</Grid>
I am transitioning from Windows forms to UWP, and as an exercise want to move an image across the screen. In Forms its easy using image.Left, but for the life of me I can't find a way in UWP.
I tried wrapping it in Canvas, as suggested elsewhere,
<Canvas
x:Name="cDog1"
Grid.Row="1"
Margin="29,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<Image
x:Name="Dog1"
Canvas.Left="0"
Source="Assets/images/dog.png"
Stretch="None" />
</Canvas>
But still can't get back a Canvas.Left that can be changed.
In the materials I read they speak of a SetLeft, yet that isn't an option.
Solved!
<Canvas
x:Name="cDog1"
Grid.Row="1"
Margin="29,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<Image
x:Name="Dog1"
Canvas.Left="0"
Source="Assets/images/dog.png"
Stretch="None" >
<Image.RenderTransform>
<TranslateTransform x:Name="MoveDog1" X="0" Y="0"/>
</Image.RenderTransform>
</Image>
</Canvas>
From https://social.msdn.microsoft.com/Forums/sqlserver/en-US/4ed8bbf8-5a63-4ef9-a9e5-ddcb310ed865/uwpchow-do-i-move-something-with-a-button-press?forum=wpdevelop
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>
<ScrollViewer x:Name="imagescrollviewer" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<!--<Viewbox>-->
<Image x:Name="im" Source="{Binding JpgImageSource}" RenderTransformOrigin="0.5,0.5" Stretch="{Binding stretchstate}" >
<Image.LayoutTransform>
<ScaleTransform ScaleX="{Binding Value,ElementName=scaleslider}" ScaleY="{Binding Value,ElementName=scaleslider}" CenterX="0.5" CenterY="0.5"/>
</Image.LayoutTransform>
</Image>
<!--</Viewbox>-->
</ScrollViewer>
<ToggleButton Width="80" Margin="5" IsChecked="{Binding checkstate}" Content="{Binding checkstate}">
<Slider x:Name="scaleslider" Orientation="Vertical" Height="100" Margin="5" HorizontalAlignment="Center" Maximum="4" Minimum="0.2" Value="1"/>
i use the slider to change the size showing , the togglebutton used to change size showing to adapt current window , but there is a problem , when the size larger than size when it adapts the window, i cannot make it apadt the window , while it is smaller ,it works.
Or is there any ways to get the size of current image control ,while resizing the window?