Страница содержимого Xamarin Forms делает цвет фона прозрачным

У меня есть требование, когда мне нужно отображать список на модальной всплывающей странице. Я могу отобразить список, но я не могу сделать цвет фона прозрачным или полупрозрачным, чтобы страница под ним была частично видна.

Я выталкиваю страницу из своей модели представления, используя следующее:

NavigationParameters oNavParams = new NavigationParameters();
oNavParams.Add("Mode", "FeedBack");
oNavParams.Add("selectedItem", txtFeedback);
_navigationService.NavigateAsync("PopupBox", oNavParams);

Вот мой код xaml:

<?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>

Вот мой код:

  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)
            {

            }
            }

Вот результат:  введите описание изображения здесь

Я также пробовал установить следующее:

  this.BackgroundColor= new Color(0, 0, 0, 0.4);

Но это не работает. Есть ли способ добиться этого? Использование пользовательских средств визуализации или любой другой обходной путь для отображения модального окна. Я не хочу использовать Rg.Plugins.Popup, так как у меня с ним были проблемы, поэтому я искал альтернативу. Пожалуйста, помогите.


person Debasish    schedule 04.09.2018    source источник


Ответы (4)


Это не будет работать без настраиваемых средств визуализации. Распространенный способ добиться желаемого сегодня - просто использовать подключаемый модуль Popup Page для Xamarin Forms (https://github.com/rotorgames/Rg.Plugins.Popup) nuget Rg.Plugins.Popup доступно.

person Nick Kovalsky    schedule 04.09.2018
comment
У меня были проблемы с Rg.Plugins.Popup. Я уже обращался за помощью (github .com / rotorgames / Rg.Plugins.Popup / issues / 364). Не могли бы вы посоветовать мне, как я могу использовать пользовательские рендереры? - person Debasish; 04.09.2018
comment
Спасибо за ответ, я попробую - person Debasish; 04.09.2018
comment
Я описал способ создания пользовательских всплывающих окон (включая прозрачный фон) здесь: stackoverflow.com/questions/44709571/ - person Markus Michel; 04.09.2018
comment
Рекомендации just copy рендерерам из существующей библиотеки, скорее всего, не лучший совет. - person EvZ; 04.09.2018
comment
У меня работает Rg.Popup.Plugin. Проверьте эту ссылку здесь (github.com /rotorgames/Rg.Plugins.Popup/issues/364) - person Debasish; 05.09.2018

В соответствии с комментарием @nicks, пожалуйста, внесите изменения в свой код, я добавлю несколько примеров кода, которые могут вам помочь .Rg.Plugins.Popup используйте этот плагин и удалите ContentPage, добавьте этот.

<?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 файл

using Rg.Plugins.Popup.Extensions;
using Rg.Plugins.Popup.Pages;

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class className : PopupPage
{

}

Итак, после последнего вызова вышеуказанного класса в виде всплывающего окна при нажатии кнопки и т. Д., Ниже приведен код

using Rg.Plugins.Popup.Extensions;
{
ClassName _className = new ClassName();
void Button1Click(object sender, System.EventArgs e)
  {
    Navigation.PushPopupAsync(_className);
   }
}

Надеюсь, что это поможет вам!!!!

person Pritish    schedule 04.09.2018
comment
Вы можете уточнить свой ответ? Я думаю, он пытается сделать фон страницы содержимого прозрачным, чтобы ListView выглядел как всплывающее окно! - person Nirmal Subedi; 05.09.2018
comment
@NirmalSubedi из-за недостатка сна я разместил неправильный пост, извините за неудобства. Теперь правильный ответ опубликован. - person Pritish; 05.09.2018

Как упоминалось ранее, вы можете использовать Rg.Plugins.Popup, а затем просто установить фон таким же прозрачным, как на изображении (чтобы он не был просто непрозрачным).

Пример моей всплывающей страницы:

Пример моей всплывающей страницы

И по щелчку:

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);
            });
          };
        });
person Rander Leal    schedule 29.04.2020

Если вы обновитесь до Xamarin Forms 4.6, вы можете установить:

<?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>

и это работает. Запрос на включение: https://github.com/xamarin/Xamarin.Forms/pull/8551

person Saftpresse99    schedule 08.05.2020