TrakPopup

What makes Xamarin Forms such a great development tool is being able to develop apps cross platform, thus cutting your development time way down.

In developing several mobile apps, we’ve created some components to make that cross platform development even easier.

 

The TrakPopup allows you to popup a new window on top of existing windows with your own design in the new window.

TrakPopup

The TrakPopup control when invoked will insert itself into the Xamarin Forms Visual Tree with the parent being the page. It will overlay the current page content with a black film to show the current page is disabled. The popup window can be placed anywhere on the screen using Constraints. The Constraints for Left, Top, Width and Height work the same as they do for the RelativeLayout. The parent for the Constraint will be the RelativeLayout container in the TrakPopup control that will be the size of the entire page. To automatically close the Popup window, you can touch or click anywhere outside of the Popup window.

NuGet Package

ComponentTrak.UI

Public Properties

Name

Type

Get/Set

Description

PopupContent

View

Defaults to a blank view. You can use XAML to define a custom layout using standard Xamarin Forms controls.

PopupLeft

Constraint

Defaults to the left side of the page.

PopupTop

Constraint

Defaults to the top of the page.

PopupWidth

Constraint

Defaults to the width of the page.

PopupHeight

Constraint

Defaults to the height of the page.

OutsidePopupClose

Boolean

Defaults to True. If this is set to false, the user will not be able to touch and/or click outside the Popup Window to close the Popup Window.

Public Methods

Name

Description

Open

Opens the Popup Window.

Close

Closes the Popup Window.

Public Events

 

Example:

XAML:

<trakUI:TrakPopup x:Name=”trakPopupCtrl”

                      PopupLeft=”{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.1, Constant=0}”

                      PopupTop=”{ConstraintExpression Type=Constant, Constant=60}”

                      PopupWidth=”{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.8, Constant=0}”

                      PopupHeight=”{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=-160}”

                      >

      <trakUI:TrakPopup.PopupContent>

        <Grid BackgroundColor=”Aqua”>

          <Grid.RowDefinitions>

            <RowDefinition/>

            <RowDefinition/>

            <RowDefinition/>

            <RowDefinition/>

          </Grid.RowDefinitions>

          <Label Text=”This can be whatever content you want it to be!”/>

        </Grid>

      </trakUI:TrakPopup.PopupContent>

    </trakUI:TrakPopup>

C#:

trakPopupCtrl.Open();

 

Requirements

Xamarin.Forms