I'm trying to position a StackLayout to the bottom of the page using an AbsoluteLayout as demonstrated in below code sample. However the position flag is treated as absolute value not proportional resulting in having the StackLayout positioned in the top of the page (rather in the bottom). When I inclemently increase the position value, the StackLayout starts to shift downward which it should not since the the layoutFlags are set to "All". Any help would be appreciated in help to resolve this issue, is it a bug in .net MAUI?
<AbsoluteLayout Margin="5">
<StackLayout BackgroundColor="White"
AbsoluteLayout.LayoutBounds="0,1,1,0.2"
AbsoluteLayout.LayoutFlags="All">
<StackLayout Orientation="Horizontal" HorizontalOptions="Center">
<Label Text="التاريخ المحدد:"/>
<Label x:Name="selectedDeliveryDate"/>
</StackLayout>
<Button x:Name="confirmDateSelected" Text="تأكيد" BackgroundColor="#009688" Margin="20,5,20,5" Clicked="confirmDateSelected_Clicked"/>
</StackLayout>
</AbsoluteLayout>
It works for me.
The problem is something you don't show:
What did you place <AbsoluteLayout ... inside of?
The proportions of AbsoluteLayout are relative to whatever layout it is inside of.
Here I've taken your code, but changed background color to "Red", and placed it directly inside a page:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp7t.Page3"
Title="Page3">
<AbsoluteLayout Margin="5">
<StackLayout BackgroundColor="Red"
AbsoluteLayout.LayoutBounds="0,1,1,0.2"
AbsoluteLayout.LayoutFlags="All">
<StackLayout Orientation="Horizontal" HorizontalOptions="Center">
<Label Text="التاريخ المحدد:"/>
<Label x:Name="selectedDeliveryDate"/>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ContentPage>
This does what you describe: My "red" area is at bottom of screen:
Tested on both Windows and Android.
Tested both as a stand-alone page, and as a page within AppShell.
Related
In my .NET MAUI app, I'm implementing chat feature and want to make sure that the Editor and Button are perfectly located at the bottom of the screen.
I created a Grid for the controls to produce this layout
The problem I'm having is with the Editor width because if I get it to look right on Android, it's not perfect on iOS and vice versa.
Here's how I approached it:
<Grid
RowDefinitions="50"
ColumnDefinitions="*,50"
RowSpacing="0"
ColumnSpacing="5"
HorizontalOptions="StartAndExpand"
Margin="5,5,5,5">
<Editor
Grid.Column="0" />
<Button
Grid.Column="1" />
</Grid>
Other than entering some arbitrary number for WidthRequest for the Editor, how do I set the width for it so that it always takes up all the available space and look like it in the picture?
After setting HorizontalOptions="FillAndExpand" as Jason suggested like below, it looks right on Android and iOS.
<Grid
RowDefinitions="50"
ColumnDefinitions="*,50"
RowSpacing="0"
ColumnSpacing="5"
HorizontalOptions="FillAndExpand"
Margin="5">
<Editor
Grid.Column="0" />
<Button
Grid.Column="1" />
</Grid>
I would like to add label above Syncfusion Datagrid but the label is hidden when I run the app in the following page.
See the following repos for complete app.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DataGrid.Views.OrderInfoRepositoryView"
xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
xmlns:local="clr-namespace:DataGrid"
Title="Order Info Repository View">
<ContentPage.BindingContext>
<local:OrderInfoRepositoryViewModel x:Name="viewModel" />
</ContentPage.BindingContext>
<ContentPage.Content>
<VerticalStackLayout Margin="20"
Spacing="10">
<Label Text="OrderInfo"
Margin="10,10,10,10"
TextColor="White"
BackgroundColor="Red"/>
<syncfusion:SfDataGrid x:Name="dataGrid"
ItemsSource="{Binding OrderInfoCollection}">
</syncfusion:SfDataGrid>
</VerticalStackLayout>
</ContentPage.Content>
Did try the following but same result.
<Label Text="OrderInfo"
Margin="10,10,10,10"
TextColor="White"
BackgroundColor="Red"/>
<syncfusion:SfDataGrid x:Name="dataGrid"
ItemsSource="{Binding OrderInfoCollection}">
</syncfusion:SfDataGrid>
</VerticalStackLayout>
Here Android screenshot
Added LineHeight and fontSize. No change
Tested with HeightRequest. No change.
It appears that you have set the Content for the ContentPage as DataGrid in OrderInfoRepositoryView.xaml.cs file. Please refer to the below file,
https://github.com/JeanMarcFlamand/MauiSyncFusionExamples/blob/master/DataGrid/Views/OrderInfoRepositoryView.xaml.cs#L12
You are adding the DataGrid as the content of the page in code behind i.e., OrderInfoRepositoryView constructor. That’s why the DataGrid alone is displaying without Label. We request that you remove the codes inside the OrderInfoRepositoryView constructor to overcome the issue.
I have a ListView in a dotnet MAUI Windows app with a custom viewcell for the item template. I'd like to control how the focused item is styled. At the moment it becomes grey and has a little blue line on the left edge.
This is the code I am currently using:
<ListView
x:Name="ReportList"
ItemsSource="{Binding Resources}"
SelectedItem="{Binding SelectedResource}"
SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate x:DataType="vm:ReportItemViewModel">
<ViewCell>
<Grid ColumnDefinitions="*, *, *">
<Label Grid.Column="0" Text="{Binding Name}" />
<Label Grid.Column="1" Text="{Binding Size}" />
<Label Grid.Column="2" Text="{Binding Status}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
On the focused element I'd like to remove the blue line and change the background colour.
I've found some promising looking properties and styles while browsing through the default styles in a PR for the MAUI source code.
These properties include:
FocusVisualMargin
FocusVisualPrimaryBrush
FocusVisualPrimaryThickness
FocusVisualSecondaryBrush
I'm not sure how to use them in my code above, or even if these are available in the current release. Can I set these properties, is this the way to go to get complete control over how the focused item is styled, or is there another way?
Came across this strange behavior in .NET MAUI app while testing it on an iOS device.
First, everything looks fine on Android -- both emaulator and physical device. I then noticed this issue in iOS Simulator and have the same results on my iPhone.
If I have no RefreshView around my CollectionView, the empty view message display where it's supposed -- well almost because I can never place it in the center of the page vertically but other than that, it displays correctly -- see below:
If I do place my CollectionView within a RefreshView, the Label gets pushed to the right -- see below:
Here's the actual code with the RefreshView. All you need to do is remove RefreshView and label is displayed in the center.
<RefreshView
IsRefreshing="{Binding IsRefreshing}"
Command="{Binding RefreshCouponsCommand}">
<CollectionView
x:Name="MyCouponsList"
ItemsSource="{Binding Feed}"
BackgroundColor="Transparent"
VerticalOptions="StartAndExpand"
Margin="0,5,0,0">
<CollectionView.EmptyView>
<VerticalStackLayout
VerticalOptions="CenterAndExpand">
<Label
Text="No data..."
TextColor="{StaticResource Gray600}"
HorizontalTextAlignment="Center" />
</VerticalStackLayout>
</CollectionView.EmptyView>
</CollectionView>
</RefreshView>
Any idea what could be causing this?
try replacing
<CollectionView
x:Name="MyCouponsList"
ItemsSource="{Binding Feed}"
BackgroundColor="Transparent"
VerticalOptions="StartAndExpand"
Margin="0,5,0,0">
<CollectionView.EmptyView>
<VerticalStackLayout
VerticalOptions="CenterAndExpand">
<Label
Text="No data..."
TextColor="{StaticResource Gray600}"
HorizontalTextAlignment="Center" />
</VerticalStackLayout>
</CollectionView.EmptyView>
</CollectionView>
with
<CollectionView
x:Name="MyCouponsList"
ItemsSource="{Binding Feed}"
BackgroundColor="Transparent"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
Margin="0,5,0,0"
EmptyView="No Data..."/>
</CollectionView>
Given the above image, how would I go about to setup my Absolute Layouts?
I would like to have my blue absolute layout overlap the red border absolute layout. I understand there's a doc explaining how AbsoluteLayouts work however I still don't completely understand it 100%.
I have tried setting up the layouts the following way but the blue square is always hidden.
With the below code I don't end up seeing the blue layout at all.
<AbsoluteLayout>
<AbsoluteLayout x:Name="BlueSquare">
<StackLayout> (Asumme there is a list of things in here) </StackLayout>
</AbsoluteLayout>
<AbsoluteLayout x:Name="RedBorderArea">
<StackLayout> (Asumme there is another list of stuff in here) </StackLayout>
</AbsoluteLayout>
</AbsoluteLayout>
After tinkering around I needed to add the Blue square layout last and i removed the RedSquares parent layout.
<AbsoluteLayout>
<StackLayout x:Name="RedBorderArea" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0.5,0.5,1,1"> (Asumme there is another list of stuff in here) </StackLayout>
<AbsoluteLayout x:Name="BlueSquare" LayoutFlags="PositionProportional, WidthProportional" LayoutBounds="1,0,1,1">
<StackLayout> (Asumme there is a list of things in here) </StackLayout>
</AbsoluteLayout>
</AbsoluteLayout>