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>
Related
I encountered an UI issue when developing an app using MAUI flyoutItem. According to the official doc, it looks like I can only define the flyoutItem appearance by setting two columns(https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/flyout?view=net-maui-7.0): one bind to FlyoutIcon and the other bind to Title.
What if I want to add a third item such as a label for identity/status or a slide button to enable/disable? I expect sth look like this:
[column 0]FlyoutIcon [column 1]Label1 [column 2]Label2/Slide Button
Can you please also show me some sample code for the solution?
Best and Regards
I tried to modify the Grid to add a third column and addition Label but seems not working.
<Shell ...>
...
<Shell.ItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="0.2*,0.4*,0.4*">
<Image Source="{Binding FlyoutIcon}"
Margin="5"
HeightRequest="45" />
<Label Grid.Column="1"
Text="{Binding Title}"
FontAttributes="Italic"
VerticalTextAlignment="Center" />
<Label Grid.Column="2"
Text="{Binding Text}"
FontAttributes="Italic"
VerticalTextAlignment="End" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
</Shell>
Er, guys. Looks like using Menu Item instead of FlyoutItem will resolve 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>
I'm trying to build a UI where there's a small section that's always at the top of the page, and a small section that's always at the bottom. The middle section I want to have fill up the entire rest of the page height. I thought it would be something like the XAML below but it's not working - the middle section never fills up the available space. Was hoping someone could point out what I'm doing wrong. Simplified markup below:
<Grid RowDefinitions="60,*,60" ColumnDefinitions="*">
<HorizontalStackLayout Grid.Row="0" Grid.Column="0">
<!-- top stuff here -->
</HorizontalStackLayout>
<VerticalStackLayout Grid.Row="1" Grid.Column="0" VerticalOptions="Fill">
<!-- middle section here -->
</VerticalStackLayout>
<Grid Grid.Row="2" Grid.Column="0">
<!-- bottom section here -->
</Grid>
</Grid>
NOTE: When pasting into this question the editor strips out the closing <//Grid> tag.
When in doubt, use ..AndExpand to be sure all space is used.
<Grid RowDefinitions="60,*,60" ColumnDefinitions="*"
VerticalOptions="FillAndExpand" >
...
<VerticalStackLayout Grid.Row="1" VerticalOptions="FillAndExpand" ...
UPDATE
Actually, your original code does what it should for me, testing on both Windows and Android, when I set MainPage = new MainPage(); and have that code in MainPage. With a BackgroundColor on the middle part, so I can see it expand as desired.
So, what is different in your setup?
Are you using AppShell?
Testing on platform other than Windows or Android?
You didn't test the "simplified markup" you show, so the problem is elsewhere in your actual markup?
I have the following design concept for a Windows Store App, but I'm stuck at the best way to implement this:
The red rectangle indicates the view of the page on an actual device. The page consist of a header Grid on the left, and a GridView on the right. What I want to achieve is, when the user performs a swipe gesture, instead of scrolling on the GridView, I hope that the entire page is scrolled, just like this:
I have managed to achieve this by using the following method:
<ScrollViewer HorizontalScrollMode="Enabled">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="600" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid x:Name="LeftHeaderPanel" />
<GridView Grid.Column="1" ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Disabled" />
</Grid>
</ScrollViewer>
However, for some reason unknown to me, the GridViewItems within the GridView are displayed like a StackPanel after I set it this way, which means that the items no longer stack horizontally -- instead they now stacked vertically.
I have also discovered that by setting the Height attribute on the GridView control will solve the problem, but I'm trying to avoid the need to explicitly specify the height of my control. Is there any way out? Thanks!
Try this : below code works for me
Use HorizontalScrollBarVisibility and VerticalScrollBarVisibility instead of HorizontalScrollMode VerticalScrollMode
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="600" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid x:Name="LeftHeaderPanel" />
<GridView Grid.Column="1" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled"/>
</Grid>
</ScrollViewer>