Location of popup - cause problem

0 Answers 628 Views
Popup
Daniel
Top achievements
Rank 1
Silver
Bronze
Daniel asked on 10 Mar 2022, 02:40 PM | edited on 10 Mar 2022, 03:03 PM

Hi,

When I run this login page without popup is OK.

But When I add it to the content page he throw exception in runtime , why ?

System.NullReferenceException: 'Object reference not set to an instance of an object.'
Thanks,
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AutomationClient.MAUI.LoginPage"
             xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.Maui.Controls.Compatibility"
             xmlns:telerik="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls"
             xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.Maui.Controls.Compatibility" 
              xmlns:telerikMauiControls="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls">
    <Grid>
      
        <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="110"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="450"/>
            <RowDefinition Height="130"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="350"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Image  Grid.Row="0" Grid.RowSpan="4" Grid.ColumnSpan="3" Source="loginbackground.png" Aspect="Fill"/>
        <Image  Grid.Row="0" Grid.RowSpan="4" Source="gslogo.png" WidthRequest="250" HeightRequest="110"/>
   
        <telerik:RadBorder Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" BorderColor="AliceBlue" BorderThickness="2"  HorizontalOptions="Center" VerticalOptions="Center" CornerRadius="15, 5, 15, 5">
            <Grid BackgroundColor="White" RowSpacing="25" RowDefinitions="Auto,Auto,Auto,Auto,Auto, Auto,Auto,Auto,Auto">
                <Label  Grid.Row="0" Grid.Column ="0"  Text="Automation Client"  FontSize="Large" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
                <Label Grid.Row="1" Grid.Column ="0"  Text="Login"  FontSize="Title" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                <Entry Grid.Row="2" Grid.Column ="0" x:Name="txtName" Placeholder="User Name" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" WidthRequest="200" />
                <Entry Grid.Row="3" Grid.Column ="0"   x:Name="txtPassword" Placeholder="Password"  HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" WidthRequest="200" IsPassword="True"  />
                <telerik:RadButton Grid.Row="4" Grid.Column ="0" Text="Login" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Clicked="OnLoginClicked"/>
                
                 <telerikPrimitives:RadBusyIndicator Grid.Row="7" Grid.Column ="0" x:Name="busyIndicator" IsVisible="false"
                                  AnimationContentHeightRequest="100"
                                  AnimationContentWidthRequest="100"
                                  AnimationContentColor="{DynamicResource PrimaryColor}"
                                                    IsBusy="false">
                    <telerikPrimitives:RadBusyIndicator.Content>
                        <Label Text="Loading..." TextColor="Black" />
                    </telerikPrimitives:RadBusyIndicator.Content>
                </telerikPrimitives:RadBusyIndicator>
            </Grid>
        </telerik:RadBorder>
        <Image  Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Margin="0,0,0,10" Opacity="0.7" Source="wave.png" Aspect="Fill"/>
        </Grid>

        <telerikPrimitives:RadPopup.Popup Margin="10" Grid.Row="1" >
            <telerikPrimitives:RadPopup x:Name="popupError"
                                  IsModal="True"
                                  OutsideBackgroundColor="#6F000000"
                                            Placement='Center'>
                <telerikMauiControls:RadBorder CornerRadius="8"
                                         BackgroundColor="{DynamicResource PrimaryColor}">
                    <telerikMauiControls:RadScrollView >
                        <Grid Padding="20"
                                WidthRequest="200"
                                HeightRequest="170">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="40" />
                                <RowDefinition Height="70" />
                            </Grid.RowDefinitions>
                            <Button Grid.Row="0"
                                    Padding="2"
                                   HorizontalOptions="End"
                                   Text="X"
                                   Clicked="OnClosePopup" 
                                  BackgroundColor="{DynamicResource PrimaryColor}" TextColor="White" />
                            <Label x:Name="labelError" Grid.Row="1" Text="" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                        </Grid>
                    </telerikMauiControls:RadScrollView>
                </telerikMauiControls:RadBorder>
            </telerikPrimitives:RadPopup>
        </telerikPrimitives:RadPopup.Popup>

    </Grid>
  
</ContentPage>


Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 14 Mar 2022, 02:00 PM

When I add it inside login button also cause same exception.
Lance | Senior Manager Technical Support
Telerik team
commented on 16 Mar 2022, 04:46 PM

I don't see anything wrong with the Telerik code itself.

The most common reason for a NullReferenceException (NRE) is using something that doesn't exist. Maybe it is the PrimaryColor resource?

Unfortunately, because .NET MAUI is still in preview, the NullReferenceExceptions don't really show much detail. So you will need to manually go through it piece by piece.

I recommend removing everything and slowing adding back in each separate parts until it causes the exception again. Then you  will know what is missing.

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 16 Mar 2022, 05:57 PM

does pop can be statvstand alone or it must be within a button ?
Lance | Senior Manager Technical Support
Telerik team
commented on 16 Mar 2022, 06:31 PM

It can be used with any parent element. Where you have it now, on the root Grid, is completely fine (we only use a Button in the documentation to keep the example simple). There is something else wrong with the code, which is why you see the same exception when you try to use it in a Button

This is why I recommend whittling down the XAML to the most basic implementation. Take out any data bindings, child elements and StaticResource settings so that it works. Then slowly re-add the things you took out until it breaks again... that will tell you exactly why it's not working.

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 17 Mar 2022, 08:45 AM

I remove all xaml code and stay with this code:

The code build but not run ?
        <telerik:RadButton Grid.Row="4" Grid.Column ="0" Text="Login" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Clicked="OnLoginClicked">
                        <telerikPrimitives:RadPopup.Popup Margin="10">
                            <telerikPrimitives:RadPopup x:Name="popupError" IsOpen="False"
                                  IsModal="True"
                                  OutsideBackgroundColor="#6F000000"
                                            Placement='Center'>
                                <telerikMauiControls:RadBorder CornerRadius="8"
                                         BackgroundColor="#03446a">

                                    <Grid Padding="20"
                                WidthRequest="200"
                                HeightRequest="170">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="40" />
                                            <RowDefinition Height="70" />
                                        </Grid.RowDefinitions>
                                        <Button Grid.Row="0"
                                    Padding="2"
                                   HorizontalOptions="End"
                                   Text="X"
                                   Clicked="OnClosePopup" 
                                  BackgroundColor="#03446a" TextColor="White" />
                                        <Label x:Name="labelError" Grid.Row="1" Text="" TextColor="White"/>
                                    </Grid>
                                </telerikMauiControls:RadBorder>
                            </telerikPrimitives:RadPopup>
                        </telerikPrimitives:RadPopup.Popup>
                    </telerik:RadButton>
           

Lance | Senior Manager Technical Support
Telerik team
commented on 17 Mar 2022, 01:25 PM

You should make it even simpler to find out where the issue is:

 <telerik:RadButton Text="Login" HorizontalOptions="Center" VerticalOptions="Center" Clicked="OnLoginClicked">
                        <telerikPrimitives:RadPopup.Popup Margin="10">
                            <telerikPrimitives:RadPopup x:Name="popupError" IsOpen="False"
                                                                          IsModal="True"
                                                                         OutsideBackgroundColor="#6F000000"
                                                                         Placement='Center'>
                                    <Label Text="Test" />
                            </telerikPrimitives:RadPopup>
                        </telerikPrimitives:RadPopup.Popup>
                    </telerik:RadButton>

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 17 Mar 2022, 02:01 PM

I add only this code and the app is not running.

Lance | Senior Manager Technical Support
Telerik team
commented on 17 Mar 2022, 02:39 PM

I don't see anything wrong in that output, the app is showing as successfully built and successfully deployed.

the problem is you've added a Margin to something that is not a UI element:

 

If you want a Margin on the RadPopup, you need to put it on the RadPopup object

 <telerikPrimitives:RadPopup.Popup>
      <telerikPrimitives:RadPopup  Margin="10"...>

 

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 20 Mar 2022, 09:23 AM

I removed the margin at all still compiled but not runnable,


   <telerikPrimitives:RadPopup.Popup >
            <telerikPrimitives:RadPopup x:Name="popupError" IsOpen="False"
                                  IsModal="True" 
                                  OutsideBackgroundColor="#6F000000"
                                            Placement='Center' >
                <telerikMauiControls:RadBorder CornerRadius="8"
                                         BackgroundColor="#03446a">

                    <Grid Padding="20"
                                WidthRequest="200"
                                HeightRequest="170">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="40" />
                            <RowDefinition Height="70" />
                        </Grid.RowDefinitions>
                        <Button Grid.Row="0"
                                    Padding="2"
                                   HorizontalOptions="End"
                                   Text="X"
                                   Clicked="OnClosePopup" 
                                  BackgroundColor="#03446a" TextColor="White" />
                        <Label x:Name="labelError" Grid.Row="1" Text="" TextColor="White"/>
                    </Grid>
                </telerikMauiControls:RadBorder>
            </telerikPrimitives:RadPopup>
        </telerikPrimitives:RadPopup.Popup>

    </Grid>

</ContentPage>


Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 20 Mar 2022, 09:49 AM

I add demo that is not working.
Lance | Senior Manager Technical Support
Telerik team
commented on 21 Mar 2022, 09:11 PM

Thank you for the reproducible. I have escalated the issue to the developers.

In the meantime, you can achieve the same thing without using a RadPopup. You can use any other element, like a Grid, and bind to the IsVisible property. I've attached a new approach that you can use to move forward (since I can't say how long it will take for the issue to be resolved).

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 29 Mar 2022, 08:15 AM

In version Telerik 6 - the popup is not running in this scenario.

I attached demo.

 

Lance | Senior Manager Technical Support
Telerik team
commented on 29 Mar 2022, 01:00 PM

Correct, there is no change in the RadPopup status. I will let you know when this works. We need to wait for fixes from Microsoft before this will work again.

It is possible that the fixes wont be in the next release or not even until .NET MAUI 1.0 has reached General Availability. So I recommend following the instructions in my prior response if you really need a transient UI during the preview period.

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 26 Apr 2022, 04:25 AM

In version Telerik 7 - the popup fixed-:)

No answers yet. Maybe you can help?

Tags
Popup
Asked by
Daniel
Top achievements
Rank 1
Silver
Bronze
Share this question
or