In line 1, my axml file reports the error Sequence contains no elements ...
<?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:my_namespace"
x:Class="my_class_name"
Title="Login"
NavigationPage.HasNavigationBar="false">
<ContentPage.Content>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center">
<ContentView Padding="0,40,0,40" VerticalOptions="FillAndExpand">
<Image Source="xamarin_logo.png" VerticalOptions="Center" HeightRequest="64" />
</ContentView>
</StackLayout>
<StackLayout Spacing="10" Padding="20" VerticalOptions="Center">
<Entry x:Name="companyNameEntry" Placeholder="Nome Società " Text="TERMINALINI" />
<Entry x:Name="usernameEntry" Placeholder="ID Utente" Text="manager" />
<Entry x:Name="passwordEntry" Placeholder="Password" IsPassword="true" Text="XXX" />
<Button Text="Login" TextColor="White" BackgroundColor="#77D065" Clicked="OnLoginButtonClicked" />
<Label x:Name="messageLabel" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
I tried what the error meant but I do not understand it ... what did I do wrong?
A ContentPage's Content property can only contain a single child. You have two StackLayouts as direct children of Content. They need to be enclosed in a single layout container.
Related
I have to opacify (make semi-transparent) the background image with a colored veil, I tried adding a frame but I don't get the desired effect`
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:viewmodels="clr-namespace:GET_SOUND_V2.ViewModels" x:DataType="viewmodels:LoginViewModel"
mc:Ignorable="d"
x:Class="GET_SOUND_V2.Views.LoginPage"
BackgroundImage="maco.jpg">
<ContentPage.Content>
<Frame BorderColor="Transparent" Opacity="0.7">
<Frame.Background>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,0">
<GradientStop Color="#1d57a8"
Offset="0.1"/>
<GradientStop Color="#1d57a8"
Offset="1.0"/>
</LinearGradientBrush>
</Frame.Background>
<StackLayout Orientation="Vertical" Padding="30" Spacing="40">
<BoxView HeightRequest="30"/>
<StackLayout Orientation="Vertical">
<Entry x:Name="txtUserName" Text="{Binding UserName}" HorizontalTextAlignment="Center" Placeholder="UserName"
PlaceholderColor="White" HeightRequest="40"
Keyboard="Email"
TextColor="White"
Focused="BiometricCredentials" />
<Entry x:Name="txtPassword" Text="{Binding Password}" HorizontalTextAlignment="Center" Placeholder="Password"
PlaceholderColor="White" HeightRequest="40"
IsPassword="True"
TextColor="White"/>
</StackLayout>
<Button Command="{Binding SubmitCommand}" Text="Accedi" TextColor="White" CornerRadius="50"
FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand"
Margin="0,0,0,150" BackgroundColor="#EF7F1A" />
</StackLayout>
</Frame>
</ContentPage.Content>
</ContentPage>
I would like the elements, however, not to be affected by the opacity value (still be fully opaque), any advice on how I could do?
One approach is to "overlay" two elements over each other, using a single-cell Grid.
The "underneath" item is the image (with opacity applied).
The "top" item is the rest of your layout.
.
<Grid>
<Frame ...>
...
</Frame>
<StackLayout ...>
...
</StackLayout>
</Grid>
Notice that StackLayout is no longer inside Frame. Because no Grid.Row or Grid.Column is specified on these two elements, they both are at Row=0, Column=0. Hence, overlaid one on top of the other.
May need to add properties to <Grid> element, to get desired size, etc. But start with what I show, see what happens.
I'm trying to get the string value of a selected item from the search bar. If to select Apple, then to get as string the value "Apple".
I have tried to use SearchButtonPressed but is not working at all. This is my code for the search bar.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="Sim.Views.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="Main Page">
<ContentPage.Content>
<Grid BackgroundColor="DarkGray">
<StackLayout Margin="10"
VerticalOptions="Start"
HorizontalOptions="Start">
<SearchBar x:Name="searchBar"
HorizontalOptions="Fill"
VerticalOptions="StartAndExpand"
Placeholder="Search Access Points..."
CancelButtonColor="Orange"
PlaceholderColor="Orange"
TextTransform="Lowercase"
HorizontalTextAlignment="Start"
TextChanged="OnTextChanged"
/>
<Label Text="Type in the searchbox."
HorizontalOptions="Fill"
VerticalOptions="CenterAndExpand" />
<ListView x:Name="searchResults"
HorizontalOptions="Fill"
VerticalOptions="CenterAndExpand"
IsVisible="False"/>
</StackLayout>
</Grid>
</ContentPage.Content>
</ContentPage>
I solved this issue by adding ItemTapped
<ListView x:Name="searchResults"
HorizontalOptions="Fill"
VerticalOptions="CenterAndExpand"
ItemTapped ="GetTappedItem"/>
void GetTappedItem(object sender, ItemTappedEventArgs e)
{
var details = e.Item;
}
Thank you #Jason.
I have 2 different values for the Left Margin and the Right Margin for my application. (Let say 27 and 64)
Is it possible to get these values from the ResourcesDictionaty and set them in my XAML.
For example
<StackLayout Margin="{Left1},0,{Right1},0">
</StackLayout>
You can specify them as double values in ResourceDictionary and refer to them in other resources/styles or at element level itself.
Sample resource-dictionary
<ResourceDictionary>
<!-- namespace declaration
xmlns:sys="clr-namespace:System;assembly=System.Runtime" -->
<sys:Double x:Key="leftMargin">20</sys:Double>
<sys:Double x:Key="rightMargin">30</sys:Double>
<Thickness x:Key="MyMargin1"
Left="{StaticResource leftMargin}"
Right="{StaticResource rightMargin}"
Top="20"
Bottom="30" />
<Thickness x:Key="MyMargin2"
Left="{StaticResource leftMargin}"
Right="{StaticResource rightMargin}"
Top="5"
Bottom="15" />
</ResourceDictionary>
Sample usage
<StackLayout>
<BoxView BackgroundColor="Blue" Margin="{StaticResource MyMargin1}" />
<BoxView HeightRequest="1" BackgroundColor="Black" />
<BoxView BackgroundColor="Red" Margin="{StaticResource MyMargin2}" />
<BoxView HeightRequest="1" BackgroundColor="Black" />
<BoxView BackgroundColor="Yellow">
<BoxView.Margin>
<Thickness
Left="{StaticResource leftMargin}"
Right="{StaticResource rightMargin}"
Top="30"
Bottom="10" />
</BoxView.Margin>
</BoxView>
<BoxView HeightRequest="1" BackgroundColor="Black" />
</StackLayout>
I don't think doing this for individual values will work. You can however bind the entire Margin to a value in a resource dictionary as follows:
<ResourceDictionary>
<Thickness x:Key="MyMargin">27,0,64,0</Thickness>
</ResourceDictionary>
<StackLayout Margin="{StaticResource MyMargin}">
</StackLayout>
I am trying to get the similar popup as below on Androd, see the X close button is nicely lays on top of the frame. I copied code from the github to test but actual code is also not working. half of the button is always behind the frame. I thought that first added control goes below and 2nd one comes above if their position lays on each other. is there any exception here? whatever I tried i couldnt set button obove the frame. Can somebody sheds some light on usage of absolutelayout here?
<ScrollView
HorizontalOptions="Center"
VerticalOptions="Center">
<AbsoluteLayout>
<Frame
x:Name="FrameContainer"
Margin="15"
HorizontalOptions="Center"
BackgroundColor="White">
<StackLayout
IsClippedToBounds="True"
Padding="10, 5"
Spacing="3">
<Image
HorizontalOptions="Center"
x:Name="OctocatImage"
Margin="10"
HeightRequest="150"
WidthRequest="150">
<Image.Source>
<OnPlatform
x:TypeArguments="ImageSource"
Android="github_octocat.png"
iOS="github_octocat.png"
WinPhone="Assets/github_octocat.png"/>
</Image.Source>
</Image>
<Entry
HorizontalOptions="Center"
x:Name="UsernameEntry"
Style="{StaticResource EntryStyle}"
Placeholder="Username" />
<Entry
HorizontalOptions="Center"
x:Name="PasswordEntry"
Style="{StaticResource EntryStyle}"
Placeholder="Password"
IsPassword="True"/>
<Button
Margin="10, 5"
BackgroundColor="#7dbbe6"
HorizontalOptions="Fill"
Clicked="OnLogin"
x:Name="LoginButton"
Text="Login">
<Button.HeightRequest>
<OnPlatform x:TypeArguments="x:Double" Android="50" iOS="30" WinPhone="30"/>
</Button.HeightRequest>
</Button>
</StackLayout>
</Frame>
<ContentView
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="1, 0, -1, -1">
<ContentView.GestureRecognizers>
<TapGestureRecognizer Tapped="OnCloseButtonTapped"/>
</ContentView.GestureRecognizers>
<Image
x:Name="CloseImage"
HeightRequest="30"
WidthRequest="30">
<Image.Source>
<OnPlatform
x:TypeArguments="ImageSource"
Android="close_circle_button.png"
iOS="close_circle_button.png"
WinPhone="Assets/close_circle_button.png"/>
</Image.Source>
</Image>
</ContentView>
</AbsoluteLayout>
</ScrollView>
I just tried with a fresh project and below is how it looks like for me. Close button is always behind the frame. here you can find repro test project
Removed Frame and moved some attributes onto StackLayout. Related bug
https://bugzilla.xamarin.com/show_bug.cgi?id=55744
<?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:test"
x:Class="test.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="EntryStyle" TargetType="Entry">
<Setter Property="PlaceholderColor" Value="#9cdaf1"/>
<Setter Property="TextColor" Value="#7dbbe6"/>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<ScrollView
HorizontalOptions="Center"
VerticalOptions="Center">
<AbsoluteLayout>
<StackLayout Margin="15" BackgroundColor="White"
IsClippedToBounds="True"
Padding="10, 5"
Spacing="3">
<Image
HorizontalOptions="Center"
x:Name="OctocatImage"
Margin="10"
HeightRequest="150"
WidthRequest="150">
<Image.Source>
<OnPlatform
x:TypeArguments="ImageSource"
Android="icon.png"
/>
</Image.Source>
</Image>
<Entry
HorizontalOptions="Center"
x:Name="UsernameEntry"
Style="{StaticResource EntryStyle}"
Placeholder="Username" />
<Entry
HorizontalOptions="Center"
x:Name="PasswordEntry"
Style="{StaticResource EntryStyle}"
Placeholder="Password"
IsPassword="True"/>
<Button
Margin="10, 5"
BackgroundColor="#7dbbe6"
HorizontalOptions="Fill"
x:Name="LoginButton"
Text="Login">
<Button.HeightRequest>
<OnPlatform x:TypeArguments="x:Double" Android="50" iOS="30" WinPhone="30"/>
</Button.HeightRequest>
</Button>
</StackLayout>
<ContentView
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="1, 0, -1, -1">
<Image
x:Name="CloseImage"
HeightRequest="30"
WidthRequest="30">
<Image.Source>
<OnPlatform
x:TypeArguments="ImageSource"
Android="close_circle_button.png"
/>
</Image.Source>
</Image>
</ContentView>
</AbsoluteLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>
It's a bug, set HasShadow="False" on your Frame and it should work.
I have 3 tabs which base on permission.
This permission base on user level.
If user has higher level, he or she can have access the 3 tabs ( this means he or she can click all the tab)
Problem:
How do I programmatically set the tab3, say the user has no access to Tab3, to be dimmed or unclickabe?
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="myApp.View.MainPage2">
<ContentPage Title ="Tab1" Icon="itemIcon1" WidthRequest="200" BackgroundColor="White">
<ContentPage.Content>
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Label Text="Welcome, Test1"> </Label>
</StackLayout>
</ContentPage.Content>
</ContentPage>
<ContentPage Title ="Tab2" Icon="itemIcon2" WidthRequest="200" BackgroundColor="White">
<ContentPage.Content>
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Label Text="Welcome, Test2"> </Label>
</StackLayout>
</ContentPage.Content>
</ContentPage>
<ContentPage Title ="Tab3" Icon="itemIcon3" WidthRequest="200">
<ContentPage.Content>
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Label Text="Welcome, Test3"> </Label>
</StackLayout>
</ContentPage.Content>
</ContentPage>
</TabbedPage>
Thanks