Question

获得：

要求：我在特定条件下向用户显示自定义弹出窗口但我无法使弹出窗口背景变暗，就像显示警报即将到来时它的背景屏幕很暗。请提出任何想法。提前谢谢。

以下是示例代码：

     <Grid>
    <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
      <StackLayout Grid.Row = "0" HorizontalOptions = "FillAndExpand" VeticalOptions = "FillAndExpand">
    <Label Text = "Sample" />   
    <Label Text = "Sample" /> 
    <Label Text = "Sample" /> 
    <Label Text = "Sample" /> 
 </StackLayout>
 <controls:SampleCustomPopup x:Name="DialACallControl" Grid.Row="0" IsVisible="{Binding IsPopUpToShow}" Grid.RowSpan="2"        
          VerticalOptions="CenterAndExpand"/>  
  </Grid>

以下是代码CustomPopup代码：

<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="7">
    <Frame BackgroundColor="White" OutlineColor="#f5f5f5" HasShadow="True">
        <StackLayout>
            <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
                <Image Source="phone.png">
                    <Image.HeightRequest>
                        <OnIdiom x:TypeArguments="x:Double">
                            <OnIdiom.Phone>
                                <OnPlatform x:TypeArguments="x:Double" iOS="25" Android="30" WinPhone="30" />
                            </OnIdiom.Phone>
                            <OnIdiom.Tablet>
                                <OnPlatform x:TypeArguments="x:Double" iOS="35" Android="40" WinPhone="40" />
                            </OnIdiom.Tablet>
                        </OnIdiom>
                    </Image.HeightRequest>
                </Image>
                <Label Text="{Binding PhoneNumber}" VerticalTextAlignment="Center" TextColor="#323232" FontFamily="Avenir Book">
                    <Label.FontSize>
                        <OnIdiom x:TypeArguments ="x:Double" Phone ="15" Tablet ="20"/>
                    </Label.FontSize>
                </Label>
            </StackLayout>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button Text="Call" Grid.Column="0" TextColor="White" BorderRadius="0" HorizontalOptions="FillAndExpand" 
                VerticalOptions="FillAndExpand" BackgroundColor="#f2c646" BorderColor="Black" StyleId="phagspab" >

                    <Button.FontSize>
                        <OnIdiom x:TypeArguments ="x:Double" Phone ="15" Tablet ="20"/>
                    </Button.FontSize>
                    <Button.HeightRequest>
                        <OnIdiom x:TypeArguments="x:Double">
                            <OnIdiom.Phone>
                                <OnPlatform x:TypeArguments="x:Double" iOS="30" Android="40" WinPhone="30" />
                            </OnIdiom.Phone>
                            <OnIdiom.Tablet>
                                <OnPlatform x:TypeArguments="x:Double" iOS="40" Android="50" WinPhone="40" />
                            </OnIdiom.Tablet>
                        </OnIdiom>
                    </Button.HeightRequest>
                </Button>
                <Button Text="Cancel" Grid.Column="1" TextColor="White" BorderRadius="0" HorizontalOptions="FillAndExpand" 
               VerticalOptions="FillAndExpand" BackgroundColor="#323232" BorderColor="Black" StyleId="phagspab" >
                    <Button.FontSize>
                        <OnIdiom x:TypeArguments ="x:Double" Phone ="15" Tablet ="20"/>
                    </Button.FontSize>
                    <Button.HeightRequest>
                        <OnIdiom x:TypeArguments="x:Double">
                            <OnIdiom.Phone>
                                <OnPlatform x:TypeArguments="x:Double" iOS="30" Android="40" WinPhone="30" />
                            </OnIdiom.Phone>
                            <OnIdiom.Tablet>
                                <OnPlatform x:TypeArguments="x:Double" iOS="40" Android="50" WinPhone="40" />
                            </OnIdiom.Tablet>
                        </OnIdiom>
                    </Button.HeightRequest>
                </Button>
            </Grid>
        </StackLayout>
    </Frame>
</StackLayout>

Answer 1

在自定义弹出背景中，您可以为BackgroundColor =“## 60000000”提供弹出效果。我在PopUp to contains other controls like DateTime Picker,dropdownlist详细解释了这一点你也可以查看我的repo github.com/RenjithPr90/DemoPopUp 感谢

Answer 2

您需要做的是使用BoxView作为背景，并将弹出窗口覆盖在顶部。

BoxView将用于创建深色背景。这可以通过将BoxView的背景颜色设置为黑色并将Opacity设置为约0.5来实现。

完成背景后，您只需将弹出式视图覆盖在BoxView的顶部即可。这可以通过几个布局来实现（RelativeLayout，AbsoluteLayout，Grid）

Answer 3

我不知道这是否是正确的解决方案/方法，但它会完成工作。

<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
    <StackLayout IsVisible="{Binding IsLoading}" BackgroundColor="#80000000" Grid.Row="0" Grid.Column="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
    <Button Grid.Row="0" Grid.Column="0" Text="TAP ME" Clicked="Handle_Clicked" VerticalOptions="Center" HorizontalOptions="Center" />
</Grid>

在这里，您可以看到我只是将StackLayout的可见性绑定到IsLoading。

在.cs页面内，实施INotifyPropertyChanged。确保根据对话框设置BindingContext IsLoading值。下面的代码将比我更好地解释我的逻辑。

public partial class TestAppsPage : ContentPage, INotifyPropertyChanged
{
    public TestAppsPage()
    {
        InitializeComponent();
        BindingContext = this;
    }

    async void Handle_Clicked(object sender, System.EventArgs e)
    {
        IsLoading = true;
        var answer = await DisplayAlert("Mr Title", "This is a dummy", "OK", "Cancel");
        if (answer || !answer)
            IsLoading = false;

    }



    private bool isLoading;
    public bool IsLoading
    {
        get
        {
            return isLoading;
        }

        set
        {
            isLoading = value;
            RaisePropertyChanged("IsLoading");
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
    public void RaisePropertyChanged(string propName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propName));

        }
    }
}

在Android设备上测试并且运行正常。

Answer 4

在XAML中，尝试此代码。（Referred）

<Grid>
    <ScrollView>
        <!-- Insert your page content in here -->
    </ScrollView>

    <ContentView IsVisible="false" HorizontalOptions="FillAndExpand" BackgroundColor="LightGray" Opacity="0.5" VerticalOptions="FillAndExpand" x:Name="LogOutContentView">
        <ActivityIndicator IsRunning="false" x:Name="LogoutProgressIndicator" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
    </ContentView>
</Grid>

您可以为BackgroundColor添加所需的颜色，并根据需要设置Opacity。（0.5将使其50％不透明）

在您的代码中，您可以按如下方式显示进度。

LogOutContentView.IsVisible = true;
LogoutProgressIndicator.IsRunning = true;

完成后，您可以将上述两个值设置为false。

如何在自定义弹出窗口以xamarin形式显示时使背景视图变暗

4 个答案: