Im creating a card game, I have CardModel, and DeckModel. Standard stuff. I do a summary here with simplified code.
public class CardModel : INotifyPropertyChaned
{
// all memebers with get, set implementing with NotifyPropertyChanged()
public int Strength;
public Color BackSide;
//etc
}
public class DeckModel : INotifyPropertyChaned {
// all memebers with get, set implementing with NotifyPropertyChanged()
public ObservableCollection<CardModel> Cards;
public void InsertFront(CardModel c);
public void InsertBack(CardModel c);
public CardModel TakeFromTop();
public void Shuffle();
}
The game has different piles of cards (Decks) and cards are taken from one of them and unserted in the other. The Hand of the player, for instance, is also a Deck of cards. We just use different UI components to show it different on screen.
The backend has been coded by another person and he does all the logic as you expect, like for example:
public void UserRequestNewCard()
{
CardModel c = MainDeck.TakeFromTop();
PlayerHand.InsertFront(c);
}
Now I need to do the UI. I created controls called CardViewer and DeckViewer and Bind to properties, like the Cards.Count for the deck. And everything works like a charm. I see the numbers going up and down when cards are taken or added. Stuff like:
<ContentView xmlns:blablabla
x:Class="MyGame.DeckViewer"/>
<Frame blablba
<Label Text="{Binding Cards.Count}"/>
/>
/>
public partial class DeckViewer : ContentView, INotifyPropertyChanged
{
public Deck Cards {get; set;}
public DeckViewer() => InitializeComponent();
public Bind(DeckModel deck)
{
this.Bindingcontest= deck;
}
}
but ..
How can I detect from the UI that a card is being transferred from one Deck to another Deck so I can do an animation showing a card, or a box, moving from A to B before actually changing the content of the component ??
As Jason suggested, when you are involved in the operation from one Deck to another Deck, you can encapsulate the animation of the movement of a card in advance, and then call this animation method every time when there is a card movement in the method. This will looks more elegant.
For how to use it, please refer to: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/animation/
Related
I come from a WPF / Prism background but I really like what X:Bind offers. How do I get x:Bind to work with my ViewModel when using Prism.Uno?
I have prism:ViewModelLocator.AutoWireViewModel="True" but I seem to be missing something in my understanding of how it works when designing.
Thanks
G
The use of x:Bind requires the binding path to be rooted in the View.
To use the DataContext, you'll need make it available typed through the view, like this:
public partial class MyControl : INotifyPropertyChanged
{
#if !HAS_UNO
// Uno already defines this event (it will be removed
// in the future to be aligned properly with WinUI)
public event PropertyChangedEventHandler PropertyChanged;
#endif
public MainPage()
{
this.InitializeComponent();
DataContextChanged +=
(s, e) => PropertyChanged?.Invoke(
this,
new PropertyChangedEventArgs(nameof(ViewModel)));
}
public MyViewModel ViewModel => DataContext as MyViewModel;
}
I am using MVVM and displaying some items on a DataGrid. My model is RecordingInfo and looks like:
public class RecordingInfo : IDataErrorInfo
{
public RecordingInfo(string fullDirectoryName, string recordingName, int recordingNumber)
{
FullDirectoryName = fullDirectoryName;
RecordingName = recordingName;
RecordingNumber = recordingNumber;
}
public string FullDirectoryName { get; internal set; }
public string RecordingName { get; set; }
public int RecordingNumber { get; internal set; }
public string Error
{
get { throw new NotImplementedException(); }
}
public string this[string propertyName]
{
get {
if (propertyName == "RecordingName")
{
if (this.RecordingName.Length < 2)
return "Recording Name must be at least two characters";
}
return null;
}
}
}
I end up with a collection of these RecordingInfo programmatically. The user is not allowed to do much with these but he/she can change the RecordingName subject to the name being 2 characters or more AND that the RecordingName must be unique. I.e. no changing it to match another RecordingName. I have taken care of the first requirement. It's the second one that is giving me grief.
For my ViewModel, I have
public class RecordingListViewModel : ViewModelBase//, IDataErrorInfo
{
private ObservableCollection<RecordingInfo> _recordings = null;
public RecordingListViewModel()
{
}
public ObservableCollection<RecordingInfo> Recordings
{
get
{
return _recordings;
}
}
// more stuff left off for brevity
In my view I bind the collection to a DataGrid and have:
<DataGrid ItemsSource="{Binding Path=Recordings}" AutoGenerateColumns="False" >
<DataGrid.Columns>
<DataGridTextColumn Header="Recording" IsReadOnly="False" EditingElementStyle="{StaticResource CellEditStyle}" ElementStyle="{StaticResource CellNonEditStyle}" Binding="{Binding RecordingName, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" >
</DataGridTextColumn>
...
</DataGrid.Columns>
My way of checking for 2 or more characters works great. But this doesn't work for checking that the user is not trying to give a recording an existing name. Presumably, I need to somehow handle this at the ViewModel layer since the ViewModel knows about all Recordings. I tried playing with having my ViewModel derive from IDataErrorInfo but the property indexer never gets called, which makes sense as it's the Observable collection and therefore the individual RecordingInfos that are bound. I also thought about doing something with a "Lost Focus" event, but DataGridTextColumn doesn't seem to have that. I would think this is a somewhat common problem: validation must take into account relationships between the items of the collection.
By the way, I'm not wedded to the IDataErrorInfo and I am not opposed to other changes in architecture. Please let me know if I can provide more details. I have tried to provide a minimal amount of code. Clearly, this is part of a much bigger project. Any advice is appreciated.
Thanks,
Dave
I would do the following
1) Make RecordingInfo implement INotifyPropertyChanged
2) Use a BindingList<> instead of ObservableCollection<>
In your viewmodel, subscribe to the BindingList.ListChanged Event. This event will fire when items are added and removed, but also when the top level properties on RecordingInfo changes. In the case of a property being changed, the ListChangedEventArgs.PropertyDescriptor property will contain the name of the property, if you want to run validation for just that property (be careful though, this can be null when the item as added/removed). You'll need to use the ListChangedType property to determine the reason of the event (E.x.: Reset means everything changed, ItemAdded means the item was added, but the ItemChanged means a property changed as occurred on an existing item.
You can have the parent ViewModel (that contains and creates your RecordingInfos) pass a name validation Func in their constructors for them to call when validating their name changes.
I am using MvvmCross, but this may be general command binding.
When user click a button, the application require an extra input data before proceed to what I want to do in the actual command. The problem that I cannot call an UI action in middle of ViewModel, so just binding MvxCommand (or any ICommand) would not work.
One may ask why:
1) I don't put an input on the UI and user can enter data before click button -> I don't have space.
2) Make default data, and let user change it later -> This my first though, but user tend to forget to change it later!!
So can someone come up with a solution? The only thing I can think of is forgetting command binding, and have code behind pop the ui for extra data, then call a method in view model!
Thanks
There are several ways to do this.
My personal preferred way is to use an "Interaction Request" - something that I learnt from the Prism framework from Microsoft patterns and practices.
In Mvx, you can do this using an IMvxInteraction property on your ViewModel. An example of this is shown in https://github.com/slodge/BindingTalk/blob/master/BindingTalk.Core/ViewModels/QuestionViewModel.cs
Each time an interaction is requested, the ViewModel provides an object to the View - in this case a YesNoQuestion:
public class YesNoQuestion
{
public Action YesAction { get; set; }
public Action NoAction { get; set; }
public string QuestionText { get; set; }
public YesNoQuestion()
{
YesAction = () => { };
NoAction = () => { };
}
}
The ViewModel exposes the requester using an IMvxInteraction<TQuestion> property:
public class QuestionViewModel
: MvxViewModel
{
private MvxInteraction<YesNoQuestion> _confirm = new MvxInteraction<YesNoQuestion>();
public IMvxInteraction<YesNoQuestion> Confirm
{
get { return _confirm; }
}
public IMvxCommand GoCommand
{
get
{
return new MvxCommand(() =>
{
var question = new YesNoQuestion()
{
QuestionText = "Close me now?",
YesAction = () => Close(this),
};
_confirm.Raise(question);
});
}
}
}
The view on each platform can then bind and subscribe to the interaction request property. This is a little fiddly - because it uses weak references to prevent memory leaks - especially on iOS, but also possible on other platforms too.
Some example Droid code for this is in:
https://github.com/slodge/BindingTalk/blob/master/BindingTalk.Droid/Views/2%20%20More%20Controls/QuestionView.cs
with AXML in https://github.com/slodge/BindingTalk/blob/master/BindingTalk.Droid/Resources/Layout/QuestionView.axml
Sorry for the confusing ConfirmationView and QuestionView names here - the first is an Android View, the second is an Mvvm View and an Android Activity.
Also, please note that when implementing Dialogs in Android, then you need to be careful about screen rotation - as Android's Activity lifecycle can very much confuse things here - easiest mecahnism (I find) is to just handle screen rotation yourself rather than allowing Android to handle it.
say I have a textBlock control and I want to pass it to a class which controls the textBlock to display certain Message.
1) When I call a method in the class, I want textBlock to show message. Example " Checking connection...."
2) When the method complete the required task, the textBlock visibility become collapsed.
In the XAML : I have
a) textBlock name=textBlockMsg
b) a Button to call the class
Appreciate your help.
-- Update :
This class file inside project
public class GeoCalculation
{
public GeoCalculation() { }
public void CalculateDistance()
{
//- Begin -- want the textBlockMsg show : in progress......
--code
//-- when end-----, textBlockMsg visibility becom collapse
}
}
If you named you TextBox in the XAML with textBlockMsg, this will work
Edit
// I will not implement the whole INotifyPropertyChanged check how to do to it : implement
public class CalculationClass : INotifyPropertyChanged
{
public void CalculateDistance()
{
TextToBeBound = "in progress..."
--code
VisibilityToBeBound = Collapsed;
}
public string TextToBeBound
{ //... insert the implement of this property + NotifyPropertyChanged
get {...}
set {...}
}
public Visibility VisibilityToBeBound
{ //... insert the implement of this property + NotifyPropertyChanged
get {...}
set {...}
}
}
Then in the XAML add this :
<TextBlock x:Name="txtBlocMsg" Visibility={"Binding VisibilityToBeBound"} Text={Binding TextToBeBound"}/>
Don't forget to set the DataContext of the UI to your class (in my case CalculationClass
You should be good to go. If all this was new. I recommend you read about data Binding + MVVM pattern.
Edit
It's bad practice to pass UI element to model/business classes. You should use the MVVM pattern.
Hope this helps.
You can have a parameter to pass the TextBock:
public void CalculateDistance(TextBlock tb)
{
tb.Text = "in progress..."
--code
tb.Visibility = Visibility.Collapsed;
}
You coud use a the constructor of your class to inject the textblock it should handle
public class GeoCalculation
{
private TextBlock _tb;
public GeoCalculation(TextBlock tb)
{
_tb = tb;
}
public void CalculateDistance()
{
_tb.Text = "in progress..."
//code
_tb.Visibility = Visibility.Collapsed;
}
}
A ViewModel and using DataBinding would be better by the way!
There you could use our class (method) to provice the text for the ui (textbox)
But be aware:
There is a .net way to do this. The GeoCoordinate class contains a method "GetDistanceTo" to calculate the distance between two geo points. See http://msdn.microsoft.com/en-us/library/system.device.location.geocoordinate.getdistanceto.aspx .
Hey there! I'm relatively new to both GWT and java programming (or OOP for that matter), so apologies for the beginner questions/mistakes in advance. I've been trying to create some kind of observer pattern, but the development mode console keeps dropping error messages and sadly, they're far from helpful.
So here's what I'm trying to achieve:
- I've got the model that consists of the class Country, and stores a value called Influence.
- The view is the class called CountryDisplay. It's a GWT widget that should always display the current influence of a given country.
public class Country {
private int influece;
private CountryDisplay display;
public Country() {
influence = 0;
}
public void setDisplay(CountryDisplay display) //...
public int getInfluence() //...
public void setInfluence(int value) {
influence = value;
display.update();
}
}
public class CountryDisplay {
private Country country;
public CountryDisplay (Country country) {
//GWT widget creating stuff
this.country = country;
}
public void update() {
//InfluenceCounter is a simple Label
InfluenceCounter.setText(Integer.toString(country.getInfluence()));
}
}
Then in the EntryPoint class I do something like this:
Country italy = new Country();
CountryDisplay italyDisplay = new CountryDisplay(italy);
italy.setDisplay(italyDisplay);
RootPanel.get("nameFieldContainer").add(italyDisplay);
italy.setInfluence(3);
The development console indicated that it had a problem with the line "display.update();" in class Country. My first guess was that the problem was that the display was not initiated, so I created an interface for it, and in the Country constructor I created an empty, new display, that would later be overwritten.
public Country() {
influence = 0;
display = new DisplayInterface() {
public void update() {}
}
}
But I had no luck this way either. I guess this kind of cross-referencing is not allowed? I mean that the view has the model as a variable and vice versa.
When calling a method on the view individually (like:
italy.setInfluence(3);
italyDisplay.displayTheCurrentValue();
) it works, so the problem is definitely in the observer logic.
If I understand correctly, your are trying to "bind" user interface elements (your view class CountryDisplay) to data (the model class Country). "Bind" in the sense that if you change the model data (for example, call italy.setInfluence(10)) then the view would automatically update itself to reflect the change. And if your view provided an editor, you want the "binding" also to work in the other direction.
There are several frameworks out there that achieve this, see for example the post Best data binding solution for GWT. I have used GWT Pectin and there is the GWT Editors framework (which I have not yet used myself as it is relatively new).
Looking at your code, I feel you might want to more clearly separate the model from the view: your model class (Country) should not know about the view class, that is, it should not store a reference to CountryDisplay.