I am writing a Xamarin cross platform forms app.
Here is my main page XAML:
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XXX.YYYY">
<TabbedPage.Children>
<ContentPage Title="Page1" >
<StackLayout Orientation="Vertical">
<SearchBar Placeholder="" Text="">
</SearchBar>
<ListView x:Name="listView1" />
</StackLayout>
</ContentPage>
...
And here is the result in iOS simulator:
As you can see, i have a problem with status bar on the top of the screen.
I have solved the problem by adding 20px padding on the top, but i think this solution is ugly (let's imagine Apple wants to grow this status bar to 30px in future iOS release...)
Is there a way to say to xamarin to "pack" content bellow the status bar ?
I have also tried to hide status bar (with checkbox in plist file in iOS project) but it does not work...
Thanks
This is by design, you will have to apply a padding to the top or set a NavigationPage to App.Current.MainPage. This will take care of the padding.
Related
I want to create this ui design in xamarin forms, as progress bar should look like this vertically.
To make the ProgressBar vertical, I have an easy solution for that.You can refer to the XAML below. It could help you.
Xaml:
<StackLayout Rotation="-90" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<ProgressBar Progress="1" ProgressColor="Orange" >
</ProgressBar>
</StackLayout>
To make a chat page, I followed an example I found that sets the ListView rotation to 180, so the list builds from the bottom and then set things in the DataTemplate to rotate 180, so the items will be upright. It's a great solution, but when the keyboard opens, the ListView gets shorter which causes a redraw. During the redraw, the ListView initially appears with rotation 0 and I see an animation as if RotateTo(360) is being called. After initially displaying, I get to watch the list view rotate around in full circle. Click off the message editor, and the ListView gets taller, and it does it again.
Has anyone seen this?
Here's what the Xaml looks like. I can't make a gif of what it looks like, but imagine watching:
MessageList.Rotation = 0;
MessageList.RotateTo(360, 500, Easing.Linear);
each time the keyboard shows and hides, and you'll get the idea...
<ListView
X:Name="MessageList"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1"
Rotation="180"
ItemsSource="{Binding ChatMessages}"
SelectionMode="None"
HasUnevenRows="True"
SeparatorColor="Transparent">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame
BackgroundColor="LightGray"
FlowDirection="LeftToRight"
Rotation="180"
Padding="10"
HasShadow="false"
Margin="80,2,0,5">
<Label Text="{Binding ChatText}"/>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I followed the same tutorial you mentioned and you are probably using a ContentPage renderer to handle your keyboard layout updates on iOS. If you check the sample project https://github.com/rdelrosario/ChatUIXForms you'll notice he resizes the keyboard ContentView with a ContentView renderer for the Editor box at the bottom using the Margin property, rather than the entire ContentPage. Which doesn't trigger the above issue.
What I wound up doing was to make a custom ListView renderer that was keyboard aware in iOS and sets a translation X to move the top of the listview up when the keyboard appears and back down when it goes away. As a result, the listview is not getting resized, and thus does not redraw.
It may be messy, but it makes it work...
When run in a Windows environment a Xamarin Forms UWP app can be resized (vs a tablet environment which is always full screen).
Is there a way to set a minimum width for the window? MinimumWidthRequest on the page doesn't seem to do the job. By default the app won't go below 500px in width (not sure where that setting comes from), but I want that value to be 1000px.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:SampleApp"
MinimumWidthRequest="1000"
x:Class="SampleApp.MainPage">
<StackLayout>
<!-- Place new controls here -->
<Label Text="Welcome to Xamarin.Forms!"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
You need to do it on page renderer
within OnElementChanged add this.
ApplicationView.PreferredLaunchViewSize = new Size(1000, 1000);
ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;
Reference
I have a page that has a grid that contains a dynamic number of controls within it and each control has it's own tap event. I need to be able to pinch on this grid to add or remove columns. On iOS this works perfectly well. However, on Android, the pinch gesture only works if it's done in an area of the screen where there are no controls. If I try to pinch over any of the controls, nothing happens. I added some debugging statements, and it doesn't look the pinch event is even fired. It almost appears as if the the controls are swallowing the finger down and not allowing the pinch to fire. The relevant code is posted below (the 'xxxx's are where I had to redact some of the code).
The XAML:
<ContentPage x:Class="xxxxx"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<xxxxxx x:Name="xxxxx" Grid.Row="0" />
<ScrollView Grid.Row="1">
<Grid x:Name="ContentGrid"
ColumnSpacing="4"
RowSpacing="4"/>
</ScrollView>
</Grid>
</ContentPage>
The Constructor:
private PinchGestureRecognizer pinch;
public xxxxx()
{
InitializeComponent();
pinch = new PinchGestureRecognizer();
pinch.PinchUpdated += Zoom;
ContentGrid.GestureRecognizers.Add(pinch);
}
Filling in the grid (I had to cut this down to only the relevant portion):
var tapGesture = new TapGestureRecognizer();
tapGesture.Tapped += OnCtrlTapped;
ctrl.GestureRecognizers.Add(tapGesture);
ContentGrid.Children.Add(ctrl, colIndex, rowIndex);
I didn't include the Zoom method because it works correctly when fired. The problem as mentioned above is that doesn't fire when the pinch occurs over the controls. Am I running up against a bug that I don't know about, or did I do something to cause the conflict?
Just in case anybody runs across this in the future, what we ended up doing was placing another view over the Grid and proxying the gestures through.
How do I change the color of the actionbar and get the horizontal line back?
I have a successful android app developed in native xamarin android. Now i'm trying to port it to Xamarin Forms using the xaml approach.
I've created a hello world app and added a toolbar item the contentPage. When I initially start the app, the action bar is visible with my icon, the normal teal background and there is a nice horizontal line. However, once my forms code kicks in, it displays my icon, my toolbaritem icon, but the background is black and there is no horizontal line.
I've tried NavigationPage.BackgroundColor and that had no affect. I'm thinking i'm doing something small wrong.
Here is my xaml.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage.Title> My Sample </ContentPage.Title>
<ContentPage.ToolbarItems>
<ToolbarItem Name="test" Icon="ic_action_refresh" ></ToolbarItem>
</ContentPage.ToolbarItems>
<Label Text="Hello Forms" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>
Here is my app.cs
public class App
{
public static Page GetMainPage()
{
var nav = new NavigationPage(new Splash());
nav.BackgroundColor = Color.Teal;
return nav;
}
}
I'd also like to hide the default actionbar at startup and go with a full splash screen, but I did find this thread that looks like it'll work. http://forums.xamarin.com/discussion/18290/hiding-the-status-bar-and-the-action-bar-in-android-app
This is what I have done.
in App.xaml, add following lines and it works in both iOS and Android
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="whatever color value here"/>
</Style>
I figured it out. I was using the default template in VS2013 and the Xamarin.Forms.Core library reference was version 1.0. There have been a few updates since and one of them fixed the issue. I just updated via nuget to the latest version and it started working.
I've had a lot of luck with the following method when generating a NavigationPage, with the key being the BarBackgroundColor property being the key to setting the color of the bar itself. The underlying border should still be present as well. You can also use whatever method from Color you like, not just the FromHex method.
private Page GetNavigationPage(Page innerPage){
var navigation = new NavigationPage (innerPage);
navigation.BarBackgroundColor= Color.FromHex ("#00263A");
return navigation;
}
Try to do it at App.xaml.cs
MainPage = new NavigationPage(new TrainPage());
((NavigationPage)Application.Current.MainPage).BarBackgroundColor = Color.Black;
((NavigationPage)Application.Current.MainPage).BarTextColor = Color.White;