How to access elements of datatemplate from code?

Hi,

I'm using SfPopup as follows:

            IsOpen="{Binding IsOpen}"
AppearanceMode="OneButton"
ShowHeader="False"
ShowFooter="True"
AcceptButtonText="CAPITO"
Message="Errore generico"


x:Name="popupMsgErrore" >


















Margin="8"
WidthRequest="70"
Grid.Row="0"
Source="icona_triangolo_rosso.svg" />


Text="Error"
TextColor="Red"
FontSize="24"
FontAttributes="Bold"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Grid.Row="1" />


Text="Something has gone wong"
x:Name="lbl_MessaggioErrore"
FontSize="16"
FontAttributes="None"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Grid.Row="2" />









How can I change the Text property of the Label with id "lbl_MessaggioErrore" from myPage.xaml.cs code?

I also tried with Message property of the popup but I can't understand how to display it in the label.


3 Replies

DV Diwakar Venkatesan Syncfusion Team July 18, 2023 01:52 PM UTC

Hi Timothy, 

 

We have analyzed your query, you can utilize the Binding Concept by binding a property from the ViewModel and updating it accordingly. Please refer to the code snippet below, 


<popup:SfPopup.ContentTemplate>

    <DataTemplate>

        <StackLayout x:Name="MainStack"

                     Spacing="10">

            <Button Text="change text"

                    Clicked="Button_Clicked_1" />

            <Label Text="{Binding MyLabel}"

                   x:Name="id"

                   BackgroundColor="SkyBlue"

                   VerticalTextAlignment="Center"

                   HorizontalTextAlignment="Center" />

        </StackLayout>

    </DataTemplate>

</popup:SfPopup.ContentTemplate>


C#

private void Button_Clicked_1(object sender, EventArgs e)
{
      var vm = this.sfpopup.BindingContext as ViewModel;
      vm.MyLabel = "Changed";

}


Regards,

Diwakar V



TF Timothy Franceschi replied to Diwakar Venkatesan July 18, 2023 03:15 PM UTC

Hi, thanks for your reply.

I replicated your code but I get the following error:

Error CS0246 The type or namespace name 'ViewModel' was not found. Probably missing a using directive or assembly reference.

This is my code in PopupErrore.xaml.cs:

using Serilog;
using Syncfusion.Maui.Popup;


namespace IgloGestorePresenze.Includes;


public partial class PopupErrore : ContentView
{
public static readonly BindableProperty PropertyIsOpen =
BindableProperty.Create(nameof(IsOpen), typeof(bool), typeof(PopupErrore), false);


public static readonly BindableProperty PropertyErrorMessage =
BindableProperty.Create(nameof(ErrorMessage), typeof(string), typeof(PopupErrore), "Nessun errore, non dovresti vedere questo");
public bool IsOpen
{
        get => (bool)GetValue(PropertyIsOpen);
        set => SetValue(PropertyIsOpen, value);
    }


public string ErrorMessage
{
        get => (string)GetValue(PropertyErrorMessage);
        set => SetValue(PropertyErrorMessage, value);
    }


public PopupErrore()
{
InitializeComponent();


popupMsgErrore.BindingContext = this;
popupMsgErrore.SetBinding(SfPopup.IsOpenProperty, nameof(IsOpen));


var vm = this.popupMsgErrore.BindingContext as ViewModel;
vm.LblMsgErrore = ErrorMessage;


Log.Verbose($"Creato popup messaggio errore, visibile: {IsOpen}");
}
}

And this is my xaml in PopupErrore.xaml:

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup"
             x:Class="IgloGestorePresenze.Includes.PopupErrore">
    <Grid>


        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>


        <syncfusion:SfPopup
            Grid.Row="0"
            IsOpen="{Binding IsOpen}"
            AppearanceMode="OneButton"
            ShowHeader="False"
            ShowFooter="True"
            AcceptButtonText="CAPITO"
            Message="Errore generico"


            x:Name="popupMsgErrore" >


            <syncfusion:SfPopup.ContentTemplate>


                <DataTemplate x:Name="dataTemplate">


                    <Grid>


                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>


                        <Image
                                Margin="8"
                                WidthRequest="70"
                                Grid.Row="0"
                                Source="icona_triangolo_rosso.svg" />


                        <Label
                                Text="Errore"
                                TextColor="Red"
                                FontSize="24"
                                FontAttributes="Bold"
                                HorizontalOptions="Center"
                                HorizontalTextAlignment="Center"
                                Grid.Row="1" />


                        <Label
                                Text="{Binding LabelMsgError}"
                                x:Name="lbl_MessaggioErrore"
                                FontSize="16"
                                FontAttributes="None"
                                HorizontalOptions="Center"
                                HorizontalTextAlignment="Center"
                                Grid.Row="2" />


                    </Grid>


                </DataTemplate>
            </syncfusion:SfPopup.ContentTemplate>


        </syncfusion:SfPopup>


    </Grid>
</ContentView>

Attachment: PopupErrore.xaml_3634835f.zip


DV Diwakar Venkatesan Syncfusion Team July 19, 2023 10:48 AM UTC

Timothy, 

 

We would like to inform you that the mentioned ViewModel is a custom class that was created. The ViewModel is a class in which we create a property and bind it to the content page. Below, we have recreated a sample using the provided code snippet and attached it for your reference. Please refer to the sample for further understanding.


Attachment: MauiPopup_10c56b0b.zip

Loader.
Up arrow icon