I am trying to make my Stacklayout's background rounded (only right and left bottom sides). I looked for how to search but couldn't make sure. How can I do it?
You can use Xamarin.Forms.PancakeView package:
1- Install it in your shared as in your platform projects (latest version require Xamarin.Forms 4.8.0.1451 and upper).
2- Include the namespace for that package in your xaml:
xmlns:pancake="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
3- Create a PancakeView which will host your controls inside:
<pancake:PancakeView Padding="10"
BackgroundColor="Blue"
CornerRadius="0,0,40,40">
<StackLayout Padding="0"
HorizontalOptions="FillAndExpand">
<Label Text="hello World"
FontSize="Medium"
TextColor="White"
HorizontalOptions="Center"/>
<Button Text="More Details"/>
</StackLayout>
</pancake:PancakeView>
you can play on it shape with the CornerRadius propety.
Edit:
Just wanted to show the usage of Gradients as the question screenshots includes one.
For more details on this package you can consult their Wiki page.
<StackLayout>
<pancake:PancakeView Padding="10"
BackgroundGradientStartPoint="1,0"
BackgroundGradientEndPoint="1,1"
HeightRequest="300"
VerticalOptions="Start"
CornerRadius="0,0,40,40">
<pancake:PancakeView.BackgroundGradientStops>
<pancake:GradientStopCollection>
<pancake:GradientStop Color="#44F3FF"
Offset="0"/>
<pancake:GradientStop Color="#46ACDC"
Offset="0.4"/>
<pancake:GradientStop Color="#0057CB"
Offset="1"/>
</pancake:GradientStopCollection>
</pancake:PancakeView.BackgroundGradientStops>
<StackLayout VerticalOptions="FillAndExpand">
<Label Text="Hello World"
HorizontalOptions="Center"
FontSize="Large"
TextColor="Black"/>
<Button Text="More Details"
BackgroundColor="#0057CB"
BorderWidth="2"
BorderColor="#44F3FF"
VerticalOptions="CenterAndExpand"
CornerRadius="25"/>
</StackLayout>
</pancake:PancakeView>
<Label Text="What are you doing today?"
FontSize="Title"
Margin="30,0,0,0"
TextColor="Black"/>
</StackLayout>
Related
I have a simple Xamarin Form app with a .net standard project and Android Project. I am facing a problem since the very first day of development is that , I am unable to pull Toast and Activity Indicator on my forms. I dont know why? I tried almost all major plugins as well.
Here's my login code where I want to see a toast. I have used UserDialogs, Forms.Plugin etc and now using Plugin.Toast.
protected void BtnLogin_Clicked(object sender, EventArgs e)
{
try
{
CrossToastPopUp.Current.ShowToastMessage("Message"); // Plugin.Toast package
var userName = TxtUserName.Text.Trim();
var password = TxtPassword.Text.Trim();
userController.DoLogin(userName, password);
}
catch (NullReferenceException)
{
DisplayAlert("Mobile # and Password, both are required.", "JCAA", "OK");
}
catch (Exception ex)
{
DisplayAlert(ex.Message, "JCAA", "OK");
Crashes.TrackError(ex);
}
}
UPDATE
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="JCAA.Views.Login" NavigationPage.HasNavigationBar="False" BackgroundColor="#ffffff">
<ContentPage.Content>
<StackLayout HorizontalOptions="Fill" VerticalOptions="StartAndExpand">
<StackLayout VerticalOptions="StartAndExpand">
<Image Source="logo.png" Aspect="AspectFit" HeightRequest="150" Scale="0.8" ></Image>
</StackLayout>
<StackLayout VerticalOptions="StartAndExpand" HeightRequest="70">
<Label Text="JCAA" HorizontalOptions="CenterAndExpand" FontSize="50" VerticalOptions="Start" FontFamily="{StaticResource JostBold}" TextColor="SeaGreen"></Label>
<Label Text="Jh Cul Art Association" HorizontalOptions="CenterAndExpand" FontSize="10" VerticalOptions="Start" FontFamily="{StaticResource JostBold}" TextColor="SeaGreen"></Label>
</StackLayout>
<StackLayout HorizontalOptions="Center" WidthRequest="300" HeightRequest="140" VerticalOptions="StartAndExpand" Margin="30">
<Entry x:Name="TxtUserName" MaxLength="10" Placeholder="Mobile Number" FontFamily="{StaticResource JostReg}" HorizontalTextAlignment="Center" FontSize="30" Keyboard="Numeric" Completed="TxtUserName_Completed"></Entry>
<Button x:Name="BtnLogin" Text="Login" Clicked="BtnLogin_Clicked" BackgroundColor="DarkSlateBlue" TextColor="White" FontFamily="{StaticResource JostReg}" FontSize="20"></Button>
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<StackLayout HorizontalOptions="CenterAndExpand">
<Label Text="New User?? Register your mobile with us." HorizontalTextAlignment="Center" FontSize="11" VerticalTextAlignment="Center" TextColor="DarkSlateBlue" FontFamily="{StaticResource JostReg}"></Label>
<ImageButton Source="signup.png" BackgroundColor="Transparent" HeightRequest="40" Aspect="AspectFit" x:Name="BtnSignUp" Clicked="BtnSignUp_Clicked" ></ImageButton>
</StackLayout>
<StackLayout HorizontalOptions="CenterAndExpand">
<Label Text="Lost Phone!!" HorizontalTextAlignment="Center" FontSize="9" VerticalTextAlignment="Center" TextColor="DarkSlateBlue" FontFamily="{StaticResource JostReg}"></Label>
<ImageButton x:Name="BtnRecoverPassword" BackgroundColor="Transparent" HeightRequest="40" Aspect="AspectFit" Clicked="BtnRecoverPassword_Clicked" Source="passwordreset.png" ></ImageButton>
</StackLayout>
</StackLayout>
<StackLayout Padding="30" HeightRequest="220" HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
<Label FontSize="13" TextColor="DarkSlateBlue" HorizontalOptions="Center" VerticalOptions="EndAndExpand">
<Label.FormattedText>
<FormattedString>
<Span FontFamily="{StaticResource JostThin}" TextColor="Black" FontSize="18">
powered by
</Span>
<Span Text=" a" TextColor="Red" ></Span>
<Span Text="r" TextColor="Black"></Span>
<Span Text=" technosoft" TextColor="Black">
</Span>
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</StackLayout>
</ContentPage.Content>
Above is the xaml of my login page. I am using conventional windows form style of development. No MVVM is involved here.
This toast is in my login page & my toast is coming up when all codes written the BtnLogin_Clicked event executes and the next landing page shows up. Since my login process taks 4-5secs, so in that window , i want to show toast to the user.
this is happening in my entire application. Only display alert is poping up as desired.
Now, I have changed my code to use native toast, via these two ways:
Device.BeginInvokeOnMainThread(()=> DependencyService.Get<IToast>().Show("Toast Message"));
DependencyService.Get<IToast>().Show("Toast Message");
But none of the above is working as expected. toast is coming up but after executions of all blocks of code.
VS2019 and all modules updated.
How do i add logo to center of the Xaml Form, i am starting out Xamarin.
My xaml code looks something like this :
<StackLayout Spacing="20" Padding="50" VerticalOptions="Center">
<Entry Placeholder="Mail id"></Entry>
<Entry Placeholder="Password" IsPassword="True"></Entry>
<Button Text="Log In" TextColor="White" BackgroundColor="##ff77D065"></Button> </StackLayout>
</ContentPage>
This works fine, Now i want to see where i can add the logo to the Xaml form, Its cross platform.
I am new to this.
Edit
Trying out something like this
<StackLayout Spacing="20" Padding="50" VerticalOptions="Center">
VerticalOptions="Center" Padding="10">
<Image Source="screenimg2.png" x:Name="imgLogo" HeightRequest="150" WidthRequest="150"/>
<Entry Placeholder="Mail id"></Entry>
<Entry Placeholder="Password" IsPassword="True"></Entry>
<Button Text="Log In" TextColor="White" BackgroundColor="##ff77D065"></Button>
</StackLayout>
You can use an AbsoluteLayout to contain your "background" logo and then the StackLayout, both centered on screen and then place your UI widgets inside the StackLayout to control the order of their placement:
Example (Logo is set to a 25% opacity):
<AbsoluteLayout BackgroundColor="Black">
<Image Source="logo.png" AbsoluteLayout.LayoutBounds=".5,.5,.75,.75" AbsoluteLayout.LayoutFlags="All" Opacity=".25" />
<StackLayout AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<Label Text="INTRO TO THE WORLD" TextColor="Green" />
<Entry Text="Some Entry Text" BackgroundColor="Green" />
</StackLayout>
</AbsoluteLayout>
re: Xamarin.Forms AbsoluteLayout
If I want to move a button up the screen the same distance as the height of another control on the page I can do this:
this.myControl.TranslateTo(20, - this.myOtherControl.Height);
Is there a way to do this in XAML?
Is your situation like the screenshot below?
Do you want to achieve it like this screenshot?
You could used TranslationY="{ Binding Path=TranslationY ,Source={x:Reference btn1}}" to achieve that.
<StackLayout Orientation="Horizontal" VerticalOptions="Start">
<StackLayout Orientation="Horizontal" HeightRequest="100" Padding="20,0,0,0">
<Button x:Name="btn1" Text="Aqua" HeightRequest="60" WidthRequest="50" TranslationY="23" />
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="100" Padding="20,0,0,0">
<Button HeightRequest="60" WidthRequest="50" Text="llll" TranslationY="{ Binding Path=TranslationY ,Source={x:Reference btn1}}"/>
</StackLayout>
</StackLayout>
I want to make a custom dropdown as below.
once user clicked on the frame I need to make a dropdown as below by expanding frame height.
<Frame CornerRadius="8" BackgroundColor="{StaticResource LightAirColor}" Padding="10,4,10,4">
<TableView>
<TableSection>
<ViewCell Tapped="OnSortingPaneTapped">
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Horizontal">
<Label Text="Arrange By" TextColor="{StaticResource DarkColor}" FontSize="{DynamicResource FontSize16}"/>
<Label Text="Date/Time" TextColor="{StaticResource NavigationPrimary}" FontSize="{DynamicResource FontSize16}"/>
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Episode" TextColor="{StaticResource NavigationPrimary}" FontSize="{DynamicResource FontSize16}"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped = "SortJournalByDate">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Label Text="Date/Time" TextColor="{StaticResource NavigationPrimary}" FontSize="{DynamicResource FontSize16}"/>
</StackLayout>
</ViewCell>
</TableSection>
</TableView>
</Frame>
I tried using heightRequest, forceLayout() but no luck. How can I change the height from code behind when the user click on the frame?
you can use binding for your height request and change it in the view model.
also you can use syncfusion combo box to reach that purpose.
another thing if you couldnt change height you can use visible to invisible it
I'm having an issue (particularly on iOS devices such as iPhone 6s, 7, Ipad Pro etc) where my entry field under border are not expanding horizontally to the end of the page.
Full Code
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Image Source="Logo.png" VerticalOptions="EndAndExpand"/>
<Label Text="Welcome" HorizontalTextAlignment="Center" HorizontalOptions="Center" FontSize="Large" />
<Label Text="I don't have an account - Register" freshEssentials:TappedGestureAttached.Command="{Binding GoToRegisterPageCommand}" TextColor="Accent" FontSize="Medium" HorizontalOptions="Center"/>
<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">
<Entry x:Name="EmailEntry" Text="{Binding Email}" Placeholder="Email" Keyboard="Email">
<Entry.Behaviors>
<behaviours:EmailValidatorBehaviour IsValid="{Binding IsEmailValid, Mode=OneWayToSource}"/>
</Entry.Behaviors>
</Entry>
<Entry x:Name="PasswordEntry" Text="{Binding Password}" Placeholder="Password" IsPassword="True" />
<Label Text="{Binding InstructionText}" HorizontalTextAlignment="Center" FontSize="Large" />
</StackLayout>
<Button Text="Login" Command="{Binding LoginCommand}" VerticalOptions="End"/>
</StackLayout>
The same code displays fine on iPhone 5-5s and all Android devices.
Any ideas? i've tried fiddling with 'fillandexpand' etc on the entrys but nothing seems to be working.
My Xamarin version is 2.3.1.114 (i tried upgrading but was left with an unbuildable project with XAMC errors. can try again if that's what people suggest)
Possibly an issue in the iOS entry renderer?
I've noticed my other entry views also have the same error.
Not extending borders
More broken borders
I ended up finding the problem!
Someone in the project had created a custom renderer for all entrys that I was not aware of, and calculating the Frame width incorrectly.