I have used Xamrin with vs 2017 professional.
I want to use a floating text view in the cross-platform application.
I have used below link but it not describe how can get a text from it.
[link] https://github.com/XamFormsExtended/Xfx.Controls
Main.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xfx="clr-namespace:Xfx;assembly=Xfx.Controls"
x:Class="Reports_Rpt.Signup">
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="10" BackgroundColor="#4B8CA8">
<Image Source="iconXamagon.png">
</Image>
</StackLayout>
</NavigationPage.TitleView>
<ContentPage.Content>
<StackLayout Padding="2,2,2,2" BackgroundColor="White">
<StackLayout Orientation="Horizontal" VerticalOptions="Start" HorizontalOptions="FillAndExpand">
<xfx:XfxEntry
Placeholder="Enter your name"
Text="{Binding Name}"
ErrorText="{Binding NameErrorText}" />
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
You have bound the Text property to Name, so the Name property of your model should contain the text.
Alternatively, you can assign a name to the control and reference it that way
<xfx:XfxEntry x:Name="myEntry" Placeholder="Enter your name"
Text="{Binding Name}"
ErrorText="{Binding NameErrorText}" />
then in your code-behind
var value = myEntry.Text;
Related
Every time i try to implement <maps:Map IsShowingUser="True" x:Name="Mapa" /> in my mainPage show's "The property 'Content' is set more than once". Every time I put in this place gives me 'The property 'Content' is set more than once'.
If anyone could explain in simple terms where the Content property is set that would be most helpful.
<ContentPage xmlns:maps="clr-namespace:Xamarin.Forms.GoogleMaps;assembly=Xamarin.Forms.GoogleMaps"
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"
mc:Ignorable="d"
x:Class="Pap.MainPage">
<maps:Map IsShowingUser="True" x:Name="Mapa" />
<AbsoluteLayout VerticalOptions="FillAndExpand" x:Name="Main">
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" x:Name="main" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Image Source="C:\Users\david\Desktop\Pap\Pap\Pap.Android\Resources\drawable\User.png" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Image>
</StackLayout>
<StackLayout x:Name="body" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All"
Orientation="Vertical" VerticalOptions="FillAndExpand" Spacing="0">
<!--<StackLayout VerticalOptions="End" BackgroundColor="Red">
<Label Text="Titulo" />
</StackLayout>-->
<StackLayout VerticalOptions="FillAndExpand">
<Label Text="Slider-Example" HorizontalOptions="Center" VerticalOptions="Center"/>
<Image Source="C:\Users\david\Desktop\Pap\Pap\Pap.Android\Resources\drawable\User.png" Aspect="AspectFill"></Image>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="Handle_Tapped">
</TapGestureRecognizer>
</StackLayout.GestureRecognizers>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ContentPage>
ContentPage has an implicit Content property that can contain a single child element. If you want to include more than one piece of content on your page, you need to use a Layout container, like a StackLayout
<ContentPage ... >
<StackLayout>
... multiple children can go here
</StackLayout>
</ContentPage>
if you were using C# instead of XAML, you would explicitly set the Content property
myPage.Content = new StackLayout{ ... };
I am trying to bind my Command property to the Command in my MasterDetailPage view model. I tried defining the name property for the master page and setting that as the reference source, but it does not seem to bind to the viewmodel. For context, the List MenuItems is a property in the same Viewmodel and the Title binds just fine. I believe I am not setting the Source for the command correctly, but not sure how to fix it. Also, I am using Prism, so the viewmodel is mapped in app.xaml already.
<MasterDetailPage
x:Class="MasterDetailPrism.Views.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="http://prismlibrary.com"
prism:ViewModelLocator.AutowireViewModel="True"
x:Name="menuMasterPage">
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="225" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" BackgroundColor="Aqua" />
<StackLayout Grid.Row="1" BindableLayout.ItemsSource="{Binding MenuItems}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout>
<Button
Command="{Binding NavigateAsync, Source={x:Reference menuMasterPage}}"
CommandParameter="{Binding NavPath}"
Text="{Binding Title}" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</Grid>
</ContentPage>
</MasterDetailPage.Master>
I was able to figure it out - I had to name the StackLayout, and then bind to the root of that as the source, not the contentpage or masterpage. In the code below, ItemsList.
<StackLayout Grid.Row="1" BindableLayout.ItemsSource="{Binding MenuItems}" x:Name="ItemsList">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout>
<Button
Command="{Binding BindingContext.NavigateAsync, Source={x:Reference ItemsList}}"
CommandParameter="{Binding NavPath}"
Text="{Binding Title}" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
I want to display title, text content ( approx 300 characters) from database in an Updates.xaml page. The title, text content should display in a rectangle blocks. When ever user submit a new update the latest one should automatically display on top of the page and each should be properly spaced between one another.
<?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"
x:Class="soccerapp.UpdatesNews" BackgroundColor="#aa49e3" Title="Updates"
mc:Ignorable="d">
<StackLayout>
<!-- Place new controls here -->
<Button x:Name="plusButton"
Text="+"
WidthRequest="60"
HeightRequest="60"
CornerRadius ="30"
VerticalOptions="Start"
HorizontalOptions="EndAndExpand"
Clicked="OnPlusButtonClicked" />
<Label
HorizontalOptions="Center"
Text="News!"
VerticalOptions="CenterAndExpand" />
<ListView x:Name="LstTest" ItemTapped="LstTest_ItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="{Binding .}" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
<ViewCell>
<Frame>
<StackLayout>
<Label Text="{Binding Title}" />
<Label Text="{Binding Text}" />
<Label Text="{Binding Content}" />
</StackLayout>
</Frame>
</ViewCell>
In Xamarin.Android it has a class named ViewPager to support "Gestural navigation allows the user to swipe left and right to step through pages of data." (https://learn.microsoft.com/en-us/xamarin/android/user-interface/controls/view-pager/)
But my task is write cross-platform codes for both Android & iOS (without rewrite new code for this gesture). With Xamarin.Form does any library support this ? I have read about Xamarin.Form carousel, but it seem used for slideshow, not appropriate for news list.
I think TabbedPage is more suitable for you. tabbedPage support the Gestural navigation allows the user to swipe left and right to step through pages of data, just set the different pages of data in different tabs.
Here is running GIF.
You can add this Tabbedpage like following code.
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TabbedPageDemo;assembly=TabbedPageDemo"
x:Class="TabbedPageDemo.TabbedPageDemoPage">
<TabbedPage.Resources>
<ResourceDictionary>
<local:NonNullToBooleanConverter x:Key="booleanConverter" />
</ResourceDictionary>
</TabbedPage.Resources>
<TabbedPage.ItemTemplate>
<DataTemplate>
<ContentPage Title="{Binding Name}" Icon="monkeyicon.png">
<StackLayout Padding="5, 25">
<Label Text="{Binding Name}"
Font="Bold,Large"
HorizontalOptions="Center" />
<Image Source="{Binding PhotoUrl}"
WidthRequest="200"
HeightRequest="200" />
<StackLayout Padding="50, 10">
<StackLayout Orientation="Horizontal">
<Label Text="Family:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Family}"
Font="Bold,Medium" />
</StackLayout>
<StackLayout Orientation="Horizontal"
IsVisible="{Binding Subfamily,
Converter={StaticResource booleanConverter}}">
<Label Text="Subfamily:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Subfamily}"
Font="Bold,Medium" />
</StackLayout>
<StackLayout Orientation="Horizontal"
IsVisible="{Binding Tribe,
Converter={StaticResource booleanConverter}}">
<Label Text="Tribe:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Tribe}"
Font="Bold,Medium" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Genus:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Genus}"
Font="Bold,Medium" />
</StackLayout>
</StackLayout>
</StackLayout>
</ContentPage>
</DataTemplate>
</TabbedPage.ItemTemplate>
</TabbedPage>
You can add different ItemTemplate in the Tabbedpage.
Here is a related link.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/tabbed-page
Update: you can add the listview in the tabbpage like following GIF.
<?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="Dh.ListPage">
<ContentPage.Content>
<ScrollView>
<StackLayout Style="{StaticResource MainStackLayoutWhenLoggedInStyle}">
<Frame Style="{StaticResource FrameStyle2}">
<StackLayout>
<Label Text="Vragenlijsten" Style="{StaticResource TitelLabelStyle}" />
</StackLayout>
</Frame>
<Frame Style="{StaticResource FrameStyle2}">
<StackLayout>
<Label Text="DRINGENDE VRAGEN: vul deze vragen meteen in!" Style="{StaticResource StandardLabelStyle}"/>
<Frame Style="{StaticResource FrameStyle2}">
<StackLayout Style="{StaticResource ListViewStackLayoutStyle}" >
<ListView ItemTapped="OnItemTapped" ItemsSource="{Binding Question_Lists}" Style="{StaticResource StandardListViewStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Label Text="{Binding Title}" Style="{StaticResource StandardLabelStyle}" />
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Frame>
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
</ContentPage.Content>
When my screen is too small then my listview does not want to scroll. If my screen is not too small then listview does scroll. Can someone help me pls?
Never stack a ListView inside a ScrollView as both implement scrolling on Android at least.
Xamarin.Forms.ScrollView Class documentation says:
Application developers should not nest one ScrollView within another. Additionally, they should refrain from nesting them other elements that can scroll, such as WebView.
ListView.ScrollTo Method Scrolls the ListView to the item.
Put your StackLayout in ListView.Header or ListView.Footer
<ListView ItemsSource="{Binding Comments}">
<ListView.Header>
<StackLayout Padding="30,30,30,0">
<Label Text="Article" />
</StackLayout>
</ListView.Header>
<ListView.Footer>
<StackLayout HeightRequest="85" />
</ListView.Footer>
</ListView>