Develop Reference

How to get notified when ContentPage finishes loading

I've got some XAML ContentPages that have ContentView objects on them. So, typically I size these objects based on this.Width and this.Height, values that are set in the ContentPage. But, if there's not something explicitly calling my ContentView objects AFTER the ContentPage has loaded, the Width and Height values are null because the values aren't yet set.
What I'm trying to figure out is, how can I tell my ContentViews to wait until the ContentPage is done loading before it gets the Width and Height values?

Xamarin.Forms provides two lifecycle-type events:
OnAppearing
OnDisappearing
which can be overridden in Page subclasses.
Now the fact, OnAppearing will be executed before the screen comes, when you want an Loaded event that needs to be executed right after the screen comes, there is a workaround.
The work around
Create an property in viewmodel like below.
private bool _toggleTemp;
public bool ToggleTemp
{
get => _toggleTemp;
set => SetProperty(ref _toggleTemp, value);
}
Add the following line to the last line of the constructor. LoadingVm.ToggleTemp = true;
Add an Switch to your screen and make IsVisible to false as below. (just for demo purposes)
<Switch IsToggled="{Binding ToggleTemp}" Toggled="Switch_OnToggled" IsVisible="False" />
Now you can write the code that you want to write in Page Loaded in Switch_OnToggled.
private async void Switch_OnToggled(object sender, ToggledEventArgs e)
{
/* Your code goes here... */
}
Please let me know if you have any doubts

I've found another workaround and it is working in Xamarin Forms 4.8:
private bool isStarted = false;
protected override void LayoutChildren(double x, double y, double width, double height)
{
base.LayoutChildren(x, y, width, height);
if (!isStarted)
{
isStarted = true;
// do something
}
}

Winforms Control Layout at Runtime

I've been working on developing a custom control which will be used in our CRM frontend. The control itself is nothing special, it simply wraps two labels, text edits, and a button into a single control. (The control is only acting as a wrapper, a bit long winded, but unfortunately our only option due to various restrictions)
I though it would be nice to give the control a Font and ForeColor property, that would change the Font and Color of the labels. Changing the font size means that the relative position of the text boxes be changed to keep everything in line. No problem.
I encapsulated the layout logic in an UpdateLayout method, which is called on the set accessor of the Font property and everything works beautifully at design time, however, at runtime, the Font of the labels is correct, but the layout of the text boxes and button are still in the default positions, hence, the labels overlap.
What am I missing in for updating the position of controls at the init stage in runtime? I've tried calling the UpdateLayout() method from both Initialize and the constructor of the control, alas to no avail.
Am i missing something obvious here?
EDIT:
As requested, I whipped up a quick test. My test control looks like so (Not including Designer code):
public partial class TestControl : UserControl
{
private Font _font;
[Browsable(true)]
public override Font Font
{
get
{
return this._font ?? SystemFonts.DefaultFont;
}
set
{
this._font = value;
this.DoLayout();
}
}
private void DoLayout()
{
this.label1.Font = this._font;
this.Size = new Size(label1.Width + textBox1.Width + 10,
label1.Height >= textBox1.Height ? label1.Height : textBox1.Height);
this.textBox1.Location = new Point(label1.Location.X + 5 + label1.Width, 1);
this.Update();
}
public TestControl()
{
InitializeComponent();
}
protected override void OnLayout(LayoutEventArgs e)
{
base.OnLayout(e);
DoLayout();
}
}
That works great at design time, but runtime, less so...
EDIT2:
So the above code doesn't entirely reflect the problem accurately, however, I have tried Jogy's suggestion of overriding the OnLayout method, and lo and behold, it works!
I'm relatively new to Custom Controls, so a rookie mistake on my part. This will definitely be committed to the long term memory.

Override OnLayout() method and call your UpdateLayout() there.

Thanks for supplying the code, I would provide the properties by reusing already available controls.
public override Font Font
{
get { return this.label1.Font; }
set
{
this.label1.Font = value;
// Additional code to update related controls.
}
}
Also be aware that the declaration of
private Font _font;
Delivers a non-initialized variable, and by using it in the "Do_Layout" might use a null value. Maybe change it to the following when using your code.
this.label1.Font = this.Font;

Get Aero Window Colour

I've made a pretty slick Windows 8-ish interface using WPF. It already turns out way better than I could wish for, but I was wondering the following:
Is it somehow possible to retrieve the current window colour set by the user? You know, you can set the Aero colour when you right-click the desktop... My plan is to use that colour for a couple of canvas elements on my GUI.
Thanks in advance!

The SystemColours class exists for this very purpose. You can bind directly to it like so
"{DynamicResource {x:Static SystemColors.WindowColorKey}}"

You can query the ColorizationColor registry key for this.
I've even went a step further and created a method to get the hexadecimal colour value, hope this helps you:
public void SomeMethod()
{
int argbColor = (int)Microsoft.Win32.Registry.GetValue(#"HKEY_CURRENT_USER\Software\Microsoft\Windows\DWM","ColorizationColor", null);
var color = System.Drawing.Color.FromArgb(argbColor);
string hexadecimalColor = ConverterToHex(color);
}
private static String ConverterToHex(System.Drawing.Color c)
{
return String.Format("#{0}{1}{2}", c.R.ToString("X2"), c.G.ToString("X2"), c.B.ToString("X2"));
}

I managed to get the correct colour using the following code:
Little sidenote: It has a small correction in it to ignore the alpha bit of the hex number, so I get the full color rather than the less saturated one.
string colorizationValue = string.Format("{0:x}", Microsoft.Win32.Registry.GetValue(#"HKEY_CURRENT_USER\Software\Microsoft\Windows\DWM", "ColorizationColor", "00000000"));
StringBuilder bl = new StringBuilder(colorizationValue);
bl[0] = 'd';
bl[1] = '9';
colorizationValue = bl.ToString();
BrushConverter bc = new BrushConverter();
Brush brush = (Brush)bc.ConvertFrom("#" + colorizationValue);
cvs_barColor.Background = brush;

I created an open-source library for this here which is also available on NuGet.
install-package aerocolor-wpf.AeroColor
After installing the package, you can refer to a DynamicResource called AeroColor and AeroBrush depending on what you need.
There's some setup code that's needed too, but it isn't much. Just put something in your Loaded event handler of the window, as seen below.
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
Loaded += MainWindow_Loaded;
}
void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
AeroResourceInitializer.Initialize();
}
}
The neat thing about this library is that it installs a hook as well, which updates those resources as the actual Aero color changes in the system too. This means you don't have to handle that either, and if you use a DynamicResource to point to the color in your XAML instead of a StaticResource, WPF will automatically update the color in your UI as well.
Looks very cool when Windows 8 changes the Aero color transitionally and your color follows.

Windows 8 - Animating custom property in code-behind

Basically, I want to make bunch of Shapes and make them animated. So I came up with following custom class:
public class FunkyShape : DependencyObject
{
public double Animator
{
get { return (double)GetValue(AnimatorProperty); }
set { SetValue(AnimatorProperty, value); }
}
public static readonly DependencyProperty AnimatorProperty =
DependencyProperty.Register("Animator", typeof(double), typeof(FunkyShape),
new PropertyMetadata(0, new PropertyChangedCallback(Animator_Changed)));
private static void Animator_Changed(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
double delta = (double)e.NewValue - (double)e.OldValue;
((FunkyShape)d).ProcessDelta((double)e.NewValue, delta);
}
private void ProcessDelta(double val, double delta)
{
Holder.Width = val;
Holder.Height = val;
// Keep shape centered
HolderPosition.X = delta / 2;
HolderPosition.Y = delta / 2;
}
private Shape Holder;
public TranslateTransform HolderPosition
{
get { return (TranslateTransform)Holder.RenderTransform; }
}
public FunkyShape(Canvas playground, Shape shapeToInit)
{
Holder = shapeToInit;
Holder.Width = 10;
Holder.Height = 10;
Holder.Fill = new SolidColorBrush(Colors.Blue);
Holder.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center;
Holder.RenderTransform = new TranslateTransform()
{
X = 500,
Y = 500
};
Holder.RenderTransformOrigin = new Point(0.5, 0.5);
// init done
playground.Children.Add(Holder);
Animate();
}
public void Animate()
{
DoubleAnimation g1 = GrowAnimation();
Storyboard sb = new Storyboard();
Storyboard.SetTarget(g1, this);
// CAN'T FIND ANIMATOR PROPERTY
Storyboard.SetTargetProperty(g1, "Animator");
sb.Children.Add(g1);
sb.Begin(); // THROWS EXCEPTION
}
private static DoubleAnimation GrowAnimation()
{
DoubleAnimation growAnimation = new DoubleAnimation();
growAnimation.Duration = TimeSpan.FromMilliseconds(3000);
growAnimation.From = 0;
growAnimation.To = 100;
growAnimation.AutoReverse = true;
growAnimation.EnableDependentAnimation = true;
growAnimation.RepeatBehavior = new RepeatBehavior(5);
return growAnimation;
}
}
However, when I try making an instance of the class and adding it to the canvas, I get Exception - Storyboard.Being() throws it and tells me that it can't find Animator property.
So - what am I doing wrong?
EDIT: After 3 code changes - it is still not working; I get "Cannot resolve TargetProperty Animator on specified object" error. So if somebody knows the answer - please help out by modifying the code. Thanks!
EDIT: OK, after 24 hours of banging head against the wall there is some progress - if I add shape through XAML it animates, but if I add it through code behind (Canvas.Children.Add), it doesn't work. Let me see if I can figure out why.

OK,
I've found the workaround for what is obviously a bug within the framework (although I'm sure some MS employee will post response and say it's a feature/it-is-by-design). Several things need to be done:
Add default/parameter-less constructor
Change base class of FunkyShape to UserControl.
Open up XAML view of the Page class where you want to add shapes
Add one instance of FunkyShape as a child within the Canvas XAML (<tm:FunkyShape /> for example). IT WON'T WORK WITHOUT THIS.
Make an instance of FunkyShape in code-behind, add it to canvas, start animation and enjoy seeing it works
Switch to less buggy technology.

In Windows 8 you cannot animate custom properties without also setting the enabledependentanimation property to true. This is because non-deterministic animations are disabled by default.
Reference: http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.animation.pointanimation.enabledependentanimation.aspx

Yes, you must define this property as a dependency property, not just a regular CLR property. This involves quite a bit of simple boiler plate code. See thus blog post for a complete example:
http://timheuer.com/blog/archive/2012/03/07/creating-custom-controls-for-metro-style-apps.aspx

OK, I had this problem too, but I didn't want to include a public parameterless constructor in my class, so I found another way.
Basically, the issue is that WinRT is a native platform, and it can't do reflection on .NET code. That's why the build process for WinRT apps generates metadata about the types used in XAML (you can find the relevant code in obj/(Debug|Release)/XamlTypeInfo.g.cs).
If a type is never used in XAML, no metadata about this type is generated, which means (among other things) that you can't animate the properties of the type.
If you're writing a class library, you can just include a XAML resource dictionary and declare a dummy instance of the type; it will cause metadata to be generated. However, it requires that the type has a public parameterless constructor, which might not be desirable.
So there is another solution: provide the metadata yourself. There are a several interfaces to implement, and they have many members, so it can be quite tedious to do manually. Fortunately, you don't have to! Here's what you can do:
add a public parameterless constructor to the class (temporarily)
create a XAML ResourceDictionary and declare an instance of the class in it (as described above)
copy the XamlTypeInfo.g.cs file into your project (I renamed it to XamlTypeInfo.cs)
replace the call to the constructor with throw new NotImplementedException()
delete the ResourceDictionary file
remove the public parameterless constructor
And you're done, the animation now works properly.
The process is still quite tedious, so it would be nice to have a tool to do the work for us...
EDIT: much easier solution: apply the [Bindable] attribute to the class. It makes the metadata generator take the type into account even if it's not used in XAML. (ignore the fact that the doc says it's for C++ types; it works just fine on C# classes as well)

Setting button color in MonoTouch.Dialog

I have the following code:
[OnTap ("Account")]
[Alignment (UITextAlignment.Center)]
[Entry ("Create ScanDo! Account")]
public string Login;
And I'd like to set the Cell background color dynamically, based on the contents of another field and then after the button is clicked. Could anyone point me in a direction with some samples?
Thanks,
Rick

The answer I came up with:
btnLogin = new StyledStringElement("", delegate {Account();})
To define the object, add it to the RootElement, then:
btnLogin.BackgroundColor = UIColor.Green;
To set the color! This method let me set color, font, size and caption.
Great work Miguel, Thanks!

As you're adding the button to the root collection you can set the colour. Just as you set the elements of a section.
Root = new RootElement("First Section") {
new Section ("Test"){
new StyledStringElement("Login", delegate { Account(); })
{
BackgroundColor = UIColor.Green
}
}
}

I don't like to keep pimping my projects but in this case it is the best option for you.
Check out https://github.com/RobertKozak/MonoMobile.MVVM
My project started out as adding Databinding support to MonoTouch.Dialog but has grown into a much bigger framework that is much easier to use than MonoTouch.Dialog.
Using MonoMobile.MVVM the code to do what you want looks like this:
public class ButtonView : View, INotifyPropertyChanged
{
private UIColor ButtonColor = UIColor.Red;
[Button]
[Bind("ButtonColor", "BackgroundColor")]
public void Test()
{
ButtonColor = UIColor.Green;
PropertyChanged(this, new PropertyChangedEventArgs("ButtonColor"));
}
public event PropertyChangedEventHandler PropertyChanged = (s,e)=>{};
}
There are better ways to accomplish this using a proper ViewModel but this will work as listed (I tested it before I typed it in here.)
MonoMobile.MVVM is still in beta but there is enough there to get you going. It should be in full release status in the next couple of weeks after I finish up implementing INotifyCollectionChanged and adding a few more bindings for various Element properties.