xamarin master page bind content page - c#

I'm using xamarin cross-platform.
I want to add same the "floating menu item" in the every .xaml page.(home/logout/view/ account)
I have added below master page.
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ABCAPP.Views.MasterDetailPage1"
xmlns:pages="clr-namespace:ABCAPP.Views">
<MasterDetailPage.Master>
<pages:MasterDetailPage1Master x:Name="MasterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<pages:MasterDetailPage1Detail>
<StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="Start">
<!--top controls-->
</StackLayout>
<StackLayout VerticalOptions="CenterAndExpand">
<!--middle controls-->
</StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="End">
<Button Text="A" FontAttributes="Bold" BackgroundColor="MediumSlateBlue" BorderRadius="50" TextColor="White"></Button>
<Button Text="B" FontAttributes="Bold" BackgroundColor="MediumSlateBlue" TextColor="White"></Button>
<!--bottom controls-->
</StackLayout>
</StackLayout>
</pages:MasterDetailPage1Detail>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
How do I add this layout to my other .xaml Content Pages ?
This is my Content Pages
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ABCAPP.Views.Confirmed">
<ContentPage.Content>
<ScrollView>
<StackLayout Spacing="20" Padding="15" BackgroundColor="Orange">
<Label Text="Thank you!" FontSize="50" FontAttributes="Bold" TextColor="White" HorizontalOptions="Center" />
<Label Text=" confirmed." FontSize="30" FontAttributes="Bold" TextColor="White" HorizontalOptions="Center" />
<Label x:Name="lblMsg" TextColor="Red" IsVisible="False" ></Label>
<Button Text="ADD " Clicked="NewAttend_Clicked" FontAttributes="Bold" BackgroundColor="MediumSlateBlue" BorderRadius="5" TextColor="White"></Button>
<Button Text="RETURN " Clicked="List_Clicked" FontAttributes="Bold" BackgroundColor="MediumSlateBlue" BorderRadius="5" TextColor="White"></Button>
<Image Source="drawable/icon" ></Image>
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>

Related

Error:The unintended end of the file. The following elements are not closed: ContentPage., line 31, position 3

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:vm="clr-namespace:App1.ViewModel"
x:Class="App1.View.LoginPage" BackgroundColor="#f0f2f5">
<ContentPage.BindingContext>
<vm:LoginViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout>
<Image Source="XamarinLogo.png" ></Image>
<Frame BackgroundColor="White" CornerRadius="20" WidthRequest="396" HeightRequest="430" VerticalOptions="Center" HorizontalOptions="Center" >
<StackLayout>
<Label Text="Вход на Lockdown" TextColor="Black" HorizontalOptions="Center" FontSize="Title" Margin="0,30,0,10" />
<Entry Placeholder="Логин" x:Name="login" Text="{Binding Login}" />
<Entry Placeholder="Пароль" x:Name ="password" Text="{Binding Password}" IsPassword="True"/>
<Label x:Name="LoginMessageLabel" Text="{Binding LoginMessage,Mode=OneWay}" IsVisible="{Binding TurnLoginMessage,Mode=OneWay}" Margin="10,0,0,0" TextColor="Red"></Label>
<Button x:Name="loginButton" Text="Вход" TextColor="White" BorderRadius="6" BackgroundColor="#1877F2" Margin="10,10,10,10"
Command="{Binding cmdLogin}">
</Button>
<Button x:Name="createAccount" Text="Создать новый аккаунт" TextColor="White" BorderRadius="6" BackgroundColor="#42B72A" Margin="10,10,10,10" Command="{Binding cmdCreateAccount}"/>
<Label Text="Забыли пароль?" TextColor="#1877F2" HorizontalOptions="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding cmdForgotPassword}"/>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</Frame>
</StackLayout></ContentPage.Content>
what is the problem?This is my first time working with xamarin, I don't understand what the error is.What is not closed if I closed it?
you need to close every control you create. you forget to close ContentPage
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:vm="clr-namespace:App1.ViewModel"
x:Class="App1.View.LoginPage" BackgroundColor="#f0f2f5">
<ContentPage.BindingContext>
<vm:LoginViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout>
<Image Source="XamarinLogo.png" ></Image>
<Frame BackgroundColor="White" CornerRadius="20" WidthRequest="396" HeightRequest="430" VerticalOptions="Center" HorizontalOptions="Center" >
<StackLayout>
<Label Text="Вход на Lockdown" TextColor="Black" HorizontalOptions="Center" FontSize="Title" Margin="0,30,0,10" />
<Entry Placeholder="Логин" x:Name="login" Text="{Binding Login}" />
<Entry Placeholder="Пароль" x:Name ="password" Text="{Binding Password}" IsPassword="True"/>
<Label x:Name="LoginMessageLabel" Text="{Binding LoginMessage,Mode=OneWay}" IsVisible="{Binding TurnLoginMessage,Mode=OneWay}" Margin="10,0,0,0" TextColor="Red"></Label>
<Button x:Name="loginButton" Text="Вход" TextColor="White" BorderRadius="6" BackgroundColor="#1877F2" Margin="10,10,10,10"
Command="{Binding cmdLogin}">
</Button>
<Button x:Name="createAccount" Text="Создать новый аккаунт" TextColor="White" BorderRadius="6" BackgroundColor="#42B72A" Margin="10,10,10,10" Command="{Binding cmdCreateAccount}"/>
<Label Text="Забыли пароль?" TextColor="#1877F2" HorizontalOptions="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding cmdForgotPassword}"/>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</Frame>
</StackLayout></ContentPage.Content>
</ContentPage>

FFImageLoading CircleTransformation not working with transparent image

<StackLayout Grid.Row="1" Grid.Column="0" BackgroundColor="#57bcec" Padding="5" Orientation="Horizontal">
<ContentView Padding="5,0,0,0">
<ffimageloading:CachedImage DownsampleToViewSize="True" HorizontalOptions="Center" VerticalOptions="Center"
ErrorPlaceholder="{Binding PlaceholderImage}" LoadingPlaceholder="{Binding PlaceholderImage}"
Source="{Binding UserImage, Converter={Helper:ImageSourceConverter}}"
Aspect="AspectFit">
<ffimageloading:CachedImage.WidthRequest>
<OnPlatform x:TypeArguments="x:Double" iOS="40" Android="40" WinPhone="40" />
</ffimageloading:CachedImage.WidthRequest>
<ffimageloading:CachedImage.HeightRequest>
<OnPlatform x:TypeArguments="x:Double" iOS="40" Android="40" WinPhone="40" />
</ffimageloading:CachedImage.HeightRequest>
<ffimageloading:CachedImage.Transformations>
<fftransformations:CircleTransformation BorderSize="3" BorderHexColor="#34C04E"/>
</ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>
</ContentView>
<ContentView Padding="10,0,0,0" VerticalOptions="FillAndExpand">
<Label Text="Alan Parker" FontSize="14" FontFamily="{StaticResource Lato_Regular}" TextColor="White" VerticalOptions="Center" />
</ContentView>
</StackLayout>
Image URL: https://images.app.goo.gl/ZLSN5x9VNeebTD6z8
Output: Notice that image get cut-off from the corners
Normal Image:
I found one way to do this.
I have used: https://github.com/daniel-luberda/DLToolkit.Forms.Controls/tree/master/ImageCropView
<imgcrop:ImageCropView HeightRequest="50" WidthRequest="50" x:Name="cropView"
Source="https://anothercommonman.files.wordpress.com/2011/10/gandhiji.jpg">
<imgcrop:ImageCropView.PreviewTransformations>
<ffTransformations:CircleTransformation />
</imgcrop:ImageCropView.PreviewTransformations>
</imgcrop:ImageCropView>

Label Is Never Showing

I am attempting to add a label above my button but the label never shows. This is the code xaml that I am using. What is it that keeps the label from being displayed?
<Frame HasShadow="False">
<StackLayout Orientation="Vertical" Spacing="10">
<Label x:Name="registererror" Text="Error, please verify all fields have valid input" TextColor="Red" />
</StackLayout>
<Button Command="{Binding SubmitCommand}" Text="Register" TextColor="White"
FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand"
BackgroundColor="#088da5" Clicked="OnRegisterTap" />
</Frame>
a Frame can only have a single child. To contain multiple children you must use a layout container. Your Button is not enclosed in the StackLayout.
<Frame HasShadow="False">
<StackLayout Orientation="Vertical" Spacing="10">
<Label x:Name="registererror" Text="Error, please verify all fields have valid input" TextColor="Red" />
<Button Command="{Binding SubmitCommand}" Text="Register" TextColor="White"
FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand"
BackgroundColor="#088da5" Clicked="OnRegisterTap" />
</StackLayout>
</Frame>

Add/remove tab in TabbedPage bar and change app:tabMode programmatically

In Xamarin, I'm having a TabbedPage which sometimes should be displayed and sometimes not.
<ContentPage x:Name="tab_Voeding5" IsEnabled="False">
<StackLayout>
<Label Text="Voeding pagina 5"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
I tried to disable it at default and enable it like this:
if(Application.Current.Properties["txt_voeding5"].ToString() != "")
{
tab_Voeding5.IsEnabled = true;
tab_Voeding5.Title = Application.Current.Properties["txt_voeding5"].ToString();
}
However, this only disables and enables the title of the tabbed page in the navigation bar, but I want it completely removed/added. How do I do this?
Also, in Tabbar.axml I want app:tabMode="scrollable" only at page A. I want it to be default like app:tabMode="fixed". How do I change app:tabMode programmatically in the page's CS file?
EDIT:
Xaml file
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TimeToSport.Views.VoedingPage"
Title="Voeding">
<!-- Voeding 1 -->
<ContentPage x:Name="tab_Voeding1">
<StackLayout>
<Label Text="Voeding pagina 1"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
<!-- Voeding 2 -->
<ContentPage x:Name="tab_Voeding2">
<StackLayout>
<Label Text="Voeding pagina 2"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
<!-- Voeding 3 -->
<ContentPage x:Name="tab_Voeding3">
<StackLayout>
<Label Text="Voeding pagina 3"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
<!-- Voeding 4 -->
<ContentPage x:Name="tab_Voeding4">
<StackLayout>
<Label Text="Voeding pagina 4"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
<!-- Voeding 5 -->
<ContentPage x:Name="tab_Voeding5" IsEnabled="False">
<StackLayout>
<Label Text="Voeding pagina 5"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
</TabbedPage>

XAML code to put button in bottom right corner

I'm trying to get my floating action button in the bottom left corner of my application.
Currently it looks like this:
And I want it to look like this:
My XAML code:
<?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:xxx;assembly=xxx"
x:Class="xxx.xxx.xxx.xxxx">
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<StackLayout Orientation="Vertical" VerticalOptions="StartAndExpand">
<StackLayout HorizontalOptions="CenterAndExpand" Margin="0,15,0,0" Orientation="Vertical">
<!--<local:CustomImage Source="logo.png" HeightRequest="100" WidthRequest="100" HorizontalOptions="Center" />-->
<local:CustomImageButton WidthRequest="150" Image="Foto.png" ClassId="Eigendommen" x:Name="buttonFoto" HeightRequest="150"/>
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="CenterAndExpand" Margin="10,0,0,0" x:Name="MainStack" >
<BoxView BackgroundColor="#F15A35" HeightRequest="1" WidthRequest="400" Margin="0,-2,0,5" />
<Label Text="Toegevoegd:" FontSize="Medium" FontAttributes="Bold" />
<StackLayout Orientation="Horizontal">
<StackLayout Orientation="Vertical" IsVisible="False" Margin="10,0,10,0" x:Name="hideImage1">
<local:CustomImage HeightRequest="100" WidthRequest="100"/>
<StackLayout Orientation="Horizontal">
<Label Text="Verwijderen" FontSize="Small" VerticalTextAlignment="Center" />
<local:CustomImageButton Image="close_zwart.png" BackgroundColor="White" Clicked="Hide_Image_Click" HeightRequest="40" WidthRequest="40" />
</StackLayout>
</StackLayout>
<StackLayout Orientation="Vertical" Margin="10,0,10,0" x:Name="hideImage2" IsVisible="False">
<local:CustomImage HeightRequest="100" WidthRequest="100"/>
<StackLayout Orientation="Horizontal">
<Label Text="Verwijderen" FontSize="Small" VerticalTextAlignment="Center" />
<local:CustomImageButton Image="close_zwart.png" Clicked="Hide_Image_Click" BackgroundColor="White" HeightRequest="40" WidthRequest="40" />
</StackLayout>
</StackLayout>
<StackLayout Orientation="Vertical" Margin="10,0,10,0" x:Name="hideImage3" IsVisible="False">
<local:CustomImage HeightRequest="100" WidthRequest="100"/>
<StackLayout Orientation="Horizontal">
<Label Text="Verwijderen" FontSize="Small" VerticalTextAlignment="Center" />
<local:CustomImageButton Image="close_zwart.png" Clicked="Hide_Image_Click" BackgroundColor="White" HeightRequest="40" WidthRequest="40" />
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
<StackLayout
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="1,1,0.25,0.25">
<StackLayout HorizontalOptions="End" VerticalOptions="End" Margin="0,0,0,0">
<local:FloatingActionButton Image="checktaak.png" x:Name="insertTaak" HeightRequest="60" WidthRequest="60" />
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ContentPage>
You can find the my floating action button at the bottom of all the code ( the last stacklayout). if you need more code let me know in the comments.
Edit I want the button always there even if it overlaps a other stacklayout
Assuming FloatingActionButton inherits from Button and the AbsoluteLayout is the child of a ContentPage and the expected margin for the floating button as (15,15) from right and bottom borders,
<AbsoluteLayout>
<!-- SOME OTHER ELEMENTS -->
<local:FloatingActionButton Image="checktaak.png"
CornerRadius="30"
WidthRequest="60" HeightRequest="60"
AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="1,1,75,75"
HorizontalOptions="Center" VerticalOptions="Center" />
</AbsoluteLayout>
To NOTE,
Use AbsoluteLayout.LayoutFlags="PositionProportional" to make
only the positioning proportional
Then for AbsoluteLayout.LayoutBounds set X and Y, 1 and 1 to
push it to the bottom right corner. The Width and Height is set
to 75 and 75 to position the element 75 points left from the layout's
right border and 75 points top from the layout's bottom border.
The 75 is calculated as,
60(element width/height request) + 15(right/bottom margin) = 75
Since the WidthRequest and HeightRequest is 60, half of it 30
will be the CornerRadius of the element.
Found it!
Just had to tweak the layoutbounds a little, I didn't knew I could go over 1.
This is my new layoutbound for the stacklayout that includes the fab:
AbsoluteLayout.LayoutBounds="0.94,1.18,0.5,0.25"

Categories