Is there a way to customize popup to opens on the same page on the current page, not on a new page and data source will be bondable with product modal

1 Reply
2 Participants

Created by
ET etawreed

Platform
Xamarin.Forms

Platform
Xamarin.Forms

Control
SfPopup

Created On
Jul 7, 2021 09:40 AM UTC

Last Activity On
Jul 8, 2021 02:24 PM UTC

Want to subscribe?
SIGN IN

Is there a way to customize popup in this way as in the attached picture.

The pop-up opens on the same page as the current page, not on a new page.

And the data source is

popupLayout.bindingcontext = product;

this is my xaml :

<sfPopup:SfPopupLayout x:Name="popupLayout" IsOpen="false">

<sfPopup:SfPopupLayout.PopupView>

<sfPopup:PopupView >

<sfPopup:PopupView.ContentTemplate>

<Grid Padding="10"

Margin="0"

ColumnSpacing="0"

HorizontalOptions="FillAndExpand"

RowDefinitions="Auto, Auto, Auto, Auto"

RowSpacing="0"

VerticalOptions="FillAndExpand">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Image

Grid.RowSpan="4"

Aspect="Fill"

BackgroundColor="{DynamicResource Gray-F0}"

HeightRequest="{OnIdiom Default=200,

Desktop=200}"

VerticalOptions="Center"

HorizontalOptions="Center"

WidthRequest="{OnIdiom Default=300,

Desktop=200}"

Source ="{Binding ProductIcon}" >

</Image>

<Label

Grid.Column="1"

Margin="15,0,0,8"

HorizontalOptions="Start"

LineBreakMode="TailTruncation"

MaxLines="1"

Style="{StaticResource TitleLabelStyle}"

Text="{Binding ProductName}"

VerticalOptions="Center"

FontSize="20"

TextTransform="Uppercase"

<StackLayout

Grid.Row="2"

Grid.Column="1"

Margin="15,0,0,16"

Orientation="Horizontal"

Spacing="1">

<Label

FontFamily="Montserrat-SemiBold"

FontSize="20"

LineHeight="{OnPlatform Android=1.25,

Default=-1}"

Style="{StaticResource SimpleLabelStyle}"

Text="{Binding DiscountPrice, StringFormat='${0:0 }'}"

TextColor="{DynamicResource PrimaryColor}" />

<Label

Margin="0,6,0,6"

Style="{StaticResource SimpleLabelStyle}"

Text="{Binding ProductPrice, StringFormat='${0:0.00}'}"

TextDecorations="Strikethrough"

FontSize="16"/>

</StackLayout>

<StackLayout

Grid.Row="3"

Grid.Column="1"

Margin="15,0,0,16"

Orientation="Vertical"

Spacing="1">

<Label

Grid.Row="0"

Grid.Column="1"

Grid.ColumnSpan="3"

Margin="{OnIdiom Default='0,16',

Desktop='0,0,0,16'}"

HorizontalOptions="Start"

Style="{StaticResource TitleLabelStyle}"

Text="Select Size" />

<buttons:SfSegmentedControl

Grid.Row="1"

Grid.Column="1"

Grid.ColumnSpan="3"

Margin="{OnIdiom Default='0,0,0,16',

Desktop='0,0,0,8'}"

HorizontalOptions="{OnIdiom Default=Start,

Phone=Center}"

ItemsSource="{Binding SizeVariants}"

Style="{StaticResource SegmentedControlStyle}">

<buttons:SfSegmentedControl.Behaviors>

<behavior:SegmentedControlCommandBehavior />

</buttons:SfSegmentedControl.Behaviors>

</buttons:SfSegmentedControl>

<Label

Grid.Row="2"

Grid.Column="1"

Grid.ColumnSpan="3"

Margin="{OnIdiom Default='0,16',

Desktop='0,0,0,16'}"

HorizontalOptions="Start"

Style="{StaticResource TitleLabelStyle}"

Text="Select Quantity" />

<buttons:SfSegmentedControl

Grid.Row="3"

Grid.Column="1"

Grid.ColumnSpan="3"

Margin="{OnIdiom Default='0,0,0,16',

Desktop='0,0,0,8'}"

HorizontalOptions="{OnIdiom Default=Start,

Phone=Center}"

ItemsSource="{Binding Quantities}"

Style="{StaticResource SegmentedControlStyle}">

<buttons:SfSegmentedControl.Behaviors>

<behavior:SegmentedControlCommandBehavior />

</buttons:SfSegmentedControl.Behaviors>

</buttons:SfSegmentedControl>

<Label

Grid.Row="3"

Grid.Column="1"

Grid.ColumnSpan="3"

Margin="{OnIdiom Default='0,16',

Desktop='0,0,0,16'}"

HorizontalOptions="Start"

Style="{StaticResource TitleLabelStyle}"

Text="Notes" />

<inputLayout:SfTextInputLayout

Hint="Notes">

</inputLayout:SfTextInputLayout>

</Grid>

</border:SfBorder>

</StackLayout>

<StackLayout

Grid.Row="4"

Grid.Column="1"

Margin="15,0,0,16"

Spacing="1">

<buttons:SfButton

Margin="0"

HorizontalOptions="{OnIdiom Default=Center,

Phone=CenterAndExpand}"

Style="{StaticResource GradientButtonStyle}"

Text="Order"

WidthRequest="200" />

</StackLayout>

</Grid>

</DataTemplate>

</sfPopup:PopupView.ContentTemplate>

</sfPopup:PopupView>

</sfPopup:SfPopupLayout.PopupView>

<sfPopup:SfPopupLayout.Content>

<Grid

Margin="{OnIdiom Default='0,16,0,0',

Desktop='16'}"

BackgroundColor="{OnIdiom Default={StaticResource Transparent},

Desktop={DynamicResource Gray-Bg},

Converter={StaticResource DynamicResourceToColorConverter}}"

ColumnSpacing="0"

HorizontalOptions="{OnIdiom Default=Fill,

Desktop=FillAndExpand}"

RowSpacing="0">

<StackLayout Grid.Column="1"

Margin="-200,0,10,0">

<StackLayout

Orientation="Horizontal"

Grid.Row="0">

<Grid>

<buttons:SfButton

Grid.Column="0"

Grid.Row="0"

Style="{StaticResource IconsButtonStyleMenu}"

Text="PRINT"

Padding="10,5"

HorizontalOptions="Start"

ImageSource="print.png"

Margin="0,0,25,0"

<buttons:SfButton

Grid.Column="1"

Grid.Row="0"

Style="{StaticResource IconsButtonStyleMenu}"

Text="KETCHEN"

Padding="10,5"

HorizontalOptions="Start"

ImageSource="Kitchen.png"

Margin="0,0,25,0"

<buttons:SfButton

Grid.Column="2"

Grid.Row="0"

Style="{StaticResource IconsButtonStyleMenu}"

Text="VOID"

Padding="10,5"

HorizontalOptions="Start"

ImageSource="voidICON.png"

Margin="0,0,25,0"

<buttons:SfButton

Grid.Column="3"

Grid.Row="0"

Style="{StaticResource IconsButtonStyleMenu}"

Text="DISCOUNT"

Padding="10,5"

HorizontalOptions="Start"

ImageSource="sales.png"

Margin="0,0,25,0"

<buttons:SfButton

Grid.Column="4"

Grid.Row="0"

Style="{StaticResource IconsButtonStyleMenu}"

Text="NOTES"

Padding="10,5"

HorizontalOptions="Start"

ImageSource="notes.png"

Margin="0,0,25,0"

<buttons:SfButton

Grid.Column="5"

Grid.Row="0"

Style="{StaticResource IconsButtonStyleMenu}"

Text="TAGS"

Padding="10,5"

HorizontalOptions="Start"

ImageSource="tag.png"

Margin="0,0,25,0"

<buttons:SfButton

Grid.Column="6"

Grid.Row="0"

Style="{StaticResource IconsButtonStyleMenu}"

Text="MORE"

Padding="10,5"

HorizontalOptions="Start"

ImageSource="dots.png"

</Grid>

</StackLayout>

<!-- <Grid

ColumnDefinitions="*, Auto"

RowDefinitions="Auto, 1, Auto, Auto, Auto, Auto, 1, Auto"

RowSpacing="0"

Padding="5,10"

BackgroundColor="White"

Margin="0,25,0,10">

<SearchBar

Grid.Row="2"

x:Name="SearchEntry"

HeightRequest="40"

BindingContext="{x:Reference listView}"

HorizontalOptions="FillAndExpand"

Placeholder="Search products"

TextChanged="OnFilterTextChanged"

</Grid>

-->

<sync:SfListView

x:Name="listView"

Grid.Row="2"

Padding="0,12"

AutoFitMode="Height"

HorizontalOptions="FillAndExpand"

ItemSpacing="3"

SelectionMode="Single"

HeightRequest="535"

IsScrollingEnabled="True"

IsScrollBarVisible="True"

ItemTapped="CategoryTile_ItemTapped">

<sync:SfListView.ItemTemplate>

<Grid >

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Image

Grid.Row="0"

Aspect="AspectFill"

BackgroundColor="{DynamicResource Gray-200}"

Source="{Binding icon}">

</Image>

<Label Grid.Row="1"

Text="{Binding Name}"

LineBreakMode="WordWrap"

HorizontalTextAlignment="Center"

VerticalTextAlignment="Center"

TextColor="Black"

Opacity="0.87"

Margin="16,0,0,0"

FontSize="16">

</Label>

</Grid>

</Frame>

</DataTemplate>

</sync:SfListView.ItemTemplate>

<sync:SfListView.LayoutManager>

<sync:GridLayout SpanCount="{core:OnPlatformOrientationIntValue Desktop=4, PhonePortrait=2, PhoneLandscape=3, TabletPortrait=5, TabletLandscape=5}" />

</sync:SfListView.LayoutManager>

</sync:SfListView>

</StackLayout>

<sync:SfListView

x:Name="listItemsView"

Grid.Row="2"

Grid.Column="1"

Padding="0,12"

AutoFitMode="Height"

HorizontalOptions="Center"

ItemSpacing="3"

SelectionMode="Single"

IsScrollingEnabled="True"

IsScrollBarVisible="True"

HeightRequest="535"

ItemTemplate="{StaticResource ListViewTemplateSelector}"

ItemTapped="listItemsView_ItemTapped">

<sync:SfListView.LayoutManager>

<sync:GridLayout SpanCount="{core:OnPlatformOrientationIntValue Desktop=4, PhonePortrait=2, PhoneLandscape=3, TabletPortrait=4, TabletLandscape=5}" />

</sync:SfListView.LayoutManager>

</sync:SfListView>

</StackLayout>

<StackLayout

Orientation="Horizontal"

Grid.Row="4"

BackgroundColor="White"

<Grid HorizontalOptions="Center"

ColumnDefinitions="*, Auto"

RowDefinitions="Auto, 1, Auto, Auto, Auto, Auto, 1, Auto"

RowSpacing="1"

Padding="5,6">

<buttons:SfButton

Grid.Column="0"

Grid.Row="3"

Style="{StaticResource IconsButtonStyleRight}"

Text="HOME"

HorizontalOptions="Start"

ImageSource="home.png"

Margin="100,0,0,0"

<buttons:SfButton

Grid.Column="1"

Grid.Row="3"

Style="{StaticResource IconsButtonStyleRight}"

Text="ORDERS"

HorizontalOptions="Start"

ImageSource="time.png"

Margin="100,0,0,0"

<buttons:SfButton

Grid.Column="2"

Grid.Row="3"

Style="{StaticResource IconsButtonStyleRight}"

Text="NEW"

HorizontalOptions="Start"

ImageSource="add.png"

Margin="100,0,0,0"

</Grid>

</StackLayout>

<StackLayout Margin="0,0,230,0"

VerticalOptions="Start"

<Grid

ColumnDefinitions="*, Auto"

RowDefinitions="Auto, 1, Auto, Auto, Auto, Auto, 1, Auto"

RowSpacing="0"

<Label

Grid.Row="0"

Grid.Column="0"

Grid.ColumnSpan="2"

Margin="16,16,16,5"

HorizontalOptions="Start"

Style="{StaticResource TitleLabelStyle}"

Text="10" />

<Label

Grid.Row="0"

Grid.Column="1"

Grid.ColumnSpan="2"

Margin="16,16,16,5"

HorizontalOptions="End"

Style="{StaticResource TitleLabelStyle}"

Text="Active"

TextTransform="Uppercase"/>

</Grid>

<Grid

ColumnDefinitions="*, Auto"

RowDefinitions="Auto, 1, Auto, Auto, Auto, Auto, 1, Auto"

RowSpacing="0">

<buttons:SfButton

Grid.Column="0"

Grid.Row="0"

Grid.ColumnSpan="2"

Text="PICK UP"

HorizontalOptions="Start"

Margin="5,10,16,3"

TextColor="{StaticResource PrimaryColor}"

Style="{StaticResource TransparentButtonStyle}"

<buttons:SfButton

Grid.Column="1"

Grid.Row="0"

Text="ADD CUSTOMERS"

HorizontalOptions="End"

Grid.ColumnSpan="2"

Margin="16,10,0,3"

TextColor="{StaticResource PrimaryColor}"

Style="{StaticResource TransparentButtonStyle}"

</Grid>

</StackLayout>

<Grid

ColumnDefinitions="*, Auto"

RowDefinitions="Auto, 1, Auto, Auto, Auto, Auto, 1, Auto"

BackgroundColor="White">

</ListView>

</Grid>

<Grid

BackgroundColor="{StaticResource PrimaryColor}"

ColumnDefinitions="*, Auto"

RowDefinitions="Auto, 1, Auto, Auto, Auto, Auto, 1, Auto"

RowSpacing="1">

<Label

Grid.Row="3"

Margin="16,12,16,16"

HorizontalOptions="Start"

LineHeight="{OnPlatform Android=1.25,

Default=-1}"

Style="{StaticResource TitleLabelStyle}"

Text="Total"

FontSize="Medium"

TextColor="{StaticResource PrimaryText}"/>

<Label

Grid.Row="3"

Grid.Column="1"

Margin="16,12,16,16"

HorizontalOptions="EndAndExpand"

HorizontalTextAlignment="End"

LineHeight="{OnPlatform Android=1.25,

Default=-1}"

Style="{StaticResource TitleLabelStyle}"

Text="{Binding DiscountPrice, StringFormat='${0}'}"

TextColor="{StaticResource PrimaryText}"

FontSize="Medium"/>

</Grid>

</StackLayout>

</Grid>

</ScrollView>

</sfPopup:SfPopupLayout.Content>

</sfPopup:SfPopupLayout>

-------------------------------------------------------------------------------------------------------------------------------------------------

and this is my Product modal :

public class Products

{

public int id { get; set; }

public string ProductIcon { get; set; }

public string ProductName { get; set; }

public int ProductPrice { get; set; }

public int DiscountPrice { get; set; }

public int totalQuantity { get; set; }

public string Notes { get; set; }

public List<object> Quantities { get; set; } = new List<object> { 1, 2, 3, 4, 5 ,6,7,8,9,10 };

public List<string> SizeVariants { get; set; } = new List<string> { "S", "M", "L", "XL" };

public int key { get; set; }

public bool IsAvailabel { get; set; }

}

------------------------------------------------------------------------------------------------------------------------------------------------

and this is the event to show popup :

private void listItemsView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e)

{

var productitem = e.ItemData as Products;

//how I can insert productitem data into popupLayout ????

popupLayout.BindingContext = productitem;

popupLayout.IsOpen = true;

}

1 Reply

KK Karthikraja Kalaimani Syncfusion Team July 8, 2021 02:24 PM UTC

Hi Etawreed,

The SfPopupLayout supports the Layout customization, we have already documented about this. Please refer to the below UG link.

https://help.syncfusion.com/xamarin/popup/layout-customizations

By default popup will shown in current page and this is default behaviour of SfPopupLayout. If you want to open on the another page, Please open the popup on constructor of the second page.

Regards,
Karthik Raja

Need More Help?

Get personalized assistance from our support team.

Contact Support

1 Reply
2 Participants
Want to subscribe?
SIGN IN
Created by
ET etawreed
Platform
Xamarin.Forms
Control
SfPopup
Created On
Jul 7, 2021 09:40 AM UTC
Last Activity On
Jul 8, 2021 02:24 PM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support