How to bind Content.TranslationX and Y of сontainer gestures through XAML to properties of ViewModel?

Question

Sorry for my english, i write english little. I develop pet-project making interactive scheme-APP. In that project i have many imagebuttons on one image (which is map) and in this case i must make container of gestures for pinch and pan.

I also have table of my object which lay on map (they are imagebuttons), this table on other Xaml page.

In case of large volume of my app i forced to use MVVM pattern. I want to have able to by pushing on some object in table move to map page and see choosen object by changed coordinates of TranslationX and TranslationY.

It work very well in code-behinde, when i made clicked on my test buttons on left - one, two, three. Theier clicks have some logic code with result giving coordinates to Content.TranslationX and Content.TranslationX of container gestures (i show here just simple test code without logic).

PTZC is name of container.

I have list of examples having properties X and Y - this coordinates giving by logic code of command to properties in ViewModel.

When i binding container's TranslationX and TranslationY to properties of ViewModel app is working not correctly, unlike when coordinates giveng to Content.TranslationX and Content.TranslationY.

Even when i give coordinates in code-behinde in TranslationX and TranslationY it work not correctly same. But in XAML i can find to bind only TranslationX and TranslationY and in ViewModel i can't to summon Content.TranslationX and Content.TranslationY granted. Pleas tell my how i can to find this property in XAML?

Answer 1

Hi Kasrkin212,

Welcome to our Microsoft Q&A platform!

If you want to update xaml after the property of the "Content" changed, you only need to assign a new value to Content.
Here is a simple demo.
xaml:

<ContentPage.BindingContext>  
    <local:MainPageViewModel/>  
</ContentPage.BindingContext>  
  
<StackLayout>  
    <Label Text="{Binding TestSource.Name}"/>  
    <Label Text="{Binding TestSource.Content.TranslationX}"/>  
    <Label Text="{Binding TestSource.Content.TranslationY}"/>  
    <Button Text="Chnage" Command="{Binding Source={RelativeSource AncestorType={x:Type local:MainPageViewModel}}, Path=ChangeCommand}"/>  
</StackLayout>  

xaml.cs:

class MainPageViewModel : INotifyPropertyChanged  
{  
    Test testSource;  
    public Test TestSource  
    {  
        get => testSource;  
        set{  
            testSource = value;  
            OnPropertyChanged("TestSource");  
        }  
    }  
  
    public ICommand ChangeCommand { get; private set; }  
  
    public MainPageViewModel()  
    {  
        TestSource = new Test() { Name = "Test", Content = new ContentClass { TranslationX = 10, TranslationY = 10 } };  
        ChangeCommand = new Command(Change);  
    }  
  
    void Change()  
    {      
        // method I  
        TestSource.Content.TranslationX = 50;  
        OnPropertyChanged("TestSource");  
        // method II  
        Test temp = TestSource;  
        temp.Content.TranslationX = 50;  
        TestSource = temp;  
        // method III  
        TestSource = new Test() { Name = TestSource.Name, Content = new ContentClass { TranslationX = 50, TranslationY = TestSource.Content.TranslationY } };  
    }  
  
    // ...  
}  

Regards,
Kyle

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.