<?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:App;assembly=App.Droid"
x:Class="App.MainPage">
<StackLayout>
<StackLayout.BindingContext>
<local:MainModel />
</StackLayout.BindingContext>
<Label Text="{Binding Uri}" />
<Button Text="Clear logs" Command="{Binding LogClear}" />
<ScrollView VerticalOptions="FillAndExpand">
<Label FormattedText="{Binding Log}" VerticalOptions="FillAndExpand" />
</ScrollView>
</StackLayout>
</ContentPage>
Log gets updated while the application is running, but the label doesn't expand as expected. Any idea?
I cannot share the details here but it was a bug of Xamarin.Forms. Now it's fixed in upstream.
Related
I have a grid which will take up most of my Xamarin.Forms Page, and I want to add a button below the grid. My issue is that I am using the below syntax to add the button, however the button fills the entire page.
What do I need to change so that the button appears directly below the grid?
<?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="XF.Pages.AEI" >
<ContentView Content="{Binding ApprovedUserGrid,Mode=TwoWay}" Padding="0,30,0,0"/>
<Button Command="{Binding OkayCommand}" Text="Okay" TextColor="White"
FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand"
BackgroundColor="#088da5" />
</ContentPage>
This is C# for my grid (not where I actually bind, but the creation)
private Grid _Grid;
public Grid TestGrid
{
get { return _Grid ?? (_Grid=new Grid()); }
set
{
_Grid = value;
NotifyPropertyChanged();
}
}
EDIT
I edit code to read like this, and there are no errors, but I do not see my button on the page?
<?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="XF_Login.Pages.ApproveUsers" >
<StackLayout Orientation="Vertical" Padding="30" Spacing="40">
<ContentView Content="{Binding ApprovedUserGrid,Mode=TwoWay}" Padding="0,30,0,0"/>
<Button Command="{Binding OkayCommand}" Text="Okay" TextColor="White"
FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand"
BackgroundColor="#088da5" />
</StackLayout>
</ContentPage>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XF_Login.Pages.ApproveUsers" >
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" Padding="30" Spacing="40">
<ContentView VerticalOptions="FillAndExpand" Content="{Binding ApprovedUserGrid,Mode=TwoWay}" Padding="0,30,0,0"/>
<Button Command="{Binding OkayCommand}" Text="Okay" TextColor="White"
FontAttributes="Bold" FontSize="Large" HorizontalOptions="Center"
BackgroundColor="#088da5" />
</StackLayout>
</ContentPage>
I'm trying to learn Xamarin and I was doing a simple MasterDetailPage to run on iOS. After running the code I got this error:
Can not set the content of MasterDetailPage as it doesn't have a ContentPropertyAttribute
Below is my XAML file code snippet:
<?xml version="1.0" encoding="utf-8"?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MasterDetailLearing" x:Class="MasterDetailLearing.MainPage">
<!-- Place new controls here -->
<Label Text="Welcome to Xamarin.Forms!" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
<MasterDetailPage.Master>
<ContentPage Padding="10" BackgroundColor="Gray" Title="Master">
<ContentPage.Content>
<StackLayout Margin="5,30,5,5">
<Label Text="Master Page"></Label>
</StackLayout>
</ContentPage.Content>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<ContentPage Padding="10">
<ContentPage.Content>
<StackLayout Margin="5,30,5,5">
<Label Text="Detail Page"></Label>
</StackLayout>
</ContentPage.Content>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
a MasterDetail page only has Master and Detail children. You cannot include any other content as a direct child. So your Label needs to be in either the Master or the Detail, it cannot be a direct child of the page.
I'm trying to set my image as a background for my app using BackgroundImage = "background.jpg", but I can't seem to scale it in any way in order to fit the whole image into the app, also, it doesn't show up at all on android. Here is the code and background image:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage Padding="0, 40, 0, 0"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="RoseySports.Login_Page"
BackgroundImage="Background.jpg">
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="Email" HorizontalOptions="Center"/>
<Entry Keyboard="Email" WidthRequest="300" x:Name="email"/>
<Label Text="Password" HorizontalOptions="Center"/>
<Entry IsPassword="true" WidthRequest="300" x:Name="password"/>
<Button Text="Login" x:Name="login" Clicked="Handle_Clicked" TextColor="Navy"/>
</StackLayout>
</ContentPage>
background.jpg ios adroid
Got it working by using this instead:
<?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="RoseySports.Login_Page">
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
Source="background.jpg" Aspect="AspectFill"/>
<ScrollView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1">
<StackLayout Padding="0, 40, 0, 0" HorizontalOptions="Center" VerticalOptions="Center" Grid.Column="0" Grid.Row="0">
<Label Text="Email" HorizontalOptions="Center" TextColor="White"/>
<Entry Keyboard="Email" WidthRequest="300" x:Name="email"/>
<Label Text="Password" HorizontalOptions="Center" TextColor="White"/>
<Entry IsPassword="true" WidthRequest="300" x:Name="password"/>
<Button Text="Login" x:Name="login" Clicked="Handle_Clicked" TextColor="Navy"/>
</StackLayout>
</ScrollView>
</AbsoluteLayout>
</ContentPage>
1.To use BackgroundImage property BackgroundImage="Background.jpg" in IOS you need to add the required image to an IOS asset catalog. Xamarin.Forms WILL NOT load an image into the BackgroundImage property when it is located in the Resources folder as for versions of IOS pre 7.
Read more for IOS asset catalog here.
2.You can also achieve this using Grid.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<Grid>
<Image Aspect="AspectFill" x:Name="BGImageLogin" Source="Background.jpg" />
<ScrollView>
<StackLayout >
<Entry Placeholder="Username"/>
<Entry Placeholder="Password"
IsPassword="True"/>
<Button Text="Login""/>
</StackLayout>
</ScrollView>
</Grid>
</ContentPage>
I'm experiencing a weird bug when I try to add Navigation to my CropsListPage
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-Balloney.Views"
x:Class="Balloney.Views.MainPage">
<NavigationPage Icon="carrot.png">
<x:Arguments>
<local:CropListPage/>
</x:Arguments>
</NavigationPage>
<ContentPage Icon="search.png"></ContentPage>
</TabbedPage>
And then it results in..
If I don't try to envelop it in a NavigationPage, it stays normal
Any idea what's causing this behaviour ? Before trying to hammer my way outta this and hardcoding the size of the status bar in Android, I'm looking for a way to understand the problem and prevent it. Thanks
MainPage.xaml working now
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Balloney.Views"
x:Class="Balloney.Views.MainPage">
<local:CropListPage Icon="carrot.png"/>
<ContentPage Icon="search.png"></ContentPage>
</TabbedPage>
And the CropList xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Balloney.Views.CropListPage">
<ListView ItemsSource="{Binding CropsList}" ItemTapped="OnCropTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Image Source="{Binding ImageUrl}" VerticalOptions="Fill" WidthRequest="50"/>
<StackLayout HorizontalOptions="StartAndExpand">
<Label Text="{Binding Specie.Name}"/>
<Label Text="{Binding HarvestDate}" FontSize="Micro" TextColor="Black"/>
</StackLayout>
<Label Text="{Binding Location}" FontSize="Micro" TextColor="Chocolate" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
EDIT: The error seems to be related to the ListView I have inside CropListPage because there's no bug when I switch to the Search icon Page.
The extra space in your first image is the result of the NavigationPage by default showing the Navigation bar, which can be hidden.
Here's an example of how to hide it.
Is may be because you have wrapped crop list page in a navigation page so when that is selected you get the nav bar space above.
If you select the second tab, does the space disappear?
If you add a title to crop page does it appear in the large green space?
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Chronocrops.Views"
x:Class="Chronocrops.Views.MainPage">
<NavigationPage Icon="carrot.png" Title="Crop List">
<x:Arguments>
<local:CropListPage/>
</x:Arguments>
</NavigationPage>
<ContentPage Icon="search.png"></ContentPage>
</TabbedPage>
So far, most examples using Xamarin.Forms are using C# for building up the UI. I prefer using XAML for the UI, and databind it to ViewModels.
I'm having trouble using the Xamarin.Forms.MasterDetailPage in combination with XAML, and I can't seem to port the C# example to XAML + ViewModels.
This is the XAML I got so far:
<?xml version="1.0" encoding="UTF-8" ?>
<MasterDetailPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:NSContacten;assembly=NSContacten"
x:Class="MasterDetailExample.Main"
Title="Master Detail Example">
<MasterDetailPage.Master BindingContext="{Binding Menu}">
<ContentPage Padding="5, 25">
<StackLayout Orientation="Vertical">
<Label Text="Master" HorizontalOptions="Center" />
<Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail BindingContext="{Binding Detailpage}">
<ContentPage Padding="5, 25">
<StackLayout Orientation="Vertical">
<Label Text="Detail" HorizontalOptions="Center" />
<Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
The component works: I do see the 'Master' and 'Detail' labels. The bound labels (on the BindingContext objects) are not displayed.
I've used loads of different combinations, but I'm still stuck: How does this work? Is my binding incorrect (should it be on the "ContentPage"), can't I bind to the .Master and .Detail properties etc.? How should the "Menu" and "Detailpage" bindings look like?
It would be a huge help if anyone could help me out! The next step would be that the .Detail will be changed when a button is pressed in the .Master . Thanks in advance!
Your Xaml is almost ok, but:
The {BindingContext} are invalid on the properties and should be on the ContentPage elements
MasterDetailPage.Master require a Page.Title to be set, or it throws.
Here's the correct Xaml working for me:
<?xml version="1.0" encoding="UTF-8" ?>
<MasterDetailPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:NSContacten;assembly=NSContacten"
x:Class="MasterDetailExample.Main"
Title="Master Detail Example">
<MasterDetailPage.Master>
<ContentPage Padding="5, 25" BindingContext="{Binding Menu}" Title="Master">
<StackLayout Orientation="Vertical">
<Label Text="Master" HorizontalOptions="Center" />
<Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<ContentPage Padding="5, 25" BindingContext="{Binding Detailpage}">
<StackLayout Orientation="Vertical">
<Label Text="Detail" HorizontalOptions="Center" />
<Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
I tested it with an anonymous type as the page view model:
public MyMDPage ()
{
InitializeComponent ();
BindingContext = new {
Menu = new { Subtitle = "I'm Master" },
Detailpage = new { Subtitle = "I'm Detail" }
};
}
and this works just fine. In your case, you probably want concrete types instead of anonymous ones for your view model, but you get the idea.