DXPopup.Content Property

Gets or sets a view the Popup displays.

Namespace: DevExpress.XamarinForms.Popup

Assembly: DevExpress.XamarinForms.Editors.dll

NuGet Package: DevExpress.XamarinForms.Editors

Declaration

public View Content { get; set; }

Property Value

Type	Description
View	A View class descendant.

Remarks

You can assign any complex view or layout to the Content property to display it within a Popup. This view defines the size and appearance of the Popup.

Example

This example shows how to specify a Popup that displays detailed information on a customer that a user selects in a DataGridView bound to a collection of CompanyCustomer objects.

Set the DXPopup.Content property to a StackLayout with a Grid that contains images and labels, and a Button that closes the Popup. Bind customer-related elements to a CompanyCustomer object’s properties (Photo, Name, CompanyName, Position, Phone, and Address).

Note

You can skip the Content property tags in the XAML markup as this property has a ContentProperty attribute.

XAML

<ContentPage.Resources>
    <Style TargetType="Label">
        <Setter Property="TextColor"
                Value="#54565a" />
    </Style>
</ContentPage.Resources>
<ContentPage.Content>
    <StackLayout>
        <dxg:DataGridView>
            <!--Specify the DevExpress DataGrid 
                bound to the collection of CompanyCustomer obejcts here. -->
        </dxg:DataGridView>

        <dxp:DXPopup x:Name="popup" AllowScrim="True">
            <!--Specify the popup content. 
                Bind its customer-related elements to properties of a CompanyCustomer object. -->
            <StackLayout>
                <Grid RowSpacing="15" ColumnSpacing="13" 
                    HeightRequest="220" WidthRequest="320" 
                    Margin="10, 10">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <ContentView Grid.Row="0" Grid.Column="0" Grid.RowSpan="5">
                        <ContentView VerticalOptions="Start"
                                     HeightRequest="122"
                                     WidthRequest="102"
                                     BackgroundColor="{DynamicResource GridCellBorderColor}">
                            <Image Margin="1"
                                   VerticalOptions="CenterAndExpand"
                                   Aspect="AspectFill"
                                   HeightRequest="120"
                                   WidthRequest="100" 
                                   Source="{Binding Photo}"/>
                        </ContentView>
                    </ContentView>

                    <Image Grid.Row="0" Grid.Column="1" Source="person_icon.png"/>
                    <Label Grid.Row="0" Grid.Column="2" Text="{Binding Name}"/>

                    <Image Grid.Row="1" Grid.Column="1" Source="card_icon.png"/>
                    <Label Grid.Row="1" Grid.Column="2" Text="{Binding CompanyName}"/>

                    <Image Grid.Row="2" Grid.Column="1" Source="portfolio_icon.png"/>
                    <Label Grid.Row="2" Grid.Column="2" Text="{Binding Position}"/>

                    <Image Grid.Row="3" Grid.Column="1" Source="phone_icon.png"/>
                    <Label Grid.Row="3" Grid.Column="2" Text="{Binding Phone}"/>

                    <Image Grid.Column="1" Grid.Row="4" Source="location_icon.png"/>
                    <Label Grid.Row="4" Grid.Column="2" Text="{Binding Address}"/>
                </Grid>
                <Button Text="Close" Clicked="ClosePopup_Clicked"/>
            </StackLayout>
        </dxp:DXPopup>
    </StackLayout>
</ContentPage.Content>

Specify a binding context for the Popup’s content and open the Popup in the DataGridView.Tap event handler.

C#

CompanyCustomer customer;
// ... 

void OnTap(object sender, DevExpress.XamarinForms.DataGrid.DataGridGestureEventArgs args) {
    if (args.Item != null)
        customer = (CompanyCustomer)args.Item;
        popup.Content.BindingContext = customer;
        popup.IsOpen = true;
}

void ClosePopup_Clicked(System.Object sender, System.EventArgs e) {
    popup.IsOpen = false;
}