Pan R
Pan R

Reputation: 13

ContentView autoAdd when called

Good Day,

I made ContentView called WarningPopup. I would like to auto add this ContentView to my current page when called. For example i`m using:

WarningPopup wp = new WarningPopup {
            ButtonText = "OK"
        };

but my WarningPopup isn`t showing on my Page... to show my popup i should use for example

 Content = new AbsoluteLayout {
            Children = {
                wp
            }
        };

So... I would like to have auto add to my current page without using last lines of code. Or maybe I'm doing everything wrong?

In case this is my WarningPopup class .cs

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class WarningPopup : ContentView
{
    public static readonly BindableProperty ButtonTextProperty =
        BindableProperty.Create("ButtonText", typeof(string), typeof(WarningPopup), default(string));

    public string ButtonText {
        get { return (string)GetValue(ButtonTextProperty);  }
        set { SetValue(ButtonTextProperty, value);          }        
    }


    public WarningPopup ()
    {
        InitializeComponent ();
        innerLabel.SetBinding(Label.TextProperty, new Binding("ButtonText", source: this));


    }
}

and my XAML:

<ContentView 
        WidthRequest="180"
        HeightRequest="60"
        xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        x:Class="MobileAMBPanel.WarningPopup">

      <Frame CornerRadius="4" HasShadow="False" OutlineColor="Silver" BackgroundColor="Red" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
        <StackLayout Orientation="Horizontal">
                <Image x:Name="innerImage"  VerticalOptions="CenterAndExpand" HorizontalOptions="EndAndExpand"/>
                <Label x:Name="innerLabel"  VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand"/>
        </StackLayout>
      </Frame>
</ContentView>

Thanks!

Upvotes: 1

Views: 41

Answers (1)

SushiHangover
SushiHangover

Reputation: 74174

1st: Lets move the AbsoluteLayout properties in your ContentView to the actual parent, the ContentView itself, (you will be chasing mind-altering absolute positioning otherwise, I re-sized it to fit/overlay the "center" of the screen for my example):

<ContentView 
    ~~~
    AbsoluteLayout.LayoutBounds=".5,.5,.5,.5" AbsoluteLayout.LayoutFlags="All">
    <ContentView.Content>
        <Frame CornerRadius="4" HasShadow="False" OutlineColor="Silver" BackgroundColor="Red">
            <StackLayout Orientation="Horizontal">
                <Image x:Name="innerImage"  VerticalOptions="CenterAndExpand" HorizontalOptions="EndAndExpand"/>
                <Label x:Name="innerLabel" Text="StackOverflow" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand"/>
            </StackLayout>
        </Frame>
    </ContentView.Content>
</ContentView>

2nd: In the page that will be hosting this "popup", make sure that the root layout is an AbsoluteLayout, if not, just enclosing all of the existing page content in one will work without changing anything else to the actual content and make sure to add a x:Name to it.

<ContentPage 
    ~~~
    >
    <ContentPage.Content>
        <AbsoluteLayout x:Name="someContainer">
            <StackLayout> 
                ~~~~
            </StackLayout>
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

3rd: Using the x:Name of your hosting page's AbsoluteLayout, you can Add / Remove the "popup" ContentView whenever you need to:

button.Clicked += async (object sender, EventArgs e) =>
{
    var contentView = new WarningPopup();
    someContainer.Children.Add(contentView);
    await Task.Delay(1000);
    someContainer.Children.Remove(contentView);
};

enter image description here

Upvotes: 1

Related Questions