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.'
<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>
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.
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.
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>
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>
I add only this code and the app is not running.
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"...>
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>
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).
In version Telerik 6 - the popup is not running in this scenario.
I attached demo.
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.