I am developing an IOS application using Xamarin.Forms,in that application I am showing a popup using Rg.Plugins.Popup. I have tried to change the border radius(Increase) of the popup window but I couldn't achieve it.anyone please help me to accomplish this changes in my app.
Expected Screen
Actual Screen
Popup.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"
x:Class="TestApp.Popup"
xmlns:i18n="clr-namespace:TestApp;assembly=TestApp"
xmlns:local="clr-namespace:TestApp">
<StackLayout VerticalOptions="Center"
HorizontalOptions="FillAndExpand"
Padding="20, 10, 20, 20"
Opacity="0.9">
<Frame BackgroundColor="White"
>
<StackLayout Padding="0, 10, 0, 40" >
<RelativeLayout>
<Label x:Name="congratsText"
Text=""
TextColor="#396BA2"
FontAttributes="Bold"
FontSize="20"
FontFamily="MYRIADPRO-BOLD"
HorizontalTextAlignment="Center"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width, Factor=1}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=1,Constant=0}"
local:CustomFontEffect.FontFileName="MYRIADPRO-BOLD"/>
<Label x:Name="callText"
TextColor="#396BA2"
FontFamily="MYRIADPRO-REGULAR"
FontSize="18"
Margin="10"
HorizontalTextAlignment="Center"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width, Factor=1}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=foundText, Property=Y, Factor=1,Constant=60}"
local:CustomFontEffect.FontFileName="MYRIADPRO-REGULAR" >
<Label.FormattedText>
<FormattedString>
<FormattedString.Spans>
<Span Text="Please call " />
<Span Text="0987654321" FontAttributes="Bold" />
<Span Text="for any help." />
</FormattedString.Spans>
</FormattedString>
</Label.FormattedText>
</Label>
<Button x:Name="OkButton"
BackgroundColor="#9DC96F"
FontFamily="MYRIADPRO-BOLD"
FontAttributes="Bold"
FontSize="20"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.HeightConstraint="40"
Text="Ok"
TextColor="White"
Clicked="ok"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ResendButton, Property=Y, Factor=1,Constant=75}"
local:CustomFontEffect.FontFileName="MYRIADPRO-BOLD"/>
<Button x:Name="LoginButton"
BorderColor="#9DC96F"
BackgroundColor="White"
BorderWidth="2"
FontFamily="MYRIADPRO-BOLD"
FontAttributes="Bold"
FontSize="20"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.HeightConstraint="40"
Text="Cancel"
TextColor="#9DC96F"
Clicked="Cancel"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=OkButton, Property=Y, Factor=1,Constant=55}"
local:CustomFontEffect.FontFileName="MYRIADPRO-BOLD"/>
</RelativeLayout>
</StackLayout>
</Frame>
</StackLayout>
</pages:PopupPage>
I'm creator of this plugin. Plugin doesn't support border radius. It is not duty of plugin. Plugin must shows popup page and only. You must make views and styles themselves. Thank you.
I achieved this successfully by setting the BackgroundColor of the outer StackLayout to Transparent. Then setting the CornerRadius property on the inner Frame
Replaces <Frame BackgroundColor="White">
With <Frame BackgroundColor="White" CornerRadius="40">
Related
I am developing notification count on Toolbar using TitleView. Inside TitleView I have used RelativeLayout which is cropping from top side not showing full count circle Label.
This is my code:
<NavigationPage.TitleView>
<RelativeLayout HorizontalOptions="Fill" BackgroundColor="Transparent">
<Image Source="bell.png" HeightRequest="30" WidthRequest="30" x:Name="yellowBoxView"
RelativeLayout.YConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Height,
Factor=0.018,Constant=0}"
RelativeLayout.XConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=0.85,Constant=0}"/>
<Frame
CornerRadius="20"
Padding="-2"
BackgroundColor="White"
HasShadow="False"
RelativeLayout.YConstraint="{ConstraintExpression
Type=RelativeToView,
Property=Y,
ElementName=yellowBoxView,
Factor=1,Constant=-6}"
RelativeLayout.XConstraint="{ConstraintExpression
Type=RelativeToView,
Property=X,
ElementName=yellowBoxView,
Factor=1,Constant=-8}">
<Label FontSize="10" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Transparent" Text="2"
TextColor="Red" HeightRequest="22" WidthRequest="23" x:Name="labelText"/>
</Frame>
</RelativeLayout>
</NavigationPage.TitleView>
This is my output:
You can try this solution might be it is useful for you
<?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="XamarinTest.View.Page3">
<NavigationPage.TitleView >
<StackLayout BackgroundColor="Transparent">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100*"/>
</Grid.ColumnDefinitions>
<Image Source="notification.png" Grid.Row="0" Grid.Column="0" HorizontalOptions="End" VerticalOptions="Center" HeightRequest="25" WidthRequest="25"/>
<Frame Grid.Row="0" Grid.Column="0" HorizontalOptions="End" VerticalOptions="Center" Margin="0,-25,10,0" CornerRadius="20"
Padding="-2"
BackgroundColor="White"
HasShadow="False">
<Label FontSize="10" HeightRequest="22" WidthRequest="23" Margin="1,1,1,1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Transparent" Text="100"
TextColor="Red" x:Name="labelText"/>
</Frame>
</Grid>
</StackLayout>
</NavigationPage.TitleView>
<ContentPage.Content>
<StackLayout >
<Label Text="Hello" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
I'm Setting up a cross platform App. how do I make the input string be in a correct format
This is a Xamarim.forms project
<?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="TestProjectXamarin.Views.DetailViews.InfoScren1">
<ContentPage.Content>
<StackLayout x:Name="MainLayout">
<RelativeLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<StackLayout x:Name="SubLayout"
Orientation="Vertical"
VerticalOptions="FillAndExpand"
RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=e}"
RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=e}">
<Label Text="Let's see the bla bla bla Over Here" HorizontalOptions="Center" VerticalOptions="Center"/>
</StackLayout>
<ActivityIndicator IsRunning="True" Color="Gray" x:Name="ActivitySpinner"
VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=width, Factor=0.45}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.45}"/>
</RelativeLayout>
</StackLayout>
</ContentPage.Content>
I expected the code to be error free but it tells me Input string was not in a correct format
The error you are getting is because you are assigning Constant=e, and Constant must get a value.
Constant – the value to use as an offset of the value.
Also, in your ActivityIndicator, the property is Width.
Here is your sample working. Adjust the Constant value according to your needs.
<StackLayout x:Name="MainLayout">
<RelativeLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<StackLayout x:Name="SubLayout"
Orientation="Vertical"
VerticalOptions="FillAndExpand"
RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=1}"
RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=1}">
<Label Text="Let's see the bla bla bla Over Here" HorizontalOptions="Center" VerticalOptions="Center"/>
</StackLayout>
<ActivityIndicator IsRunning="True" Color="Gray" x:Name="ActivitySpinner"
VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.45}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.45}"/>
</RelativeLayout>
</StackLayout>
For more information about RelativeLayouts, check the docs
I wrote XAML code for xamarin.forms crossplatform app a Type RelativePanel not found in xmlns error occurs.
<?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:App2"
x:Class="App2.MainPage"
BackgroundColor="White">
<StackLayout >
<Label Text="Browse Files"
VerticalOptions="Start"
HorizontalOptions="CenterAndExpand"
TextColor="Black"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
/>
<RelativePanel HorizontalAlignment="Center"
Margin="0,10,0,0">
<Entry
Text ="LOAD FILES"
x:Name="files"
BackgroundColor="Black">
<Entry.WidthRequest>
<OnPlatform x:TypeArguments="x:Double">
<On Platform ="iOS">80</On>
<On Platform ="Android,Windows">70</On>
</OnPlatform>
</Entry.WidthRequest>
<Entry.HeightRequest>
<OnPlatform x:TypeArguments="x:Double">
<On Platform="iOS">80</On>
<On Platform="Android,Windows">70</On>
</OnPlatform>
</Entry.HeightRequest>
</Entry>
<Button Text="...."
VerticalOptions="End"
HorizontalOptions="End"
x:Name="Button1"/>
</RelativePanel>
<RelativePanel HorizontalAlignment="Center"
Margin="0,10,0,0">
<Button x:Name="processbtn" Content="Process"
Height="35" Width="65" Click="processbtn_Click"/>
<Button x:Name="cancelbtn" Content="Exit"
Height="35" Width="65" Margin="10,0,0,0"
RelativePanel.RightOf="loginbtn" Click="cancelbtn_Click"/>
</RelativePanel>
</StackLayout>
</ContentPage>
Unhandled Exception:
Xamarin.Forms.Xaml.XamlParseException: Position 16:10. Type RelativePanel not found in xmlns http://xamarin.com/schemas/2014/forms occurred
When I remove relativePanel, exception occurs for content and height.
RelativePanel is not a supported Xamarin Forms control.
Instead you should use a RelativeLayout
RelativeLayout can be used to position views on screen relative to the overall layout or two other views.
So, here a little sample:
<RelativeLayout>
<BoxView Color="Gray" HeightRequest="100"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" />
<Button BorderRadius="35" x:Name="imageCircleBack"
BackgroundColor="Maroon" HeightRequest="70" WidthRequest="70" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width, Factor=.5, Constant = -35}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Factor=0, Property=Y, Constant=70}" />
<Button BorderRadius="30" BackgroundColor="Red" HeightRequest="60"
WidthRequest="60" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=imageCircleBack, Property=X, Factor=1,Constant=5}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Factor=0, Property=Y, Constant=75}" />
<Label Text="User Name" FontAttributes="Bold" FontSize="26"
HorizontalTextAlignment="Center" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=140}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" />
<Entry Text="Bio + Hashtags" TextColor="White" BackgroundColor="Maroon"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=180}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" />
<RelativeLayout BackgroundColor="White" RelativeLayout.YConstraint="
{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=220}" HeightRequest="60" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" >
<BoxView BackgroundColor="Black" WidthRequest="50"
HeightRequest="50" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=5}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0, Constant=5}" />
<BoxView BackgroundColor="Maroon" WidthRequest="50"
HeightRequest="50" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=5}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5, Constant=}" />
<Label FontSize="14" TextColor="Black" Text="Accent Color"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=20}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0, Constant=60}" />
<Label FontSize="14" TextColor="Black" Text="Primary Color"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=20}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5, Constant=55}" />
</RelativeLayout>
For more information see: RelativeLayout documentation
I'm trying to add a floating action button to my page, to do so I wrapped my stack layout with a relative layout and add the FAB in the relative layout.
<ContentPage.Content>
<RelativeLayout BackgroundColor="Transparent">
<fab:FloatingActionButton
x:Name="fabBtn"
Source="plus.png"
Size="Normal"
Clicked="Handle_FabClicked"
NormalColor="Green"
RippleColor="Blue"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-75}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-75}" />
<StackLayout
Spacing="10"
Padding="5"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
<Label Text="Latest news/activities" FontSize="Medium" VerticalOptions="Start"/>
<ScrollView VerticalOptions="CenterAndExpand">
<ListView
x:Name="lsvActivities"
HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="3">
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
<Label Text="{Binding title}" VerticalOptions="StartAndExpand"/>
<Label Text="{Binding date}" VerticalOptions="End"/>
</StackLayout>
<StackLayout HorizontalOptions="End" WidthRequest="100" HeightRequest="100" BackgroundColor="Blue">
<Label Text="image here"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
<Label Text="Good Mording" FontSize="Large" VerticalOptions="End" HorizontalOptions="Center"/>
</StackLayout>
</RelativeLayout>
</ContentPage.Content>
But it locks like the StackLayout is out of the boundary of the layout or something.
What is problem? and how I can display both the FAB and the StackLayout, where the floating action button should always be on top of the StackLayout elements
Are you trying to have the StackLayout occupy the entire screen (with the button on top)? If so, this part isn't going to do that:
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
That is placing the top left corner of the StackLayout at the bottom right of the screen.
Per the Xamarin docs:
Unlike AbsoluteLayout, RelativeLayout does not have the concept of the
moving anchor and does not have facilities for positioning elements
relative to the bottom or right edges of the layout.
In other words, AbsoluteLayout will try to adjust for you if you place something at the bottom right corner. RelativeLayout won't.
You probably want the constraints noted above on the StackLayout to be WidthConstraint and HeightConstraint, and set the XConstraint and YConstraint to 0.
And as Sven-Michael says, drop the ScrollView.
EDIT
The XAML should look like:
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Constant=0}"
RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Constant=0}"
I'm working with the ListView in Xamarin Forms. So far, I've displayed some data using a custom DataTemplate. Now, I would like to extend this to display the text inside/ over an image. Something like this:
This is the code, I'm using so far. However, in this case the text is over the image:
<ListView x:Name="MyListView"
ItemsSource="{Binding myData}"
RowHeight="190"
HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Padding="10" Orientation="Vertical">
<Label Text="{Binding Title}"
FontSize="Large"
VerticalOptions="Center"
TextColor="#31659e">
</Label>
<Image Source="http://www.someurl.com/images/image1.jpg" Aspect="AspectFill"></Image>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
How could I achieve the result of the first image?
If anyone has some example/ links/ tips how to do that, that would be very helpful.
Thanks
You can use a RelativeLayout. It would look like this in your data templates ViewCell.View
<RelativeLayout>
<!-- Background -->
<Image Source="http://www.someurl.com/images/image1.jpg" Aspect="AspectFill"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}" />
<!-- Text -->
<StackLayout Padding="10" Orientation="Vertical" VerticalOptions="EndAndExpand"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}" >
<Label Text="{Binding Title}"
FontSize="Large"
TextColor="#31659e">
</Label>
<Label Text="{Binding SubTitle}"
TextColor="#31659e">
</Label>
</StackLayout>
</RelativeLayout>
This stretches the image and the stacklayout to the same height and aligns the content of the StackLayout at the botttom.