DXPopup.Content Property

Gets or sets a view the DXPopup displays. This is a bindable property.

Namespace: DevExpress.Maui.Controls

Assembly: DevExpress.Maui.Controls.dll

NuGet Package: DevExpress.Maui.Controls

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. On iOS, the DXPopup control change it’s size dynamically only if the nested content rises the MeasureInvalidated event.

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 DXStackLayout 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>
    <dx:DXStackLayout>
        <dxg:DataGridView>
            <!--Specify the DevExpress DataGrid 
                bound to the collection of CompanyCustomer objects here. -->
        </dxg:DataGridView>

        <dxco:DXPopup x:Name="popup" AllowScrim="True">
            <!--Specify the popup content. 
                Bind its customer-related elements to properties of a CompanyCustomer object. -->
            <dx:DXStackLayout>
                <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}">
                            <dx:DXImage Margin="1"
                                        VerticalOptions="CenterAndExpand"
                                        Aspect="AspectFill"
                                        HeightRequest="120"
                                        WidthRequest="100" 
                                        Source="{Binding Photo}"/>
                        </ContentView>
                    </ContentView>

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

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

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

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

                    <dx:DXImage 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"/>
            </dx:DXStackLayout>
        </dxco:DXPopup>
    </dx:DXStackLayout>
</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.Maui.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;
}