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.
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?
I have this code:
<StackLayout x:Name="OuterSL" >
<StackLayout.Resources>
<Style TargetType="Label">
<Setter Property="TextColor" Value="Red" />
<Setter Property="Style" Value="{StaticResource HelpDetail}" />
</Style>
</StackLayout.Resources>
<Label Text="Overview" />
<Grid >
<Grid.Resources>
<Style TargetType="Label">
<Setter Property="TextColor" Value="Red" />
<Setter Property="Style" Value="{StaticResource HelpDetail}" />
</Style>
</Grid.Resources>
Can someone tell me how I can do the setting of the TextColor and the Style in the backend C#. In particular I would like to do this for all the children here. So I would need to find all of the Grid's that are part of the StackLayout and set the Text and Style for them also. Note that this for example I just gave a snippet of the code. In the real code I have many Grids inside the StackLayout and I am setting the Resources in them all. Also I don't want to set at the page content level. Just everything inside the StackLayout named OuterSL.
Each Layout control (Grid/Stacklayout/...) has a Children property (a list of Views) and those children can be also be layout containers (or not), so if you recursively descend the view hierarchy you can assign the styles and colors for all the view elements as needed...
This should help you get started.
void SetStyles(IList<View> children, Style style)
{
foreach (var child in children)
{
switch (child)
{
case StackLayout s:
child.Style = style;
if (s.Children.Count > 0)
SetStyles(s.Children, style);
break;
case Grid g:
if (g.Children.Count > 0)
SetStyles(g.Children, style);
break;
case Entry e:
e.TextColor = Color.Red;
break;
case Label l:
l.TextColor = Color.Green;
break;
~~~
}
}
Just call it like:
if (Application.Current.Resources.TryGetValue("SomeStackLayoutStyle", out object style))
{
SetStyles(someStackLayout.Children, Style(style));
}
I have a UWP app and try out Embedded Xamarin Forms. The embedding itself works so far. But I noticed that certain TextStyles do no longer work after I initialized Forms.
Without Forms:
After Forms.Init:
The only difference is this Line in the App.xaml.cs:
Xamarin.Forms.Forms.Init(e);
The Code of the TextBlock is:
<TextBlock x:Name="TitlePage"
Text="Hello"
Style="{StaticResource PageTitleStyle}" />
And the style:
<Style x:Key="PageTitleStyle"
TargetType="TextBlock">
<Setter Property="VerticalAlignment"
Value="Center" />
<Setter Property="FontWeight"
Value="SemiLight" />
<Setter Property="FontSize"
Value="{StaticResource LargeFontSize}" />
<Setter Property="TextTrimming"
Value="CharacterEllipsis" />
<Setter Property="TextWrapping"
Value="NoWrap" />
<Setter Property="Margin"
Value="{StaticResource PageTitleMargin}" />
</Style>
I created a minimal example which you can find here: https://github.com/NPadrutt/EmbeddedFormsTest
Versions:
VS 15.5.2
Xamarin.Forms 2.5.0.121934
Microsoft.NETCore.UniversalWindowsPlatform 6.0.5
When you execute Xamarin.Forms.Forms.Init(e);, it will load the ResourceDictionary which defined in Xamarin. So that after this code line invoked, the text may show the style defined in Xamarin Forms, not the style you defined in UWP. Details you can check the code snippet of Init method.
Updated:
The Init method merge the style by this code line
return new Windows.UI.Xaml.ResourceDictionary {
Source = new Uri("ms-appx:///Xamarin.Forms.Platform.UAP/Resources.xbf")
And you will find the following style in Resource.xaml in Xamarin.
<Style x:Key="PageTitleStyle" TargetType="TextBlock">
<Setter Property="FontWeight" Value="Bold" />
</Style>
Which has same x:key (PageTitleStyle) as you defined so that your style will be override. Just change the x:key of your style it will not be influenced by the Xamarin resources,for example PageTitleStyle2.
If you want to use the style you defined in UWP app for the Xamarin Forms, you could use Custom Renderers. TextBlock is the native control for UWP, the correspondent control in Xamarin Forms is Label. Details please see Renderer Base Classes and Native Controls. You should have a Label control in Xamarin Forms and create a custom renderer for Label and set the style with target type is TextBlock in UWP. For example:
public class MyLabelRenderer : LabelRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
{
base.OnElementChanged(e);
Control.Style= (Windows.UI.Xaml.Style)App.Current.Resources["PageTitleStyle"];
}
}
For more samples you could reference this.
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.
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>