VisualStateManager and MVVM - xaml

I'm working on a Windows 8 Store App (using the Grid App Template) and while I'm loading data from a server I want to show a ProgressRing and hide the GridView or ListView (depends on if the app is snapped or not) that will display the data once it is fully loaded.
The issue is that when the ViewModel is loading data I need to be able to change the VisualState.
I found what I thought was a solution Here, but this code will not build.
public class StateManager : DependencyObject
{
public static string GetVisualStateProperty(DependencyObject obj)
{
return (string)obj.GetValue(VisualStatePropertyProperty);
}
public static void SetVisualStateProperty(DependencyObject obj, string value)
{
obj.SetValue(VisualStatePropertyProperty, value);
}
public static readonly DependencyProperty VisualStatePropertyProperty =
DependencyProperty.RegisterAttached(
"VisualStateProperty",
typeof(string),
typeof(StateManager),
new PropertyMetadata((s, e) => //this throws the error
{
var propertyName = (string)e.NewValue;
var ctrl = s as Control;
if (ctrl == null)
throw new InvalidOperationException("This attached property only supports types derived from Control.");
System.Windows.VisualStateManager.GoToState(ctrl, (string)e.NewValue, true);
}));
}
ERROR: Cannot convert lambda expression to type 'object' because it is
not a delegate type
Does anyone know how to get the linked solution to work? Or is there a simpler method that I am completely missing (I'm a XAML newbie!)?
I'm not even sure if the listed solution will work because the "Snapped" vs "Full" states are managed by the base LayoutAwarePage class included with the template.

why not simply use a datatrigger bind to a viewmodel property like IsBusy {get;set;} to enable your Progressring?

Related

Render Bitmap in UWP with MVVM

In my code behind I used to render the bitmap from my grid with RenderTargetBitmap.
var renderBitmap = new RenderTargetBitmap();
await renderBitmap.RenderAsync(UIElement);
I want to use the MVVM pattern but now the RenderTargetBitmap class does not work anymore.
Now I'm trying to use the WinRT XAML Toolkit - Composition
var gridBitmap = await WriteableBitmapRenderExtensions.Render(Grid);
but then I get this error: Message "Unable to expand length of this stream beyond its capacity." string
Is there a other way to render this in MVVM? Maybe with SharpDX? Or Iam doing anything wrong?
The problem here is that rendering a UI element into a bitmap is really not a task for view model, as it is very View-specific. In this case then I would see no harm in putting this code in the page's code behind and making it possible to trigger this method from the view-model.
Depending on the MVVM framework you are using, you could trigger the function in different ways. First would be to make the page implement an interface like IRenderGrid with this one method, then add a new method to the view-model that will take IRenderGrid as parameter and store the instance for later use, and then in OnNavigatedTo of the page call this view model method.
interface IRenderGrid
{
Bitmap RenderGrid();
}
class MainViewModel
{
...
private IRenderGrid _renderGrid;
public void RegisterRenderGrid( IRenderGrid renderGrid )
{
_renderGrid = renderGrid;
}
}
class MainPage : Page, IRenderGrid
{
...
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
var viewModel = DataContext as MainViewModel;//get the view model
viewModel.RegisterRenderGrid( this );
}
public Bitmap RenderGrid()
{
var renderBitmap = new RenderTargetBitmap();
await renderBitmap.RenderAsync(Grid);
}
}
Of course the problem is that if your view models reside in a different assembly, you will not have access to Bitmap there, so you will have to wrap it in some custom type.
Alternative approach to triggering the page's method would be to use a messenger, which many MVVM frameworks offer. In such case you would subscribe to a trigger message in the view and react to such message by executing the rendering and then pass the result to the view model either with another message or through a public method.

While Binding Collection of Colors System.ArgumentException is occuring

I have a custom view in my PCL project in Xamarin.Forms. I am not able bind a collection of colors in Xaml to a bindable object in my CustomView.
I have set the binding as in below in xaml:
<local:CustomView x:Name="customView" ColorPalette="{Binding Colors}"/>
My CustomView is as below:
public class CustomView : View
{
public CustomView()
{
}
public static void OnColorsChanged(BindableObject bindable, object oldValue, object newValue)
{
// Some Code
}
public static readonly BindableProperty ColorsPaletteProperty =
BindableProperty.Create("ColorPalette", typeof(IEnumerable<Color>), typeof(CustomView), new List<Color>(){ Color.FromRgb(0, 0, 0),
Color.FromRgb(251, 176, 59)}, BindingMode.Default, null, OnColorsChanged);
public IEnumerable<Color> ColorPalette
{
get { return (IEnumerable<Color>)GetValue(ColorsPaletteProperty); }
set { SetValue(ColorsPaletteProperty, value); }
}
}
While performing the binding in Xaml, I get an exception "System.ArgumentException: Object of type 'Xamarin.Forms.Binding' cannot be converted to type 'Xamarin.Forms.Color'".
But when I bind the Colors in using SetBinding in code behind it is working properly.
Code Behind:
//Binding using SetBinding is working where as {Binding Colors} in xaml is not working
customView.SetBinding<ViewModel>(CustomView.ColorsPaletteProperty, vm => vm.Colors);
Colors is a collection of colors of type IEnumerable / IList / List / ObservableCollection.
Any help is appreciated.
Regards,
Nitish
A custom view embedded in another view will inherit the binding context of the parent view. Are you setting the binding context of the view to a viewmodel that has a Colors property? Some more code samples of where you're setting the binding context and of your viewmodel might be helpful.
Your property name is ColorPalette but your bindable property name has not followed the standards, it should be like "ColorPaletteProperty" not "ColorsPaletteProperty" you have added an "s" to the "Color" which is wrong. So can you remove that and check? it should work, let me know if this helps.
Thanks,
Michael

Xaml Behavior DP not updated

I have a UWP application which uses the Managed UWP Behavior SDK.
I wrote a custom behavior which has two dependency properties, one of which is a ObservableCollection.
Whenever I update an item in the collection, I make sure that PropertyChanged is called for the collection.
However, the Dependency property is not being updated.
My code:
<trigger:CustomBehavior ItemIndex="{x:Bind ItemIndex}"
Presences="{Binding ElementName=Box,
Path=DataContext.CustomCollection,
UpdateSourceTrigger=PropertyChanged, Converter={StaticResource TestConverter}}" />
My TestConverter shows me that when I update an item in the collection, the updatesource trigger is working. The dependency property in my behavior however, is not firing the Changed event. When I change the entire custom collection, the DP is updated, when I just change one item, it isn't.
Research so far says that DependencyObject.SetValue just checks to see if the object has changed and if one item changed, it will just think that the collection didn't change at all? Is this true, and if so, how can I overcome this?
Thanks
A collection-type dependency property should usually be declared as the most basic collection type, IEnumerable. This way you can assign a variety of actual collection types to the property, including those that implement INotifyCollectionChanged, like ObservableCollection<T>.
You would check at runtime if the collection type actually implements the interface, and possibly attach and detach a handler method for the CollectionChanged event.
public class CustomBehavior : ...
{
public static readonly DependencyProperty PresencesProperty =
DependencyProperty.Register(
"Presences", typeof(IEnumerable), typeof(CustomBehavior),
new PropertyMetadata(null,
(o, e) => ((CustomBehavior)o).OnPresencesPropertyChanged(e)));
private void OnPresencesPropertyChanged(DependencyPropertyChangedEventArgs e)
{
var oldCollectionChanged = e.OldValue as INotifyCollectionChanged;
var newCollectionChanged = e.NewValue as INotifyCollectionChanged;
if (oldCollectionChanged != null)
{
oldCollectionChanged.CollectionChanged -= OnPresencesCollectionChanged;
}
if (newCollectionChanged != null)
{
newCollectionChanged.CollectionChanged += OnPresencesCollectionChanged;
// in addition to adding a CollectionChanged handler, any
// already existing collection elements should be processed here
}
}
private void OnPresencesCollectionChanged(
object sender, NotifyCollectionChangedEventArgs e)
{
// handle collection changes here
}
}

Ignore the Binding initialization

The inital problem is coming from a personal project about the polyline of the Xamarin.Forms.Map where the initialization is realized by a binding from the XAML part..
Let me be clear by an example :
I have an object CustomMap.cs which inherit from Xamarin.Forms.Map (This file is in the PCL part -> CustomControl/CustomMap.cs)
public class CustomMap : Map, INotifyPropertyChanged
{
public static readonly BindableProperty PolylineAddressPointsProperty =
BindableProperty.Create(nameof(PolylineAddressPoints), typeof(List<string>), typeof(CustomMap), null);
public List<string> PolylineAddressPoints
{
get { return (List<string>)GetValue(PolylineAddressPointsProperty); }
set
{
SetValue(PolylineAddressPointsProperty, value);
this.GeneratePolylineCoordinatesInner();
}
}
// ...
}
As you can see, I have a bindable property with an assessor and the XAML doesn't seem to use this assessor..
So the MainPge.xaml part of the page, where the control is called, looks like that:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:control="clr-namespace:MapPolylineProject.CustomControl;assembly=MapPolylineProject"
x:Class="MapPolylineProject.Page.MainPage">
<ContentPage.Content>
<control:CustomMap x:Name="MapTest" PolylineAddressPoints="{Binding AddressPointList}"
VerticalOptions="Fill" HorizontalOptions="Fill"/>
</ContentPage.Content>
</ContentPage>
The MainPge.xaml.cs part:
public partial class MainPage : ContentPage
{
public List<string> AddressPointList { get; set; }
public MainPage()
{
base.BindingContext = this;
AddressPointList = new List<string>()
{
"72230 Ruaudin, France",
"72100 Le Mans, France",
"77500 Chelles, France"
};
InitializeComponent();
//MapTest.PolylineAddressPoints = AddressPointList;
}
}
So, everything is fine if I edit the PolylineAddressPoints from the object instance (if the commented part isnt' commented..), but if I init the value from the XAML (from the InitializeComponent();), it doesn't work, the SetValue, in the Set {}, of the CustomMap.PolylineAddressPoints, isn't called..
I then searched on the web about it and get something about the Dependency Properties? or something like that. So I tried some solutions but, from WPF, so some methods, such as DependencyProperty.Register();. So yeah, I can't find the way to solve my problem..
I also though about something, if DependencyProperty.Register(); would exists in Xamarin.Forms, then it means I would have to do it for each values? Because, if every value has to be set by a XAML binding logic, it would not work, I would have to register every value, doesn't it?
I'm sorry if I'm not clear, but I'm so lost about this problem.. Please, do not hesitate to ask for more details, thank in advance !
Finaly, the initial problem is that I'm trying to set a value of an object/control, from the XAML. Doing this by a Binding doesn't work, it seems like it ignored.. However, it does work if I do the following:
MapTest.PolylineAddressPoints = AddressPointList;
There are multiple questions in this:
Why is the property setter never called when using Xaml ?
Am I properly defining my BindableProperty ?
Why is my binding failing ?
Let me answer them in a different order.
Am I properly defining my BindableProperty ?
The BindableProperty declaration is right, but could be improved by using an IList<string>:
public static readonly BindableProperty PolylineAddressPointsProperty =
BindableProperty.Create(nameof(PolylineAddressPoints), typeof(IList<string>), typeof(CustomMap), null);
but the property accessor is wrong, and should only contains this:
public IList<string> PolylineAddressPoints
{
get { return (IList<string>)GetValue(PolylineAddressPointsProperty); }
set { SetValue(PolylineAddressPointsProperty, value); }
}
I'll tell you why while answering the next question. But you want to invoke a method when the property has changed. In order to do that, you have to reference a propertyChanged delegate to CreateBindableProperty, like this:
public static readonly BindableProperty PolylineAddressPointsProperty =
BindableProperty.Create(nameof(PolylineAddressPoints), typeof(IList<string>), typeof(CustomMap), null,
propertyChanged: OnPolyLineAddressPointsPropertyChanged);
And you have to declare that method too:
static void OnPolyLineAddressPointsPropertyChanged(BindableObject bindable, object oldValue, object newValue)
{
((CustomMap)bindable).OnPolyLineAddressPointsPropertyChanged((IList<string>)oldValue, (IList<string>)newValue);
}
void OnPolyLineAddressPointsPropertyChanged(IList<string> oldValue, IList<string> newValue)
{
GeneratePolylineCoordinatesInner();
}
Why is the property setter never called when using Xaml ?
The property, and the property accessors, are only meant to be invoked when accessing the property by code. C# code.
When setting a property with a BindablePrperty backing store from Xaml, the property accessors are bypassed and SetValue() is used directly.
When defining a Binding, both from code or from Xaml, property accessors are again bypassed and SetValue() is used when the property needs to be modified. And when SetValue() is invoked, the propertyChanged delegate is executed after the property has changed (to be complete here, propertyChanging is invoked before the property change).
You might wonder why bother defining the property if the bindable property is only used by xaml, or used in the context of Binding. Well, I said the property accessors weren't invoked, but they are used in the context of Xaml and XamlC:
a [TypeConverter] attribute can be defined on the property, and will be used
with XamlC on, the property signature can be used to infer, at compile time, the Type of the BindableProperty.
So it's a good habit to always declare property accessors for public BindableProperties. ALWAYS.
Why is my binding failing ?
As you're using CustomMap as both View and ViewModel (I won't tell the Mvvm Police), doing this in your constructor should be enough:
BindingContext = this; //no need to prefix it with base.
As you're doing it already, your Binding should work once you've modified the BindableProperty declaration in the way I explained earlier.

Xamarin.Forms. Custom Property Binding issue

I created custom controls in Xamarin. One of it is ValidatedEntryCell:
public class ValidatedEntryCell: EntryCell
{
public static readonly BindableProperty ShowBorderProperty = BindableProperty.Create(nameof(ShowBorder), typeof(bool), typeof(ValidatedEntryCell), false);
public bool ShowBorder
{
get { return (bool)GetValue(ShowBorderProperty); }
set
{
SetValue(ShowBorderProperty, value);
OnPropertyChanged();
}
}
}
I want to change that ShowBorder property in case if Text is empty. I tried several cases how to invoke that property:
Invoking that property straight forward in xaml. Smth like: renderers:ValidatedPicker x:Name="Gender" Title="Gender" ShowBorder="True"
That case works fine.
<renderers:ValidatedEntryCell ShowBorder="{Binding FirstNameIsNotValid}" x:Name="FirstName"... (I setup FirstNameIsNotValid = true in codebehind)
I used converters <renderers:ValidatedEntryCell x:Name="LastName" ShowBorder="{Binding Source={x:Reference LastName}, Converter={StaticResource EmptyTextToBoolConverter}, Path=Text.Length}" that always return true
Tried to use style triggers for property.
Unfortunately anything helps here. Will be glad for any advice
Edit: partially helps that link. For now I can setup property in constructor in codebehind and changes made will be visible.