"Cannot resolve TargetName" error in custom storyboard - windows-phone-7

In WP7 silverlight app, i wanted to use a storyboard animation on a particular event.
The animation is changing button height property from x to y points (changed for query).
I am using below code in my program
Storyboard myStoryBoard = new Storyboard();
myStoryBoard.Duration = new Duration(TimeSpan.FromMilliseconds(200));
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
Storyboard.SetTargetName(myDoubleAnimation, button1.Name); // button1 is normal button on UI
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Button.HeightProperty));
myDoubleAnimation.From = 200;
myDoubleAnimation.To = 300;
myStoryBoard.Children.Add(myDoubleAnimation);
myStoryBoard.Begin();
when i run my code, i am hitting with
Cannot resolve TargetName button1 error
any easy fix for my issue?

I think you can use SetTargetName only if the Storyboard is in the visual tree. I suggest using SetTarget instead: http://msdn.microsoft.com/en-us/library/system.windows.media.animation.storyboard.settarget%28v=vs.95%29.aspx
Storyboard.SetTarget(myDoubleAnimation, button1);

Related

NativeScript - How to convert xml layout to native view?

I'm trying to create dialog with a custom layout view and when I try do this:
import app = require('application');
import { GridLayout } from 'ui/layouts/grid-layout';
const dialog = new android.app.AlertDialog.Builder(app.android.currentContext);
const layout = new GridLayout();
dialog.setView(layout);
So I got the following error:
Uncaught Error: Cannot convert object to Landroid/view/View;
I tried change to:
dialog.setView(layout.android);
And
dialog.setView(layout.nativeView);
And the dialog is displayed empty.
How I can convert a NativeScript UI Object to a native android View?
you can't access nativeView or android property of nativescript view without adding it to Visual UI tree. when nativescript view is added to UI tree then it gets valid values for android and nativeView.
so you have to do something like this:
let container= <StackLayout>this.page.getViewById("stackContainer");
let layout = new GridLayout();
let label = new Label();
label.text = "Custom Alert working";
layout.addChild(label)
container.addChild(layout)
now you will have values for android and nativeView properties of GridLayout.
but after that you will not be able to use layout.android or layout.nativeView in setView because it already contains parent. so workaround for this that you remove this view from container's native view.
let nativeView=layout.nativeView;
container.nativeView().removeView(nativeView)
dialog.setView(nativeView).show();
also note that removing child from container will also reset child's android property to null. that's why we are saving reference to nativeView variable.
here is working playground demo is you need help:https://play.nativescript.org/?template=play-ng&id=4610ET

How we dynamically create and use storyboards for rotating a grid along yaxis

I am developing a UWP app.
I am trying to rotate a grid dynamically by creating a storyboard at runtime. However, I could not find BeginAnimation() method or TargetTyepe/TargetName property in StoryBoard through which I can animate my grid.
Could you please suggest me a possible workaround for the same? If possible, please share the code.
Thanks in advance.
You can create a Storyboard in code like this:
XAML
<Grid x:Name="MyGrid">
<Grid.RenderTransform>
<RotateTransform/>
</Grid.RenderTransform>
</Grid>
CS
var sb = new Storyboard();
var anim = new DoubleAnimation();
Storyboard.SetTarget(anim, MyGrid);
Storyboard.SetTargetProperty(anim, "(UIElement.RenderTransform).(RotateTransform.Angle)");
anim.From = 0;
anim.To = 360;
anim.Duration = TimeSpan.FromSeconds(1);
sb.Children.Add(anim);
sb.Begin();
Alternatively, you can x:Name the RenderTransform instead and set that as the target directly, instead of targeting it indirectly through MyGrid.

How to position a view right above the keyboard?

I'm writing a Forms app. How to position a view right at the bottom of the screen and when some entry is focused and the keyboard is visible, the view to be right above the keyboard? On android, it is possible to set Window.SetSoftInputMode(SoftInput.AdjustResize) and that will make the Content resize every time the keyboard is appearing/disappearing. However, I need the status bar to be transparent and SoftInput.AdjustResize doesn't work with WindowManagerFlags.TranslucentStatus. My question is, how do I position a view right above the keyboard without setting SoftInput.AdjustResize?
Take this example:
public Page1()
{
InitializeComponent();
var al = new StackLayout
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand
};
var button = new BoxView {Color = Color.Red, VerticalOptions = LayoutOptions.EndAndExpand};
var entry = new Entry {HorizontalOptions = LayoutOptions.Fill};
al.Children.Add(entry);
al.Children.Add(button);
Content = al;
Content.SizeChanged += (sender, args) =>
{
button.Layout(new Rectangle(0, Content.Height - 120, App.Dimensions.Width, 120));
};
}
If you run this code, when you'll press the input, nothing will change, the "button" will remain on the bottom of the screen not visible because of the overlaying keyboard.
If we add Window.SetSoftInputMode(SoftInput.AdjustResize) in MainActivity's onCreate it works fine, the box is moved above the keyboard on entry's focus.
Also, if we change Content = al; to Content = new ScrollView {Content = al};, it works fine.
However, if we add Window.AddFlags(WindowManagerFlags.TranslucentStatus); in MainActivity's onCreate, none of those methods work anymore.
Thanks in advance.
I'm writing a Forms app. How to position a view right at the bottom of
the screen and when some entry is focused and the keyboard is visible,
the view to be right above the keyboard?
If you are using Xamarin Forms, then wrapping your UI elements in a ScrollView should do the trick. Something like this if you are using XAML:
<ScrollView>
<ScrollView.Content>
// Your Original XAML content here
</ScrollView.Content>
<ScrollView
EDIT:
Looking at the example you just added, I THINK I know what is happening. So, the ScrollView Trick only works for elements that require keyboard input. I.e if you instead had an entry element at the bottom of the screen, and wrapped everything in a ScrollView like I suggested, then the keyboard should push the entry element up for you. However in your case you have a boxview at the bottom of the screen, which the keyboard simply runs over.
What you have for Content.SizedChanged is a good idea, however I don't think the size of the view actually changes when the keyboard pops up (at least, Content.SizeChanged isn't called when the keyboard pops up), so that part of your code is really only called on loading of the page from the MCVE you provided.
HOWEVER, I was able to move the 'button' up when the keyboard appears by doing this:
Replace
Content.SizeChanged += (sender, args) =>
{
button.Layout(new Rectangle(0, Content.Height - 120, App.Dimensions.Width, 120));
};
With
entry.Focused += (sender, e) =>
{
button.TranslationY -= 120;
};
You may have a heck of a time getting that magic translation number for all the different devices and orientations though. When I tested it on the iPhone 6 simulator I had to push way above 120 before I could see it above the keyboard.
Hope that helps!

Showing a dialog on top right corner

I want to create a dialog with a custom layout and no title. Also, the dialog should open on the top right corner of the screen. Here is the screenshot of what I want.
In xamarin.iOS is something like PopOverViewContainer. May it's in Android the same.
Maybe by changing the gravity of the dialog using the WindowManager Attributes property:
Android.App.AlertDialog.Builder builder = new AlertDialog.Builder(Activity);
AlertDialog alertName = builder.Create();
alertName.SetTitle("Warning...");
alertName.SetIcon(Android.Resource.Drawable.IcDialogAlert);
alertName.SetMessage("This is a warning message");
alertName.SetButton("OK", (s, ev) =>
{
return;
});
alertName.Show();
var window = alertName.Window;
var wlp = window.Attributes;
wlp.Gravity = GravityFlags.Top;
wlp.Flags = WindowManagerFlags.DimBehind;
window.Attributes = wlp;
You should be able to change the gravity parameter and the flags (which currently stops the background to the dialog from dimming
I have used below code to achieve my requirement.
Window window = dialog.Window;
WindowManager.LayoutParams wlp = window.Attributes;
wlp.Gravity = GravityFlags.Top | GravityFlags.Right;
window.Attributes = wlp;

Xamarin UWP brand toolbar

I'm using Visual Studio 2015 and made a Xamarin project to support iOS, Android and UWP.
I want rebrand the toolbar, and on iOS and Android its possible to set a background color and a picture in the toolbar.
But for Universal Windows Platform this seems impossible.
So I want to set my own TopAppBar with a picture, and hide the current toolbar for UWP;
In my MainPage.xaml.cs I've;
#if __ANDROID__ || __IOS__
ToolbarItems.Add(new ToolbarItem("+", "", () => App.Navigation.PushAsync(new AddAccount())));
#endif
So for UWP there would be no items on the toolbar. But it still appears.
I cannot find any documentation on how to;
-customize the toolbar for UWP
-hide the toolbar for UWP
I've tried to add a toolbar like so;
var _globalAppBar = new AppBar();
_globalAppBar.Height = 128;
_globalAppBar.Background = new SolidColorBrush(Colors.Green);
BitmapImage bmI = new BitmapImage();
bmI = new BitmapImage(new Uri("ms-appx:///Assets/logo.png", UriKind.RelativeOrAbsolute));
var imageBrush = new ImageBrush();
imageBrush.ImageSource = bmI;
_globalAppBar.Background = imageBrush;
AppBarButton abbtn = new AppBarButton();
abbtn.Label = "Add";
_globalAppBar.Content = abbtn;
this.BottomAppBar = _globalAppBar;
But that results in having two toolbars at the top...
So it's better to modify the existing toolbar created by Xamarin, but I don't know how to access it from the 'public MainPage()' of the UWP project.
I just tried to redo your problem. I can hide the toolbar when I clear the toolbaritems.
Also I have to call
NavigationPage.SetHasNavigationBar(this, false);
on the page.

Resources