问题
I have a requirement where in I need to display a list in a modal popup page.I am able to display a list but I cant make the background color transparent or semi transparent so that the page under it is partially visible.
I am pushing the page from my View Model using the folowing:
NavigationParameters oNavParams = new NavigationParameters();
oNavParams.Add("Mode", "FeedBack");
oNavParams.Add("selectedItem", txtFeedback);
_navigationService.NavigateAsync("PopupBox", oNavParams);
Here is my xaml code:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
xmlns:local="clr-namespace:MyApp"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="MyApp.Views.PopupBox">
<ContentPage.Content>
<AbsoluteLayout Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<ContentView x:Name="popupListView" BackgroundColor="Transparent" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<StackLayout Orientation="Vertical" HeightRequest="200" WidthRequest="300" BackgroundColor="White">
<ListView x:Name="sampleList">
</ListView>
</StackLayout>
</StackLayout>
</ContentView>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
Here is my code behind:
public PopupBox()
{
try
{
InitializeComponent();
NavigationPage.SetHasNavigationBar(this, false);
sampleList.ItemsSource = new List<string>
{
"Test ListView",
"Test ListView",
"Test ListView",
"Test ListView",
"Test ListView",
"Test ListView",
"Test ListView",
"Test ListView",
"Test ListView",
"Test ListView",
"Test ListView"
};
popupListView.IsVisible = true;
}
catch (Exception ex)
{
}
}
Here is the output:
I have also tried setting the following:
this.BackgroundColor= new Color(0, 0, 0, 0.4);
But it does not work.Is there any way I can achieve this?Using custom renderers or any other workaround to display a modal. I don't wan't to use the Rg.Plugins.Popup as I had issues with it.So I was looking for an alternative.Please help.
回答1:
This will not work without custom renderers.
A common way of obtaining the desired today is simply using Popup Page Plugin for Xamarin Forms (https://github.com/rotorgames/Rg.Plugins.Popup) nuget Rg.Plugins.Popup
available.
回答2:
As per @nicks comment please make changes into your code I will add few sample line of code that may help you.Rg.Plugins.Popup
use this plugin and remove ContentPage add this one.
<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup">
<ListView x:Name="lst" BackgroundColor="Gray" HasUnevenRows="True" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid HorizontalOptions="FillAndExpand" Padding="10" BackgroundColor="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding DisplayName}" HorizontalOptions="StartAndExpand" Grid.Row="0" Grid.Column="0" FontAttributes="Bold"/>
<Label Text="{Binding DisplayContact}" HorizontalOptions="EndAndExpand" Grid.Row="0" Grid.Column="1" FontSize="11"/>
<Label Text="{Binding DisplayAddress}" VerticalOptions="StartAndExpand" Grid.Row="1" Grid.Column="0" FontSize="11"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</pages:PopupPage>
.cs file
using Rg.Plugins.Popup.Extensions;
using Rg.Plugins.Popup.Pages;
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class className : PopupPage
{
}
So after last invoking above class as a popup from a button click etc. so below is code
using Rg.Plugins.Popup.Extensions;
{
ClassName _className = new ClassName();
void Button1Click(object sender, System.EventArgs e)
{
Navigation.PushPopupAsync(_className);
}
}
Hope this will help you!!!!
回答3:
As previously mentioned, you can use Rg.Plugins.Popup, and then just set the background as transparent as in the image (so that it is not just opaque).
Example of my popup page:
And on click:
Device.BeginInvokeOnMainThread(async () =>
{
Task<yourPopUpPage> task = Task.Run(() =>
{
return new yourPopUpPage();
});
task.Wait();
if (task.Status == TaskStatus.RanToCompletion)
{
Device.BeginInvokeOnMainThread(async () =>
{
await App.GetCurrentPage().Navigation.PushPopupAsync(task.Result);
});
};
});
回答4:
If you update to Xamarin Forms 4.6 you can set:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
...
BackgroundColor="Transparent"
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.ModalPresentationStyle="OverFullScreen">
<StackLayout HorizontalOptions="FillAndExpand"
</StackLayout>
</ContentPage>
and it works. Pull Request: https://github.com/xamarin/Xamarin.Forms/pull/8551
来源:https://stackoverflow.com/questions/52159573/xamarin-forms-content-page-make-background-color-transparent