Xamarin Forms内容页面使背景色透明

时间:2018-09-04 05:52:16

标签: xamarin.forms custom-renderer modalpopup

我有一个要求,我需要在模式弹出窗口中显示一个列表。我能够显示一个列表,但是我不能使背景色透明或半透明,因此它下面的页面是部分可见的。< / p>

我正在使用以下方法从视图模型中推送页面:

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

            }
            }

以下是输出: enter image description here

我也尝试设置以下内容:

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

但是它不起作用。有什么方法可以实现?使用自定义渲染器或任何其他解决方法来显示模式。 我不希望使用Rg.Plugins.Popup,因为我遇到了问题。因此,我正在寻找替代方案。请帮忙。

3 个答案:

答案 0 :(得分:3)

如果没有自定义渲染器,则无法使用。 获得今天所需的一种常见方法是简单地使用Xamarin表单(https://github.com/rotorgames/Rg.Plugins.Popup)nuget Rg.Plugins.Popup弹出页面插件。

答案 1 :(得分:0)

根据@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);
   }
}

希望这对您有帮助!!!!

答案 2 :(得分:0)

如前所述,您可以使用Rg.Plugins.Popup,然后将背景设置为与图像中一样透明(这样它就不仅仅是不透明的了)。

我的弹出页面示例:

Example of my popup page

然后单击:

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);
            });
          };
        });