Has anyone had this problem before?
I want to show an animation in windows phone 7, my sdk version is 7.1，I wanna rotate a picture as animation in my app.but it didn't work.
<Image.Resources>
<Storyboard x:Name="myStoryboard">
<DoubleAnimation
Storyboard.TargetName="myTransform"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:5"
RepeatBehavior="Forever" />
</Storyboard>
</Image.Resources>
WP7 animations are not the same as WPF - one CompositeTransform object instead of a few for different purposes. First off, I would declare this animation in PhoneApplicationPage.Resources.
You need specify target animation and the property.
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="myStoryboard">
<DoubleAnimation
Storyboard.TargetName="myTransformPanel" <!-- Here is a object that
you'd like to move e.g. StackPanel -->
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
From="0" To="360" Duration="0:0:5"
RepeatBehavior="Forever" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>
Also you need to set CompositeTransform for the object that you want to transform.
<StackPanel x:Name="myTransformPanel" >
<StackPanel.RenderTransform>
<CompositeTransform></CompositeTransform>
</StackPanel.RenderTransform>
</Stackanel>
Related
I want to make a animation like
<Style.Animations>
<Animation Duration="0,0,1" PlaybackDirection="Normal" FillMode="None">
<KeyFrame KeyTime="0.5">
<Setter Property="Width" Value="{TemplateBinding Width}" />
<Setter Property="Height" Value="{TemplateBinding Height}" />
</KeyFrame>
</Animation>
</Style.Animations>
but it tell me Unable to cast object of type 'Avalonia.Animation.AnimatorKeyFrame' to type 'Avalonia.IStyledEleme;
How can I Solve the problem?
Is it possible to create TabItem MultiTrigger that will bind to Valiation.HasError property from a control that:
is a part of another UserControl
UserControl is defined in another xaml file
UserControl is a child of TabItem where MultTrigger is defined
Main xaml file:
<telerik:RadTabItem Header="Data">
<telerik:RadTabItem.Style>
<Style TargetType="{x:Type telerik:RadTabItem}" BasedOn="{StaticResource {x:Type telerik:RadTabItem}}">
<Setter Property="HeaderTemplate" Value="{StaticResource TabItemErrorTemplate}"/>
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<!-- does not work -->
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:EquipmentDetailsTabBasicData}}, Path=InputName.(Validation.HasError)}" Value="False"/>
<!-- works only if UserControl content is inculded directly in TabItem -->
<Condition Binding="{Binding ElementName=InputPiecesCount}, Path=(Validation.HasError)}" Value="False"/>
</MultiDataTrigger.Conditions>
<Setter Property="HeaderTemplate" Value="{StaticResource TabItemTemplate}"/>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</telerik:RadTabItem.Style>
<local:EquipmentDetailsTabBasicData x:Name="TabBasicData"/>
</telerik:RadTabItem>
local:EquipmentDetailsTabBasicData xaml file looks like this:
<UserControl>
<Grid>
<telerik:RadMaskedTextInput
x:Name="InputName"
Value="{Binding Name, ValidatesOnDataErrors=True, NotifyOnValidationError=True}"/>
<telerik:RadMaskedNumericInput
x:Name="InputPiecesCount"
Value="{Binding PiecesCount, ValidatesOnDataErrors=True, NotifyOnValidationError=True, Mode=TwoWay}"
/>
</Grid>
</UserControl>
MultDataTrigger conditions shows my attempts to bind to controls in child UserControl - both do not work.
I can just move UserControl contents to RadTabItem. When I do the second version (binding by ElementName) works OK. I would like to avoid it because it makes my xaml file hard to maintain.
The first version is taken from this answer, but it does not work and I think that because UserControl is not an ancestor of RadTabItem.
i'm new Xamarin, can anyone suggest, how to add behaviors to the style of control in Xamarin xaml.
I have some ClickableImageBehavior and some imageBaseStyle, how to associate behavior with setter?
UPD
Details:
So... problem:
public class ClickableImageBehavior : Behavior<Image>
{
// handle user tap on button.
}
And using looks like this:
<Image>
<Image.Behaviors>
<view:ClickableImageBehavior/>
</Image.Behaviors>
</Image>
But i don't want to write this xaml on every button that has ClickableImageBehavior
I want to create some base style with this behavior and base properties and simple inherit it in every image like
<Image style="{StaticResource clickableImageStyle"/>
In WPF i can deal with it like in this article, but how to do it in Xamarin xaml?
I'm not really an expert but when I added a behaviours it was always in a component like
<psc:EnumBindablePicker x:Name="enumpickerSpeechPart">
<psc:EnumBindablePicker.Behaviors>
<pscv:PickerBehavior x:Name="pickerBehaviorSpeechPart" />
</psc:EnumBindablePicker.Behaviors>
</psc:EnumBindablePicker>
In the ResourceDictionary you can add calls to converters.
<local:BooleanToObjectConverter x:Key="boolToStyleImage" x:TypeArguments="Style">
<local:BooleanToObjectConverter.FalseObject>
<Style TargetType="Image">
<Setter Property="HeightRequest" Value="20" />
<Setter Property="Source" Value="{local:ImageResource Images.error.png}" />
</Style>
</local:BooleanToObjectConverter.FalseObject>
<local:BooleanToObjectConverter.TrueObject>
<Style TargetType="Image">
<Setter Property="HeightRequest" Value="20" />
<Setter Property="Source" Value="{local:ImageResource Images.success.png}" />
</Style>
</local:BooleanToObjectConverter.TrueObject>
</local:BooleanToObjectConverter>
I have a long list selector and i have a datatemplate as item template, containing an image. I want the source to change based on a property from the model. I tried with a converter but i could't get it to work.
Now i'm trying with triggers. I have:
<Image Name="MovieThumbnail">
<i:Interaction.Triggers>
<ei:DataTrigger Binding="{Binding DataContext.IsCategoryCurrent,ElementName=LayoutRoot}" Value="true">
<ei:ChangePropertyAction TargetObject="{Binding ElementName=MovieThumbnail}" TargetName="Source" Value="{Binding Path=Image120x170}" PropertyName="Source"/>
</ei:DataTrigger>
<ei:DataTrigger Binding="{Binding DataContext.IsCategoryCurrent,ElementName=LayoutRoot}" Value="false">
<ei:ChangePropertyAction TargetObject="{Binding ElementName=MovieThumbnail}" TargetName="Source" Value="{x:Null}" PropertyName="Source"/>
</ei:DataTrigger>
</i:Interaction.Triggers>
</Image>
It work almost how i want it to, except that images repeat themselves. As in a movie has the picture of another movie. I think it's because i bind by element name and the image control has multiple instances (one for each item), but i would think they can't see each other. Any help highly appreciated.
EDIT:
After further investigation, it seems that this happens because of the long list selector.
I first load 40 items, and then load another 40, but the second batch of 40 items get the pictures from the first batch. If i raise a property changed event, then the pictures from the second batch are set on all items repeating themselves. I have no idea why this is happening.
If i load another 40 and raise property changed on IsCategoryCurrent again, the pictures from the 3rd batch get set 3 times.
I managed to fix it:
<Image
Grid.RowSpan="2"
Name="MovieThumbnail"
Stretch="Fill"
Width="130" Height="195"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<i:Interaction.Triggers>
<ei:DataTrigger Binding="{Binding DataContext.IsCategoryCurrent,ElementName=LayoutRoot}"
Value="true">
<ei:ChangePropertyAction TargetObject="{Binding ElementName=MovieThumbnail}"
TargetName="Source"
PropertyName="Source">
<ei:ChangePropertyAction.Value>
<BitmapImage CreateOptions="BackgroundCreation"
UriSource="{Binding Path=Image120x170}"/>
</ei:ChangePropertyAction.Value>
</ei:ChangePropertyAction>
</ei:DataTrigger>
<ei:DataTrigger Binding="{Binding DataContext.IsCategoryCurrent,ElementName=LayoutRoot}"
Value="false">
<ei:ChangePropertyAction TargetObject="{Binding ElementName=MovieThumbnail}"
TargetName="Source"
Value="{x:Null}"
PropertyName="Source"/>
</ei:DataTrigger>
</i:Interaction.Triggers>
</Image>
And i raise a property changed event of IsCategoryCurrent at every change.
I am displaying a Canvas and would like it to rotate smoothly through 90 degrees when the phone is rotated from Portrait to Landscape.
It seems that when the phone is rotated (at least in the emulator) the canvas is automatically rotated but the transition is not a smooth one, (i.e. it goes from 0 to 90 degrees) - I assume this is the auto-layout function.
I would like my canvas to rotate smoothly, i.e. not suddenly jump from 0 to 90 degrees (as the auto-layout function does). I have setup two states in Blends state manager and I call the following:
private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
{
if ((e.Orientation & PageOrientation.Landscape) != 0)
{
VisualStateManager.GoToState(this, "Landscape", true);
}
else
{
VisualStateManager.GoToState(this, "Portrait", true);
}
}
I have set up transitions between these as follows:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OrientationStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Portrait" GeneratedDuration="0" To="Landscape">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0" Value="90"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="Landscape" GeneratedDuration="0" To="Portrait">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0" Value="90"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Portrait"/>
<VisualState x:Name="Landscape"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
The interesting point is that it seems that the transition should START at 90 degrees and rotate back to 0 because it seems that the auto-layout function kicks in first. Is this what I should be doing?
Or how do I override the auto-layout feature so that the transition is triggered first?
I am only working in the emulator (waiting for the lengthy App Hub registration process) so it is difficult to see if this is the right way to go.
You might be interested in David Anson's implementation of this effect here:
http://blogs.msdn.com/b/delay/archive/2010/09/28/this-one-s-for-you-gregor-mendel-code-to-animate-and-fade-windows-phone-orientation-changes-now-supports-a-new-mode-hybrid.aspx
It is all open source.