I have a sample page that has an outer grid with 3 rows. first and last (top and bottom) are my Header and Footer sections and in the middle, I have a StackLayout which then has a Frame (for color) which then has a ScrollView and inside of it another StackLayout.
The most inner StackLayout has many items that need to be scrolled, however, my challenge is that the inner items inside a ScrollView->StackLayout are not being constrained by the bounds of its parent and just overflow on top of my header and footer.
Strangely enough, this has just started happening, it used to work just fine and I don't know what changed. Code wise, it's identical... I'm at a loss, please help... Below is my XAML
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Pro4Soft.MobileDevice.Plumbing.Screens.TestPage"
VerticalOptions="FillAndExpand">
<ContentView.Content>
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label x:Name="Title" Grid.Row="0" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" FontAttributes="Bold" FontSize="Large">TEST PAGE</Label>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="1">
<Frame BackgroundColor="LightYellow" BorderColor="LightYellow" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Padding="5">
<ScrollView x:Name="Scroller">
<StackLayout x:Name="Container" Orientation="Vertical" Padding="1">
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
</StackLayout>
</ScrollView>
</Frame>
</StackLayout>
<StackLayout x:Name="ControlsContainer" Orientation="Horizontal" Grid.Row="2" HeightRequest="50" HorizontalOptions="FillAndExpand">
<Button Text="Some btn"/>
</StackLayout>
</Grid>
</ContentView.Content>
</ContentView>
And here is a screenshot of what's going on
I checked your code and it's working fine. ScrollView is working fine. Please see below screenshot.
Clean the project and delete bin/obj folder and try again.
I ended up building a brand new project and migrating old code over. Then it worked. I suspect an old Nuget, of unupdated Xamarin.Essentials package or something along those lines...
Related
I have built a simple and basic app. In order to help people to understand easly the app.
I would like to create a dynamic turorial. My idea is put differents content's pages in a carousel or collection view. And In every content's pages there is an image in background and I will add label and box to explain fonctionalities
Here you will find an example of an image that I will put in background of content page and add label to explain highlighted information
My question are :
I have 3 content pages that I will put backgroud image on it :
home =new HomePage(), Page2 page2 =new Page2() & Page3 page3 =new Page3()
how can i easly add label where I want as the image will be in background ?
how I can put those content pages in carrousel view or collection view ?
Thanks for your help
You can create carousel like this:
<StackLayout Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<CarouselView x:Name="cvTutorial" ItemsSource="{Binding Tutorials}" HorizontalScrollBarVisibility="Never" ItemsUpdatingScrollMode="KeepItemsInView" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" PeekAreaInsets="10" IsScrollAnimated="True" PositionChanged="cvTutorial_PositionChanged">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="0" Padding="0" HorizontalOptions="End">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ffimageloading:CachedImage BackgroundColor="Transparent" Grid.Row="0" x:Name="tutorialImg" Source="{Binding ImageUrl}" Aspect="AspectFit" HorizontalOptions="FillAndExpand"
Margin="{DynamicResource 50,40,50,00}" HeightRequest="350"/>
<StackLayout Grid.Row="1" HorizontalOptions="Center" VerticalOptions="End" Padding="0,30,0,0" Spacing="15">
<Label Style="{StaticResource RobotoBoldSize24WhiteLabelStyle}" HorizontalTextAlignment="Center" Text="{Binding Title}" Padding="10,10,10,0" />
<Label Style="{StaticResource RobotoRegularSize16LightGrayLabelStyle}" HorizontalTextAlignment="Center" Text="{Binding Subtitle}" HorizontalOptions="Center"
Padding="50,10,50,10" />
</StackLayout>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<Grid x:Name="indicatorGrid" ColumnSpacing="3" HorizontalOptions="Center" VerticalOptions="Start" Padding="{DynamicResource MarginPadding00_20_00_40}"
ColumnDefinitions = "25,25,25">
<pancake:PancakeView x:Name="Dot_1" Grid.Column="0" Style="{StaticResource SelectedIndicatorStyle}" />
<pancake:PancakeView x:Name="Dot_2" Grid.Column="1" Style="{StaticResource UnselectedIndicatorStyle}" />
<pancake:PancakeView x:Name="Dot_3" Grid.Column="2" Style="{StaticResource UnselectedIndicatorStyle}"/>
</Grid>
</StackLayout>
Check working sample - https://rb.gy/mlmh0q
I need to inject a ContentPage into Frame element ?
Is this possible to be done ?
I have update my description and I have added the below code
XAML Code
<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer"
DrawerWidth ="400"
Position="Right"
BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}"
DrawerHeaderHeight="160">
<navigationdrawer:SfNavigationDrawer.ContentView>
<Grid x:Name="mainContentView" BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackLayout BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}" Orientation="Horizontal">
<controls:IconButton Text="{i18n:TransIcn HamburgerMenu}" FontSize="30" x:Name="SyncIcon" HorizontalOptions="Start" Clicked="hamburgerButton_Clicked" BackgroundColor="Transparent" TextColor="#FFFFFF" ></controls:IconButton>
<Label x:Name="headerLabel" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="" FontSize="16"/>
</StackLayout>
<ScrollView Grid.Row="1" Margin="0" Padding="0">
<Frame x:Name="contentViewFrame" >
</Frame>
</ScrollView>
</Grid>
</navigationdrawer:SfNavigationDrawer.ContentView>
<navigationdrawer:SfNavigationDrawer.DrawerHeaderView>
<Grid BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}">
<Grid.RowDefinitions>
<RowDefinition Height="120"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<!--<Image Source="icon.png" HeightRequest="110" BackgroundColor="#1aa1d6" VerticalOptions="Center" HorizontalOptions="Center"/>-->
<Label Text="James Pollock" Grid.Row="1" HorizontalTextAlignment="Center" HorizontalOptions="Center" FontSize="20" TextColor="White"/>
</Grid>
</navigationdrawer:SfNavigationDrawer.DrawerHeaderView>
<navigationdrawer:SfNavigationDrawer.DrawerContentView>
<ListView x:Name="listView"
FlowDirection="RightToLeft"
ItemsSource="{Binding Items}"
BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}"
ItemSelected="listView_ItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Margin="0,8,0,0" BackgroundColor="{DynamicResource DashboardItemsDarkSurface}">
<Label Text="{Binding IconText}" HorizontalOptions="Start" FontSize="30" Style="{StaticResource EventaIconStyle}" ></Label>
<Label Text="{Binding Title}" HorizontalOptions="Start" Style="{StaticResource MainHeaderLabel}"></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</navigationdrawer:SfNavigationDrawer.DrawerContentView>
<navigationdrawer:SfNavigationDrawer.DrawerFooterView>
<Grid BackgroundColor="{DynamicResource DynamicContentPageBackgroundColor}" >
<StackLayout VerticalOptions="Center"
`enter code here` HorizontalOptions="Center">
<Label Text="Footer View"/>
</StackLayout>
</Grid>
</navigationdrawer:SfNavigationDrawer.DrawerFooterView></navigationdrawer:SfNavigationDrawer>
Please Let me know if you need more information.
The issue is that I cannot add a ContentPage Object into the ContentView item so could please provide me with some workarounds that I might go for ?
As they have been mentioning in the comments about a content VIEW vs content page, that should work for you with a slight bit of alteration. When I wrote my first Xamarin app, I had several other applications over time that have had nested controls in controls and did not want to find myself in similar.
So, what I did was to create simple user controls with all the stuff I needed on them. So when I was creating a page, I would just add my user control where it physically needed to be placed. This way, should I need to alter the layout of that one user control, it doesn't change the functionality the rest of the way through. Binding was the same because the binding context was the same level, regardless of the VISUAL depth of controls.
So, if you were to create a new Navigation drawer user control of its own context, then slap that in your content page should work for you.
I'm trying to create my first Xamarin forms app. This is my first app using C#, And my first Xamarin app, so I ran with the template that gives me the "burger menu" when I created the project in Visual Studio 2019. I found quick guide on youtube that used Rg.Plugins to invoke the popup. I tried doing the same, And I can see it does work, sort of, since the pop-up page is being rendered using a fade in animation. As soon as it has been rendered, it disapears, And the underlying page is being "grayed out", so it seems like it's active, but I simply can't see it.
My guess is that it has something to do with how my other elements is being drawn or because I used the burger menu template? If anyone have an idea about what's going on, I would be glad :)
I have been using the iOS Simulator to test out the app.
Heres XAML for the page invoking the pop-up:
"Frontpage" that invokes on "Clicked="PopupCPR_clicked":
<?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="EWSMonitor.Views.Monitorering"
xmlns:vm="clr-namespace:EWSMonitor.ViewModels"
Title="{Binding Title}">
<ContentPage.BindingContext>
<vm:MonitoreringModel />
</ContentPage.BindingContext>
<ContentPage.Resources>
<ResourceDictionary>
<Color x:Key="Accent">#2a2b2b</Color>
</ResourceDictionary>
</ContentPage.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<BoxView Color="{StaticResource Primary}" Grid.Column="0" Grid.RowSpan="2"/>
<StackLayout BackgroundColor="{StaticResource Primary}" VerticalOptions="FillAndExpand" HorizontalOptions="Fill">
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center">
<ContentView Padding="0,40,0,40" VerticalOptions="FillAndExpand">
<Image Source="logo.png" VerticalOptions="Center" HeightRequest="100" />
</ContentView>
</StackLayout>
</StackLayout>
<ScrollView Grid.Row="1">
<StackLayout Orientation="Vertical" Padding="30,24,30,24" Spacing="10" WidthRequest="200">
<Label TextColor="{StaticResource Sekundær}" Text="Indtast patient ID (CPR) eller klik på "Monitorer uden patient identifikation"." FontSize="20"/>
<Label TextColor="{StaticResource Sekundær}" Text="Du kan vælge at scanne patientens armbånd eller indtast CPR nummer manuelt! Benyt altid en scanner hvor det er muligt!" FontSize="16" Padding="0,0,0,0"/>
<Label TextColor="{StaticResource Sekundær}" FontSize="12" Padding="0,24,0,0">
<Label.FormattedText>
<FormattedString>
<FormattedString.Spans>
<Span Text="Fremsøg patient: "/>
<!-- <Span Text="https://aka.ms/xamarin-quickstart" FontAttributes="Bold"/> -->
</FormattedString.Spans>
</FormattedString>
</Label.FormattedText>
</Label>
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!--Command="{Binding OpenWebCommand}"-->
<Button Margin="1,1,1,1" x:Name="PopupCPR" Text="Indtast CPR"
Clicked="PopupCPR_clicked"
BackgroundColor="{StaticResource Sekundær}"
TextColor="{StaticResource Primary}"
CornerRadius="5" WidthRequest="150" HeightRequest="30" Grid.Row="0" Grid.Column="0" />
<Button Margin="1,1,1,1" Text="Monitorer uden patientidentifikation"
Command="{Binding OpenWebCommand}"
BackgroundColor="{StaticResource Sekundær}"
TextColor="{StaticResource Primary}"
CornerRadius="5" WidthRequest="150" HeightRequest="30" Grid.Row="0" Grid.Column="1" />
</Grid>
</StackLayout>
</ScrollView>
</Grid>
</ContentPage>
The xaml.cs file:
using Rg.Plugins.Popup.Services;
using System;
using System.ComponentModel;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace EWSMonitor.Views
{
public partial class Monitorering : ContentPage
{
public Monitorering()
{
InitializeComponent();
}
private PopupCPR _PopupCPR;
private async void PopupCPR_clicked(object sender, EventArgs e)
{
_PopupCPR = new PopupCPR();
await PopupNavigation.Instance.PushAsync(_PopupCPR);
}
}
}
Then the popup page xaml:
<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
x:Class="EWSMonitor.Views.PopupCPR"
xmlns:vm="clr-namespace:EWSMonitor.ViewModels"
Title="{Binding Title}">
<pages:PopupPage.Animation>
<animations:ScaleAnimation
PositionIn="Center"
PositionOut="Center"
ScaleIn="1.2"
ScaleOut="0.8"
DurationIn="400"
DurationOut="300"
EasingIn="SinOut"
EasingOut="SinIn"
HasBackgroundAnimation="True"/>
</pages:PopupPage.Animation>
<StackLayout VerticalOptions="Center" HorizontalOptions="FillAndExpand" Padding="20, 20, 20, 20">
<StackLayout BackgroundColor="{StaticResource Sekundær}" Padding="0, 10, 0, 0">
<Label Text="Dette er et fedt pop-up vindue" TextColor="{StaticResource Primary}" FontSize="20" HorizontalOptions="Center"></Label>
<ScrollView>
<StackLayout>
<StackLayout Orientation="Horizontal">
<Entry Placeholder="Test Entry"
HorizontalOptions="FillAndExpand"
BindingContext="{x:Reference Switch}"
IsEnabled="{Binding Path=IsToggled}"
PlaceholderColor="Silver"
Keyboard="Email"
TextColor="Gray"></Entry>
<Switch IsToggled="True" x:Name="Switch"></Switch>
</StackLayout>
<ActivityIndicator Color="Gray" IsRunning="True"></ActivityIndicator>
<Slider Value="0.4" x:Name="Slider"></Slider>
<ProgressBar BindingContext="{x:Reference Slider}" Progress="{Binding Path=Value}"></ProgressBar>
<Button Text="Close" TextColor="{StaticResource Sekundær}" Clicked="OnClose"></Button>
</StackLayout>
</ScrollView>
</StackLayout>
</StackLayout>
<!-- <ContentView x:Name="popupCPRVindue" BackgroundColor="{StaticResource Sekundær}" Padding="10,0" IsVisible="true" AbsoluteLayout.LayoutBounds="0, 0, 1, 1">
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Label Text="Hejsa" />
<Button Text="Luk" TextColor="{StaticResource Sekundær}" Clicked="OnClose"></Button>
</StackLayout>
</ContentView>
-->
<!--
<StackLayout
VerticalOptions="Center"
HorizontalOptions="Center"
Padding="20, 20, 20, 20">
<Label
Text="Dette er en stor fed TEST" TextColor="{StaticResource Sekundær}"/>
<Button Text="Luk" TextColor="{StaticResource Sekundær}" Clicked="OnClose"></Button>
</StackLayout>
-->
</pages:PopupPage>
And the xaml.cs for the popup page:
using Rg.Plugins.Popup.Pages;
using Rg.Plugins.Popup.Services;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace EWSMonitor.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class PopupCPR : PopupPage
{
public PopupCPR()
{
InitializeComponent();
}
private async void OnClose(object sender, EventArgs e)
{
await PopupNavigation.Instance.PopAsync();
}
protected override Task OnAppearingAnimationEndAsync()
{
return Content.FadeTo(0, 5);
}
protected override Task OnAppearingAnimationBeginAsync()
{
return Content.FadeTo(1);
}
}
}
Here is a picture where it possible to see it fade in, before it just disappears:
Popup before it dissapears
you are explicitly setting the Opacity to 0
Content.FadeTo(0, 5);
I am getting the following error when I try to call the expander control in Xamarin forms:
Xamarin.Forms.WeakEventManager..ctor()' is inaccessible from method Xamarin.CommunityToolkit.UI.Views.Expander..ctor()''
I have installed the Xamarin Community Toolkit nuget package and I'm referencing the namespace in my XAML file.
Control wise, I don't think I'm doing anything too crazy - does anybody know how I resolve this error?
My code is as follows:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
xmlns:Services="clr-namespace:My_App.Services"
xmlns:ViewModel="clr-namespace:My_App.ViewModels"
x:Class="My_App.Views.MyPage"
NavigationPage.HasNavigationBar="false"
ControlTemplate="{StaticResource ContentPageTemplate}"
>
.
.
.
<xct:Expander HorizontalOptions="FillAndExpand"
Margin="{StaticResource UniversalMargin}"
BackgroundColor="Gray">
<xct:Expander.Header>
<StackLayout Orientation="Horizontal" Margin="{StaticResource UniversalMargin}">
<Label HorizontalOptions="StartAndExpand"
VerticalOptions="CenterAndExpand"
Text="{Binding Name, Converter={Services:NullToUnnamedDeviceConverter}}" FontSize="Medium" TextColor="White" />
<Label HorizontalOptions="EndAndExpand"
VerticalOptions="CenterAndExpand"
Text="{Binding BondState, Converter={Services:BondedStateToStringConverter}}" FontSize="Medium" TextColor="{StaticResource DarkBorder}" />
</StackLayout>
</xct:Expander.Header>
<xct:Expander.Content>
<Grid HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height = "*" />
<RowDefinition Height = "*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "*" />
<ColumnDefinition Width = "*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
Text="Info text goes here"
TextColor="White"
FontSize="Medium"/>
</Grid>
</xct:Expander.Content>
</xct:Expander>
Solution:
Update Xamarin forms from version 4.8 to 5.0 could solve this issue.
I use the following code to create a xamarin form using visual studio for android when i look into the output lot of spaces between the controls.
Attachment contains output in emulator. Please let me know how to reduce the space between the controls:
.
Code use to create a form:
You can add the specific value for your Height in Grid.(If you do not set it, the default value of the RowDefinition.Height property is *). If you do not want to set the specific Height, please change the value of VerticalOptions from CenterAndExpand to Center(Row 1 and Row 3's Lable).
Here is code.
<ContentPage Title="Home" >
<StackLayout>
<Grid ColumnSpacing="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="200"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
<CarouselView x:Name="Imageslider">
<CarouselView.ItemTemplate>
<DataTemplate>
<Image Source="MonkeyFace.jpg" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Image>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</Grid>
<Label Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Center" TextColor="Black" Text="About Us" VerticalTextAlignment="Center" FontSize="Large" />
<Label Grid.Row="2" Padding="2,0,2,0" HorizontalTextAlignment="Center" VerticalOptions="Center" HorizontalOptions="Center" Text="Surabi Institute of Hotel Management and Fashion Technology recognized by Bharathidhasan University. Surabi Institute of Hotel Management and Fashion Technology was established in the year of 2006. The aim of the Founder is to Provide Hotel Management / Fashion Technology to the poor and Need of the Society">
</Label>
<!-- Place new controls here -->
<Label Grid.Row="3" HorizontalOptions="Center" VerticalOptions="Center" TextColor="Black" Text="Saravana Educational Welfare Trust" />
</Grid>
</StackLayout>
</ContentPage>
Here is running screenshot.