Xamarin - slide element within Frame outside of view - xaml

Not really sure how to properly describe my problem using correct wording as I'm new to Xamarin and Xaml.
I have a Frame with several StackLayouts within and I want to slide a specific StackLayout outside the Frame without showing it outside the Frame.
I can currently do this with:
XAML:
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"
xmlns:mr="clr-namespace:MR.Gestures;assembly=MR.Gestures"
x:Class="iRemote.UI.Maps.LocationFinderMap"
xmlns:map="clr-namespace:iRemote.Location"
Title="Location Finder">
<Frame HasShadow="true" OutlineColor="Color.Black" WidthRequest="700" HeightRequest="300" Padding="3"
BackgroundColor="White">
<mr:StackLayout x:Name="sl_main" Padding="2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
Orientation="Horizontal" WidthRequest="200">
<StackLayout HorizontalOptions="Start" Orientation="Vertical">
<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">
<Label Text="Parcel #" />
<Entry x:Name="txtParcel" WidthRequest="100" />
<Label HorizontalOptions="FillAndExpand" />
<Button x:Name="btnClose" BackgroundColor="#0786a3" BorderRadius="30" TextColor="White"
Text="Close" HorizontalOptions="End" />
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">
<Label Text="Meter #" />
<Entry x:Name="txtMeter" WidthRequest="100" />
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">
<SearchBar x:Name="search" Placeholder="Search" />
</StackLayout>
<StackLayout Padding="2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout HorizontalOptions="FillAndExpand">
<mr:Image x:Name="img_map" Source="down" HeightRequest="19" WidthRequest="32" />
</StackLayout>
</StackLayout>
</StackLayout>
<StackLayout x:Name="sl_map" Padding="2" HorizontalOptions="FillAndExpand" HeightRequest="5"
VerticalOptions="FillAndExpand" IsVisible="true" WidthRequest="300">
<map:ExtendedMap
BackgroundColor="Blue"
x:Name="MP"
IsShowingUser="true"
MapType="Street" />
</StackLayout>
</mr:StackLayout>
</Frame>
</ContentPage>
Code-Behind:
if (panelShowing)
{
var rect = new Rectangle(this.Width - sl_map.Width, sl_map.Y, sl_map.Width, sl_map.Height);
sl_map.LayoutTo(rect, 250, Easing.CubicIn);
}
else
{
var rect = new Rectangle(this.Width + sl_map.Width - 40, sl_map.Y, sl_map.Width, sl_map.Height);
sl_map.LayoutTo(rect, 200, Easing.CubicOut);
}
However, sl_map simply just shows outside the frame. I want it to not be visible as it crosses the border of the frame. I hope that's clear enough. Again, sorry if I'm not using the correct terminology. I'm a WinForms guy.

Related

Xamarin.Forms - Custom size modal

I'm new to Xamarin.Forms and I'm showing a page as a modal by using:
await Navigator.PushModalAsync(modalPage);
Modal.xaml
<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SandboxApp.Modal"
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.ModalPresentationStyle="FullScreen">
<ContentPage.Content>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="This will have some data"></Label>
<Button x:Name="closeModal" Text="Close modal" VerticalOptions="Start" HorizontalOptions="FillAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
I understand you can set the modal size to things like:
FormSheet
FullScreen
OverFullScreen
etc
But is it possible to set the size of a modal page to a custom size?
Ideally, I'd like it to be almost full screen but with a bit of a gap around the modal so you can still see the page underneath if that makes sense?
Maybe a solution to make it work. BackgroundColor="Transparent" and work with a Frame in a Grid with a Margin
In this example i use a ListView , the Gif at the bottom to show how it looks is a bit small but you see what it looks like.
MainPage.xaml
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="0,40,0,0" />
</OnPlatform>
</ContentPage.Padding>
<ContentPage.Content>
<StackLayout>
<ListView x:Name="listView" ItemSelected="OnItemSelected" />
</StackLayout>
</ContentPage.Content>
MainPage.xaml.cs
async void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
{
if (listView.SelectedItem != null)
{
var detailPage = new Page1();
detailPage.BindingContext = e.SelectedItem as Contact;
listView.SelectedItem = null;
await Navigation.PushModalAsync(detailPage);
}
}
In Page1.xaml BackgroundColor="Transparent" and a Margin in the Grid
<ContentPage
x:Class="ModalStackO.Page1"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
BackgroundColor="Transparent">
<ContentPage.Content>
<Grid Margin="5,20,0,0">
<Frame BackgroundColor="#1975ce" CornerRadius="15" BorderColor="Black" />
<Frame
Margin="0,35,0,0"
BackgroundColor="White"
BorderColor="Black"
CornerRadius="5"
HeightRequest="450"
WidthRequest="280">
<StackLayout
BackgroundColor="White"
HeightRequest="350"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="280">
<StackLayout Orientation="Horizontal">
<Label
FontSize="Medium"
HorizontalOptions="FillAndExpand"
Text="Name:" />
<Label
FontAttributes="Bold"
FontSize="Medium"
Text="{Binding Name}" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label
FontSize="Medium"
HorizontalOptions="FillAndExpand"
Text="Age:" />
<Label
FontAttributes="Bold"
FontSize="Medium"
Text="{Binding Age}" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label
FontSize="Medium"
HorizontalOptions="FillAndExpand"
Text="Occupation:" />
<Label
FontAttributes="Bold"
FontSize="Medium"
Text="{Binding Occupation}" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label
FontSize="Medium"
HorizontalOptions="FillAndExpand"
Text="Country:" />
<Label
FontAttributes="Bold"
FontSize="Medium"
Text="{Binding Country}" />
</StackLayout>
<Button
x:Name="dismissButton"
Clicked="OnDismissButtonClicked"
Text="Dismiss" />
<Button Text="Next Page" Clicked="Button_Clicked" />
</StackLayout>
</Frame>
</Grid>
</ContentPage.Content>
</ContentPage>
Page1.xaml.cs
async void OnDismissButtonClicked(object sender, EventArgs args)
{
await Navigation.PopModalAsync();
}
private async void Button_Clicked(object sender, EventArgs e)
{
var detailPage = new Page2();
await Navigation.PushModalAsync(detailPage);
}
Then in Page2.xaml BackgroundColor="Transparent" and a bit more Margin in the Grid to show Page1 also
<ContentPage
x:Class="ModalStackO.Page2"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
BackgroundColor="Transparent">
<ContentPage.Content>
<Grid Margin="10,50,0,0">
<Frame BackgroundColor="#1975ce" CornerRadius="15" BorderColor="Black" />
<Frame
Margin="0,35,0,0"
BackgroundColor="White"
BorderColor="Black"
CornerRadius="5"
HeightRequest="450"
WidthRequest="280">
<StackLayout>
<Label
HorizontalOptions="CenterAndExpand"
Text="Welcome to Page 2"
VerticalOptions="CenterAndExpand" />
<Button Text="Back" Clicked="Button_Clicked" />
</StackLayout>
</Frame>
</Grid>
</ContentPage.Content>
Page2.xaml.cs to go back
private async void Button_Clicked(object sender, EventArgs e)
{
await Navigation.PopModalAsync();
}
https://github.com/rotorgames/Rg.Plugins.Popup
This is the plugin I always use to meet the UI look requirement you mentioned (padding - so I can still see the page underneath).
Instead recommended to use Popups
you have 3 options, and all are customizable in size and animation
Free
1: https://github.com/rotorgames/Rg.Plugins.Popup
Free
2: https://learn.microsoft.com/en-us/xamarin/community-toolkit/views/popup
Pay or Community Account for Free
3: https://help.syncfusion.com/xamarin/popup/getting-started

Xamarin forms listview items not fully shown

I have this Xamarin listview:
<ContentPage.Content>
<ScrollView>
<StackLayout Padding="20,20,20,20">
<Grid>
<StackLayout Margin="10">
<Label Text="Quoting and Tankering" Style="{DynamicResource TitleStyle}" Margin="0, 20" HorizontalTextAlignment="Center" />
<Label Text="Select Aircraft:" />
<Picker Margin="30, 0, 0, 30" x:Name="pickerAircraft" ItemDisplayBinding="{Binding TailNumber}" SelectedItem="{Binding Id}" SelectedIndexChanged="PickerAircraft_SelectedIndexChanged" Title="Aircraft Selector"></Picker>
<Button Text="Add Leg" Margin="10,10,10,10" TextColor="Green" Clicked="Button_Clicked_1" />
<ListView ItemsSource="{Binding .}" VerticalOptions="Center">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10,10,10,10" HeightRequest="100">
<Label Text="Leg" />
<StackLayout Orientation="Horizontal" HeightRequest="100">
<Entry x:Name="txtICAO" WidthRequest="30" Text="{Binding ICAO}" />
<Button Text="Delete" WidthRequest="50" Clicked="Button_Clicked_2" x:Name="btn_Delete_Item_In_Cart" />
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button Text="Go to Step 2"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Clicked="Button_Clicked" />
</StackLayout>
</Grid>
</StackLayout>
</ScrollView>
</ContentPage.Content>
Now, when I'm rendering the page the listview items are partially shown, please check the screenshot:
What am I doing wrong with the listview? Do I need to add some margin/padding in order to have the full size shown?
Also the button below the listview is not shown.

Button escapes stacklayout on lower resolution

Here is a screenshot of the problem (Left= Xamarin.Forms previewer; Right= ADV 768x1080)
Code:
<Frame BackgroundColor="#292929" VerticalOptions="CenterAndExpand" Margin="20,0,20,0" CornerRadius="4" Padding="0">
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Padding="5">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Tomato">
<Label FontSize="Small" Text="ABBONAMENTO 30 giorni" TextColor="White"/>
<Label FontSize="Small" Text="€10,99" HorizontalOptions="EndAndExpand" TextColor="#ff9900"/>
</StackLayout>
<Button HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Text="ISCRIVITI" TextColor="#eeeeee" BackgroundColor="#FF9900" CornerRadius="4"/>
</StackLayout>
</Frame>
The frames are put in a StackLayout, which parent is a Grid.
The problem persists on low resolution devices only.
Can you tell me why is this happening, and how to fix it?
I need this layout to be height-aware and responsive.

Xamarin.Forms: Not visible ToolbarItems in ContentPage

I am using Xamarin.Forms for my project & I need to have Toolbar at the top of the page.
I am trying to get it along with Tabbed pages at bottom.
My code is
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:edTheSIS"
x:Class="edTheSIS.ParentDashboard">
<ContentPage.ToolbarItems>
<ToolbarItem Name="MenuItem1" Order="Primary" Text="Item 1" Priority="0" />
<ToolbarItem Name="MenuItem2" Order="Primary" Text="Item 2" Priority="1" />
</ContentPage.ToolbarItems>
<AbsoluteLayout>
<StackLayout BackgroundColor="Teal" AbsoluteLayout.LayoutBounds="0, 5, 0, 0" AbsoluteLayout.LayoutFlags="All">
<StackLayout Margin="0,200,0,0" HorizontalOptions="Center">
<Label Text="Xamarin.Forms" HorizontalTextAlignment="Center" TextColor="White"></Label>
<Label Text="Bottom NavigationBar" HorizontalTextAlignment="Center" TextColor="White"></Label>
</StackLayout>
</StackLayout>
<StackLayout AbsoluteLayout.LayoutBounds=".20,1,1,.1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="White" HorizontalOptions="FillAndExpand" Orientation="Horizontal">
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckHome">
<Image Margin="0,10,0,10" x:Name="imgHome" Style="{StaticResource ButtonNavigationBarImageStyle}" />
<Label Text="Dairy" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label>
</StackLayout>
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckAlarm">
<Image Margin="0,10,0,10" x:Name="imgAlarm" Style="{StaticResource ButtonNavigationBarImageStyle}" />
<Label Text="Alarm" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ContentPage>
After executing the code only tabs are showing up, not ToolbarItems.
Wrap your page in a NavigationPage.
I'm guessing you're setting your MainPage in the App.xaml.cs now like: MainPage = new ParentDashboard();
Set this to be: MainPage = new NavigationPage(new ParentDashboard());

Height on Listview with imagecell inside a stacklayout

I am with a problem. I have a imagecell inside of a Listview, inside of a Frame and i put all inside a stacklayout.
My problem is that the height of the frame with the imagecell are too expensive. Now, i just have 2 items inside but the height is like the size of the page.
The XAML code:
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<ScrollView>
<StackLayout Padding="10,20,10,10">
<Frame x:Name="frameOpcoes" OutlineColor="Gray" HasShadow="True" VerticalOptions="Fill" HorizontalOptions="FillAndExpand" BackgroundColor="White">
<StackLayout Padding="0,10,0,0" Orientation="Vertical">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical" HorizontalOptions="Start">
<Label x:Name="lblOpcoes" Text="Placa: " TextColor="Gray" FontAttributes="Bold"/>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<Entry x:Name="entryPlacaLetra" TextChanged="entryLetra_TextoAlterado" Keyboard="Text" TextColor="Black" BackgroundColor="#D3D3D3" />
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="Fill">
<Label x:Name="lblTraco" Text="-" TextColor="Gray" FontAttributes="Bold"/>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<Entry x:Name="entryPlacaNum" TextChanged="entryNum_textoAlterado" Keyboard="Numeric" TextColor="Black" BackgroundColor="#D3D3D3"/>
</StackLayout>
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand">
<ListView x:Name="listView" HorizontalOptions="FillAndExpand" VerticalOptions="Start" HasUnevenRows="True" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate >
<ImageCell Text="{Binding Title}" Detail="{Binding Detail}" DetailColor="Gray" TextColor="Black" ImageSource="{Binding IconSource}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</StackLayout>
</Frame>
<StackLayout Padding="0,30,0,0" x:Name="stckCalculo" VerticalOptions="EndAndExpand">
<Button x:Name="btnCalcular" BorderColor="Silver" BackgroundColor="Red" TextColor="White" Text="Prosseguir" />
</StackLayout>
</StackLayout>
</ScrollView>
</StackLayout>
<StackLayout IsVisible="{Binding IsBusy}" Padding="12"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
<Frame Padding="50" OutlineColor="Black" HasShadow="true" AbsoluteLayout.LayoutFlags="PositionProportional" Opacity="0.8" BackgroundColor="Black" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<ActivityIndicator IsRunning="{Binding IsBusy}" Color ="White"/>
<Label Text="Aguarde..." HorizontalOptions="Center" TextColor="White"/>
</Frame>
</StackLayout>
</AbsoluteLayout>
You can create a custom cell like this
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Image Source="{Binding image}" />
<Label Text="{Binding title}"
TextColor="#f35e20" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>