I tried to get the same large title behavior like the settings app on iOS when the user scrolls down. The transition between the large title and the small title is smooth. But on Xamarin Forms the header snaps.
In my NavigationPage i set PrefersLargeTitles="true". In the embedded content page i set LargeTitleDisplay="Always" and UseSafeArea="true". The content in the page looks like this:
<ContentPage.Content>
<AbsoluteLayout>
<ListView />
<Frame x:Name="LoadingFrame" /> <!-- Only visible until ListView is loaded -->
</AbsoluteLayout>
</ContentPage.Content>
I tried setting NavigationPage.IsNavigationBarTranslucent="True". Then it works, but only if i disable SafeArea (Page.UseSafeArea="False") in the ContentPage. Disabling SafeArea is not what i want, because now the content is behind the notch.
I had the same issue.
The trick was to change top constraint of list to superView instead of safe area which only works on Native.
extendedLayoutIncludesOpaqueBars = true;
On Xamarin.Forms, I tried these solutions:
Use a custom renderer to set the LayoutConstraints of the scrollable view (Doesn't work)
Create a UITableViewController in a custom renderer then convert the Xamarin TableView element to a UITableView and set it to the TableView property of the UITableViewController then PushViewController to the new UITableViewController. (work)
You can raise the problem on github for better support：
https://github.com/xamarin/Xamarin.Forms/issues
Related
I am simply displaying an Image on my Xamarin Forms page. The image is transparent and this is how it displaying on page:
How can I remove those white and grey background?
This is my source code:
<ContentPage.Content>
<StackLayout>
<Image x:Name="myimage" Aspect="Fill">
</Image>
</StackLayout>
</ContentPage.Content>
Code-behind
myimage.Source = ImageSource.FromResource("RailwayApp.bull.jpg");
My try:
I tried setting IsOpaque property to True/False neither worked. Also declared BackgroundColor="Transparent" on XAML page but not worked.
In this case you can't, the background is actually not transparent - it would have to be a transparent PNG or GIF to support this. This is a JPG, so the background is actually grey and white.
To make this work you will first have to actually make the image transparent by converting in one of the two transparent formats (and actually remove the background) and then it should display as transparent as expected.
I have a problem with the NavigationView Control and the titlebar.
I have tried to extend the view into the titlebar to play with the acrylic effects of the standard NavigationView. But then I´ve noticed that the back and menu buttons are underneath the titlebar, so you´re not able to click them properly.
In the attached image, you can see that everything under the red line is clickable but when you go over it, you are targeting the titlebar.
Is there anything I can do to fix this behavior?
I don't know which version OS you are working on, I didn't see this problem in recent Windows insider OS.
You may workaround the not clickable problem by set a dummy Titlebar like below:
<Grid>
<Grid x:Name="AppTitleBar" Background="Transparent" />
<NavigationView IsBackEnabled="True" PaneDisplayMode="Top">
<NavigationView.MenuItems>
<NavigationViewItem Icon="Accept" Content="Accept" />
</NavigationView.MenuItems>
</NavigationView>
</Grid>
public MainPage()
{
this.InitializeComponent();
var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;
Window.Current.SetTitleBar(AppTitleBar);
}
I'm new to Xamarin.
When I try to insert a Button or a BoxView I can set the "HeightRequest" and "WidthRequest" Parameters but the elements are just filling the whole screen.
What am I doing wrong?
You have done nothing wrong, but you missed some key procedure. you did not set LayoutOptions of Button or BoxView. The following code could make element size effected.
<Button Text="click me"
HeightRequest="44"
WidthRequest="60"
VerticalOptions="Start"
HorizontalOptions="Start"/>
As you know, the button control is inherited from the View. The default value of VerticalOptions dependency property is LayoutOptions.Fill. And it also works for HorizontalOptions. So if you did not set value for VerticalOptions and HorizontalOptions, the control will fill the whole screen.
I have XAML code to create program output in frame. I can change content of frame in case I used "MyFrame.Navigate(typeof(Setup))". Is there any way to initialize content of frame in XAML code?
XAML code fragment:
</SplitView.Pane>
<SplitView.Content>
<Frame Name="MyFrame" ?any reference to view to first time intiilaization? />
</SplitView.Content>
Thanks for help
You can use SourcePageType
It can set in xaml ,the code is
<Frame Name="MyFrame" SourcePageType="Setup"></Frame>
The frame will navigate to Setup
I think you can use the control above in the Frame when you enter the page ,you can set it Visibility and you can set is hidden when load complete.
I am working on a Windows Phone 7 project with a panorama on the MainPage and multiple simple pages. All my pages have a background set this way:
<local:PhoneApplicationPage>
<Grid Background="{StaticResource PageBackground}">
content here
</Grid>
</local:PhoneApplicationPage>
PageBackground is an application resource set in default.xaml and light.xaml this way:
<ImageBrush x:Key="PanoramaBackground" ImageSource="/Resources/PanoramaBackground01Dark.jpg" Stretch="None" />
<ImageBrush x:Key="PageBackground" ImageSource="/Resources/PageBackground01Dark.jpg" Stretch="None" />
The PageBackground01Dark.jpg picture is of size 800x800 px.
When a page is displayed in the Portrait orientation, the picture is centered correctly horizontaly and the picture height corresponds to the page height. This is fine.
When a page is displayed in the Landscape orientation, the picture width corresponds to the page width but the picture is then centered vertically.
I would like my background picture to be "topped" in the page.
The Background property of a Grid is a brush with no interesting options. I would like not to create 2 pictures for this. There should be an obvious solution. Here is the result I would like to have:
Oh, the solution is simple. The Background property is of type Brush but it's in fact an ImageBrush. So the solution is:
<ImageBrush x:Key="PageBackground"
ImageSource="/Resources/PageBackground01Dark.jpg"
AlignmentY="0" />