Leveraging MVVM frameworks in conjunction w/ SyncFusion

[John Livermore]

Hi, we are using the lightweight FreshMVVM framework in our Xamarin app.  I am playing with the SfPopup control, and see you must open it with the .Show0 method.  However, in a MVVM framwork, the view model is loosely coupled to the underlying View, so the controls (by name) are not available.  How can the Show() method be invoked on your control through a property setting in the ViewModel?  

So the property might be...

public bool ShowDialog{get;set;}

And when it's time to show the dialog, the model just sets ShowDialog to 'true', and the dialog appears (thusly invoking the Show() method)?

And, it's an antipattern to locate the control in the view model to call Show(), so any solution that includes something like that isn't workable for us.

How can we use a MVVM framework with your popup, and more generally for all your controls?

[Subburaj Pandian Veluchamy]

Hi John, 

  

Thank you for contacting Syncfusion support. 

  

We have checked your requirement of displaying the popup using a Boolean and you can set SfPopupLayout.IsOpen as true to display the popup view. Based on your requirement we have prepared a sample in FreshMvvm to display the popup view from the model page using the SfPopupLayout.IsOpen property. 

 
Please refer the following code, 

 

  

//// Model code: 

public class FirstPageModel : FreshBasePageModel 

{                             

  

               public Command<SfPopupLayout> OpenAlertDialog { get; set; } 

  

               public FirstPageModel() 

    { 

                              this.OpenAlertDialog = new Command<SfPopupLayout>(this.DisplayAlert); 

               } 

  

               private void DisplayAlert(SfPopupLayout popupLayout) 

               {                             

                              popupLayout.IsOpen = true;                                      

               } 

} 

  

//// Xaml code: 

<ContentPage.Resources> 

        <ResourceDictionary> 

            <popuplayout:SfPopupLayout x:Key="AlertDialog"> 

                <popuplayout:SfPopupLayout.PopupView> 

                    <popuplayout:PopupView ShowHeader="False" 

                                           AcceptButtonText="DISCARD" 

                                           DeclineButtonText="CANCEL" 

                                           AppearanceMode="TwoButton" 

                                           HeightRequest="120" > 

                        <popuplayout:PopupView.ContentTemplate> 

                            <DataTemplate> 

                                <Grid BackgroundColor="White" Padding="15,20,0,0"> 

                                    <Label FontSize="16"  BackgroundColor="White" TextColor="Gray" Text="Discard draft?"/> 

                                </Grid> 

                            </DataTemplate> 

                        </popuplayout:PopupView.ContentTemplate> 

                    </popuplayout:PopupView> 

                </popuplayout:SfPopupLayout.PopupView> 

            </popuplayout:SfPopupLayout> 

        </ResourceDictionary> 

    </ContentPage.Resources> 

    

    <ContentPage.Content> 

        <ScrollView x:Name="parentLayout"> 

            <StackLayout Orientation="Vertical" Spacing="20" Padding="20" > 

                <Button x:Name="Alert"                         

                        Text="ALERT" 

                        CornerRadius="5" 

                        BackgroundColor="#0059ff"          

                        TextColor="White" 

                        HeightRequest="40" 

                        Command="{Binding OpenAlertDialog}" 

                        CommandParameter="{StaticResource AlertDialog}" /> 

            </StackLayout> 

        </ScrollView> 

    </ContentPage.Content> 

  

  

We have attached the sample for your reference, 

 

SampleLink: https://www.syncfusion.com/downloads/support/directtrac/general/ze/FreshMvvmTabIcon1094672839 

  

Regards,
Subburaj Pandian V