In an Windows Phone 7 application, I want to apply a 90ยบ rotation to an image when the user clicks a button. I'm doing the following:
<Image Height="369" Name="imageView" Stretch="Uniform" Width="394">
<Image.RenderTransform>
<RotateTransform Angle="0" />
</Image.RenderTransform>
</Image>
At the function:
((RotateTransform)imageView.RenderTransform).Angle += 90;
So far, so good. The problem appears when I place the image within a scrollviewer.
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible" Height="389" HorizontalAlignment="Left" Margin="12,78,0,0" Name="scrollViewer" VerticalAlignment="Top" Width="409">
<Image Height="369" Name="imageView" Stretch="Uniform" Width="394">
<Image.RenderTransform>
<RotateTransform Angle="0" />
</Image.RenderTransform>
</Image>
</ScrollViewer>
In this case I get an error - InvalidCastException was unhandled - on this line of code:
((RotateTransform)imageView.RenderTransform).Angle += 90;
The problem is that imageView.RenderTransform is not a RotateTransform then, but of CompositeTransform instead, so try this instead:
((CompositeTransform)imageView.RenderTransform).Rotation += 90;
And if you want to specify it as a Composite transform directly in the XAML too, you can do that:
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible" Height="389" HorizontalAlignment="Left" Margin="12,78,0,0" Name="scrollViewer" VerticalAlignment="Top" Width="409">
<StackPanel>
<Image Height="369" Name="imageView" Stretch="Uniform" Width="394" Source="/PhoneApp2;component/Images/lumia-920-rainbow.png">
<Image.RenderTransform>
<CompositeTransform Rotation="0" CenterX="197" CenterY="184" />
</Image.RenderTransform>
</Image>
<StackPanel>
</ScrollViewer>
Related
I want to create a custom usercontrol to represent a player in a 2D map.
I had an ellipse to represent the player but I want to have on the border of the ellipse an arrow to indicate where the player is looking.
This is what I tried :
<Ellipse Width="17" Height="17" Stroke="Black" Fill="White" HorizontalAlignment="Center" />
<Path Data="M5,0 0,5 5,10" Fill="White" Stroke="Black" VerticalAlignment="Center" >
<Path.LayoutTransform>
<RotateTransform Angle="10"/>
</Path.LayoutTransform>
</Path>
the result :
That looks like what I want (it's not properly aligned but that's not the point here).
The problems are :
I know the position of the ellipse's center without the arrow
When the arrow will be on the right the relative position of the ellipse's center will be different --> I could solve this problem using a square control
My Circle has a textblock on top (Horitonzal + vertical center) to
display its id
How to move the arrow depending on the position looked ? I thought the easier might be to calculate an angle and rotate the whole control.
My first idea was to draw using any vector drawing software (illustrator for instance) the path, and get the coordinates of the path, and paste them in WPF.
then just rotate the usercontrol.
But doing this will also rotate the text and I don't want the text to rotate.
I'm stuck on this one, I hope my problem is enough described to be understood.
EDIT My first try :
<ControlTemplate TargetType="ContentControl">
<Grid Width="34" Height="34">
<Path x:Name="contour_forme"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="1"
Stretch="Uniform"
Width="28"
Height="22"
HorizontalAlignment="Left"
Fill="{TemplateBinding Background}"
Data="M28.857,53.500 C24.537,53.487 20.477,52.380 16.938,50.443 C16.938,50.443 16.938,50.500 16.938,50.500 C16.938,50.500 16.785,50.350 16.785,50.350 C12.845,48.157 9.579,44.924 7.317,41.032 C7.317,41.032 -6.176,27.755 -6.176,27.755 C-6.176,27.755 8.206,14.530 8.206,14.530 C10.380,11.316 13.289,8.649 16.681,6.736 C16.681,6.736 16.938,6.500 16.938,6.500 C16.938,6.500 16.938,6.581 16.938,6.581 C20.525,4.615 24.641,3.496 29.021,3.509 C42.835,3.551 53.996,14.775 53.951,28.580 C53.906,42.385 42.670,53.542 28.857,53.500 ZM29.004,8.507 C17.953,8.474 8.965,17.400 8.929,28.443 C8.893,39.487 17.822,48.467 28.873,48.500 C39.924,48.533 48.912,39.608 48.948,28.564 C48.985,17.520 40.056,8.540 29.004,8.507 Z"
>
<Path.LayoutTransform>
<RotateTransform Angle="0" />
</Path.LayoutTransform>
</Path>
<TextBlock Style="{DynamicResource StyleTextes}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"
Text="5"
/>
</Grid>
</ControlTemplate>
With the result :
As you can see I didn't manage to center the text inside my 22px circle.
My arrow is about 6 px height so I've created a control of 22 (circle's size expected) + 2 * 6px depending on the arrow position.
But when I try to rotate my path doing :
<Path.LayoutTransform> <RotateTransform Angle="90" />
</Path.LayoutTransform>
I have the following result :
I'm not sure on how I can keep the circle of my path in the center of the control when I rotate the path.
Just apply the RotateTransform to the "image" but not to the text.
Also I would use a render transform instead of a layout transform.
<Canvas Canvas.Left="206.333" Canvas.Top="119" Height="80" Width="80">
<Path Data="M244,99.333333 L210.16667,109.50034 244.83334,125.50034" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black" RenderTransformOrigin="0.5,0.5" Height="60" Canvas.Left="3" Canvas.Top="5" Width="60">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="70"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<TextBlock TextWrapping="Wrap" Text="TextBlock" Height="20" Width="80" Canvas.Top="30" TextAlignment="Center"/>
</Canvas>
I am in the process of moving all images from our project into a ResourceDictionary to be used across all projects. When using Syncfusion Metro Studio I am able to get the XAML source of the images.
<Viewbox x:Shared="false" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Grid>
<Grid Name="backgroundGrid" Width="48" Height="48" Visibility="Collapsed" />
<Path Data="M0,4.1309996L20.362437,4.1309996C20.038338,4.8125897,19.782439,5.5301299,19.594339,6.2769008L2.1451931,6.2769008 2.1451931,23.445208 30.042807,23.445208 30.042807,20.78887C30.342306,20.81167 30.642406,20.834471 30.949104,20.834471 31.367603,20.834471 31.781102,20.81027 32.188001,20.76737L32.188001,25.590239 20.922435,25.590239 20.922435,27.736771 23.605427,27.736771 23.605427,29.882 8.5839529,29.882 8.5839529,27.736771 11.265565,27.736771 11.265565,25.590239 0,25.590239z M29.967411,3.9921243L29.967411,8.1359167 25.823251,8.1359167 25.823251,10.100034 29.967411,10.100034 29.967411,14.243865 31.931586,14.243865 31.931586,10.100034 36.075645,10.100034 36.075645,8.1359167 31.931586,8.1359167 31.931586,3.9921243z M30.948448,0C35.985142,1.0841802E-08 40.067997,4.0825729 40.067997,9.1171007 40.067997,14.153367 35.985142,18.236 30.948448,18.236 25.912456,18.236 21.830998,14.153367 21.830998,9.1171007 21.830998,4.0825729 25.912456,1.0841802E-08 30.948448,0z" Stretch="Uniform" Fill="#FF666666" Width="26" Height="26" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Viewbox>
The issue here is that I am creating buttons with the image next to my text as follows:
<corecontrols:IdyllicButton Name="btnClose" Height="30">
<StackPanel Orientation="Horizontal">
<Image Source="/MHA.Modules.PolicyAdmin;component/Images/Cancel.png"/>
<TextBlock VerticalAlignment="Center" Margin="5,0" Text="Close"/>
</StackPanel>
</corecontrols:IdyllicButton>
But I cannot set my Image.ImageSource to my StaticResource that I have created in a ResourceDictionary as I get the following error:
An object of the type "System.Windows.Controls.Viewbox" cannot be
applied to a property that expects the type
"System.Windows.Media.ImageSource".
I have also tried using a canvas.
Any ideas how to do this?
Hoping this helps someone:
I found the solution, instead of using a Image, use the Rectangle control in its place and set the OpacityMask to the Viewbox resource.
<Rectangle Width="15" VerticalAlignment="Center"
Height="15"
Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Uniform" Visual="{StaticResource Close}"/>
</Rectangle.OpacityMask>
</Rectangle>
I found this scrolling MahApps.Metro source code for the WindowCommand Buttons.
I am trying to rotate an image and want to use a storyboard as in the next phases i need to add multiple animations running to time.
my code is inside a click event of a button as follows:
//start the animation
DoubleAnimation animationRotation = new DoubleAnimation();
animationRotation.From = -17;
animationRotation.To = 17;
animationRotation.Duration = new Duration(TimeSpan.FromMilliseconds(NumericDisplay.Milliseconds));
animationRotation.RepeatBehavior = RepeatBehavior.Forever;
animationRotation.AccelerationRatio = 0.3;
animationRotation.DecelerationRatio = 0.3;
animationRotation.AutoReverse = true;
Storyboard storyboard = new Storyboard();
Storyboard.SetTarget(animationRotation, Arm);
Storyboard.SetTargetProperty(animationRotation,
new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"));
storyboard.Children.Add(animationRotation);
// Add the storyboard to the tracking collection.
//this.Stostoryboards.Add(bomb, storyboard);
// Configure and start the storyboard.
this.BeginStoryboard(storyboard);
the code compiles without warning yet the click event does not start the animation,
EDIT
One of the proposed answers asked me to check the XAML included a definition for rotatetransform ... the XAML below is what I am using
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ResourceDictionary.xaml"/>
</ResourceDictionary.MergedDictionaries>
<ImageBrush x:Key="ImageBrush_Decrement" ImageSource="Images/pad-metronome-decrement-button.png" Stretch="Fill"/>
<ImageBrush x:Key="ImageBrush_Increment" ImageSource="Images/pad-metronome-increment-button.png" Stretch="Fill"/>
</ResourceDictionary>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="LayoutRoot" Height="412">
<Image x:Name="MetronomeWindowBackground" Height="140" Margin="237,1.5,231,0" Source="Images\pad-metronome-top-under-bg.png" Stretch="Fill" VerticalAlignment="Top"/>
<Image x:Name="Arm" Margin="506,17,493,0" Source="Images\pad-metronome-arm.png" Stretch="Fill" Height="326" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<RotateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Image x:Name="MetronomeFlash" Height="209" Margin="104,0,96,0" Source="Images\pad-metronome-flash-top-landscape.png" Stretch="Fill" VerticalAlignment="Top" d:IsHidden="True" />
<Image x:Name="MetronomeBackground" Height="209" Source="Images\pad-metronome-top-bg-landscape.png" Stretch="Fill" VerticalAlignment="Top" Margin="3,0,-3,0"/>
<Image x:Name="MetronomeStartButton" Margin="379.5,100.5,373.5,0" Source="Images\pad-metronome-start-button-base.png" Stretch="Fill" Height="110" VerticalAlignment="Top"/>
<Image x:Name="MetronomeTapPadLeft" HorizontalAlignment="Left" Height="209" Margin="5,1.5,0,0" Source="Images\pad-metronome-tap-pad-left.png" Stretch="Fill" VerticalAlignment="Top" Width="136"/>
<Image x:Name="MetronomeTapPadRight" HorizontalAlignment="Right" Source="Images\pad-metronome-tap-pad-right.png" Stretch="Fill" Width="136" Height="209" VerticalAlignment="Top"/>
<Image x:Name="MetronomeWindowHighlight" Height="105" Margin="238.5,18,231.5,0" Source="Images\pad-metronome-window-overlay.png" Stretch="Fill" VerticalAlignment="Top"/>
<Image x:Name="MetronomeBottomBackground" Margin="3,208,-3,362" Source="Images\pad-metronome-section-bottom-bg.png" Stretch="Fill"/>
<my:MetronomeLargeNumericDisplay HorizontalAlignment="Left" Margin="459,120,0,0" x:Name="NumericDisplay" VerticalAlignment="Top" Value="999" Width="122.25" />
<Image Height="78" Margin="448,110.5,436,0" Source="Images\pad-metronome-start-button-overlay.png" Stretch="Fill" VerticalAlignment="Top"
x:Name="DisplayOverlay" MouseDown="DisplayOverlay_MouseDown" />
<RepeatButton x:Name="ButtonDecrement" Content="" BorderThickness="7" HorizontalAlignment="Left" Margin="252,110.5,0,0" VerticalAlignment="Top" Width="149" Height="100" Background="{DynamicResource ImageBrush_Decrement}" Style="{DynamicResource RepeatButtonStyle_noflash}" BorderBrush="{DynamicResource ImageBrush_Decrement}" d:LayoutOverrides="HorizontalAlignment" Click="ButtonDecrement_Click"></RepeatButton>
<RepeatButton Content="" BorderThickness="7" HorizontalAlignment="Left" Margin="631,110.5,0,0" VerticalAlignment="Top" Width="149" Height="100" Background="{DynamicResource ImageBrush_Increment}" Style="{DynamicResource RepeatButtonStyle_noflash}" BorderBrush="{DynamicResource ImageBrush_Decrement}" Name="ButtonIncrement" Click="ButtonIncrement_Click" />
</Grid>
what am I doing wrong?
The code you've posted seems to be ok, however, the path refers to an existing element, so make sure you've included appropriate nodes in xaml, where Arm control is defined.
Let's say Arm is a Rectangle control. Your xaml should then look more or less like this:
...
<Rectangle x:Name="Arm" Fill="Aqua" Width="100" Height="100" Canvas.Left="100" Canvas.Top="100">
<Rectangle.RenderTransform>
<TransformGroup>
<RotateTransform />
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
...
Arm can be another type of control, but the important thing is that RenderTransform, TransformGroup and RotateTransform nodes are defined, so animation has some existing elements to change as specified in the PropertyPath in your code.
after much messing around with new projects and much simplified code I asked the question slightly differently in another thread and someone posted working code.
on investigation that reason my animation was not working was that I had provided a duration to the animation but not the storyboard itself !! doh.
full answer here (which is one of the fullest answers I have received on this topic)
How do I create a rotate animation on an image object using c# code only (inside a WPF window)
Lucas, thanks to you for your patience and assistance on this question.
Dan
Simple question,
SilverLight 3 application (no toolkit).
I want to use an image and a slider.
The image is displayed fit to screen on load, and then the slider has to zoom-in and out the image when its value changes. I don't want to use anything else, like deepzoom. How can this be done?
Urgent, Thanks in advance,
The xaml code below :
<ScrollViewer x:Name="scroll" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<layout:LayoutTransformer x:Name="layout" Background="{x:Null}" >
<layout:LayoutTransformer.LayoutTransform>
<ScaleTransform x:Name="contentScale" ScaleX="1.0" ScaleY="1.0" />
</layout:LayoutTransformer.LayoutTransform>
<Image x:Name="img" Source="../pin.PNG" >
</Image>
</layout:LayoutTransformer>
</ScrollViewer>
And on the slidervaluechangedevent :
this.contentScale.ScaleX = this.contentScale.ScaleY = e.NewValue;
this.layout.ApplyLayoutTransform();
LayoutTransformer is ther in toolkit, add its reference:
System.Windows.Controls.Layout.Toolkit
Without having a toolkit, u can do it but it doesn't work properly(it will never update the scrollviewer)...try it the below one :
<ScrollViewer x:Name="scroll" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Themes:ThemeManager.StyleKey="TreeScrollViewer">
<Image x:Name="img" Source="../charge_chargeline.PNG" >
<Image.RenderTransform>
<ScaleTransform x:Name="contentScale" ScaleX="1.0" ScaleY="1.0" />
</Image.RenderTransform>
</Image>
</ScrollViewer>
And on the slidervaluechangedevent :
`this.contentScale.ScaleX = this.contentScale.ScaleY = e.NewValue`;
Hope it helps :)....
I have the following code
<Canvas Width="800" Height="600">
...
<local:UpgradeLandDialog x:Name="upgradeDialog" Canvas.Left="250" Canvas.Top="200" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0">
<local:UpgradeLandDialog.LayoutTransform>
<ScaleTransform ScaleX="0" ScaleY="0" CenterX="400" CenterY="300"/>
</local:UpgradeLandDialog.LayoutTransform>
</local:UpgradeLandDialog>
</Canvas>
In the UserControl I animate the ScaleTranform to 1. I want UserControl to "grow" from its center, but it "grows" from the upper left corner of it. The values in CenterX and CenterY do nothing. How can I make it Scale as I want?
You can use RenderTransformOrigin="0.5,0.5" on the control you want to animate.
You can change your code like this:
<Canvas Width="800" Height="600" RenderTransformOrigin="0.5,0.5">
<local:UpgradeLandDialog x:Name="upgradeDialog" Canvas.Left="250" Canvas.Top="200" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0">
<local:UpgradeLandDialog.LayoutTransform>
<ScaleTransform ScaleX="0" ScaleY="0"/>
</local:UpgradeLandDialog.LayoutTransform>
</local:UpgradeLandDialog>
</Canvas>
Remove (CenterX="400" CenterY="300") and add (RenderTransformOrigin="0.5,0.5") to the Canvas. This way if you have a container with dynamic width and height, it can scale from the center without problem.
To make it grow from its center, you'll have to animate its margins as well (at half the rate at which you animate the width and height).
I ran into this problem not too long ago as well. I ended up repositioning the user control at every layout update to simulate a custom point based growth.
This does work for me. Did I miss something?
<Rectangle StrokeThickness="1" Stroke="Black" Width="200" Height="200">
<Rectangle.RenderTransform>
<ScaleTransform
ScaleX="{Binding ElementName=slider, Path=Value}"
ScaleY="{Binding ElementName=slider, Path=Value}"
CenterX ="100" CenterY="100"/>
</Rectangle.RenderTransform>
</Rectangle>
Even though this is an old post, I thought I'd share my findings, since it took me way too long to figure out this fairly simple solution.
Flipping the y-axis was easy, but I couldn't get CenterX and CenterY working. I really needed to be able to set the origin at any position I wanted.
Solution: nested canvasses.
<Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Canvas Canvas.Left="{Binding MyOriginLeft}" Canvas.Bottom="{Binding MyOriginBottom}">
<Canvas.LayoutTransform>
<ScaleTransform ScaleX="1" ScaleY="-1"/>
</Canvas.LayoutTransform>
<!-- This now does what you expect it to do, independent of position of origin -->
<Line X1="10" Y1="20" X2="30" Y2="40" Stroke="Black" StrokeThickness="1"/>
</Canvas>
</Canvas>