I'm currently developing a MAUI app, and I use the <Border /> a lot, but when tried to use it inside a Grid that's 335 units of width it gets cut, here's my code:
<ScrollView x:Name="InputScroll">
<Grid
HorizontalOptions="Center"
Margin="0,25,0,25"
VerticalOptions="Start"
WidthRequest="335">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="*" />
<RowDefinition Height="37" />
</Grid.RowDefinitions>
<Border
Background="White"
StrokeThickness="0"
Grid.Row="0"
Grid.RowSpan="3">
<Border.StrokeShape>
<RoundRectangle CornerRadius="20" />
</Border.StrokeShape>
</Border>
</Grid>
</ScrollView>
All of this inside a ContentPage
On iOS it works perfectly as shown in the image.
But on Android shows like this
If I go below 300 units it works perfectly, but I get a huge space on the right side.
I'm not sure if I'm missing something that's really obvious or it's just broken there but any help or clue on how to handle/fix this would be much appreciated.
Thanks in advance
I trid the code you provided and I found that the code HorizontalOptions="Center" made this error on Android platform. I removed HorizontalOptions="Center" then tested on Android and Windows platform, it worked well.
<ScrollView x:Name="InputScroll">
<Grid
Margin="0,25,0,25"
VerticalOptions="Start"
WidthRequest="335"
Background="black">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="*" />
<RowDefinition Height="37" />
</Grid.RowDefinitions>
<Border
Background="red"
StrokeThickness="0"
Grid.Row="0"
Grid.RowSpan="3">
<Border.StrokeShape>
<RoundRectangle CornerRadius="20" />
</Border.StrokeShape>
</Border>
</Grid>
</ScrollView>
Related
I have a problem on iOs. On android CollectionView items aligns perfect, but on iOS not. Screenshots:
Android screenshot: https://i.stack.imgur.com/7v2lK.png
iOs screenshot: https://i.stack.imgur.com/YCwsa.jpg
My code:
<CollectionView x:Name="FlowersList" VerticalOptions="EndAndExpand" BackgroundColor="Transparent" >
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" x:Name="grid_layout" Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate >
<Grid>
<Grid.RowDefinitions>
<RowDefinition x:Name="nuline_row" Height="Auto"/>
<RowDefinition x:Name="pirma_row" Height="Auto"/>
<RowDefinition x:Name="antra_row" Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="nulinis_stulpelis"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0"
Source="{Binding Image, Converter={StaticResource Base64ToImageConverter}}"
Aspect="AspectFill"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
</Image>
<Label Grid.Row="1"
Text="{Binding Name, Converter={StaticResource caseConverter}, ConverterParameter=u}"
FontSize="16"
TextColor="Black"
LineBreakMode="WordWrap"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
VerticalOptions="Start" />
<Label Grid.Row="2"
Text="{Binding PriceToDisplay, StringFormat='{0} €'}"
FontSize="16"
TextColor="Black"
LineBreakMode="WordWrap"
HorizontalOptions="Center"
VerticalOptions="Start" Padding="0,-5,0,20" />
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapGestureRecognizerTapped"
NumberOfTapsRequired="1" />
</Grid.GestureRecognizers>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
I have out of ideas. Maybe someone know how to solve this problem?
This may caused by the size of image is different by default:
Solution:
1.Give a specific height in the Grid:
<Grid.RowDefinitions>
<RowDefinition x:Name="nuline_row" Height="150"/>
<RowDefinition x:Name="pirma_row" Height="Auto"/>
<RowDefinition x:Name="antra_row" Height="*"/>
</Grid.RowDefinitions>
2.Or give a heightRequest to Image:
<Image Grid.Row="0"
Source="{Binding Image, Converter={StaticResource Base64ToImageConverter}}"
HeightRequest="150"
Aspect="AspectFill"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
</Image>
just upgrade xamrin Froms Version.
Xamarin.Forms CollectionView Introduction
I have also ran into simular problems with using grids like this inside Data Templates on iOS. I can't explain why it's not working reliable, but I managed to work around it by switching to stacklayout + putting the HeightRequest="150" on the Image. Seen as you're basically using the grid as a vertical stack, you might want to try this one.
I have a pretty simple page with a header, a footer, and scrollable content. My iOS and UWP app seems to work fine. When I enter the page iOS and UWP starts with the ScrollView Scrolled at the top, but Android seems to scroll down until you can see at least one button.
My page looks something like this (Header, big scrollable content and footer):
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Height="64"
Background="Blue">
<TextBlock Text="Header"
Margin="20" />
</Grid>
<ScrollViewer Grid.Row="1">
<StackPanel>
<TextBlock Text="Top"
VerticalAlignment="Top"
Height="500" />
<TextBlock Text="Content"
FontSize="66"
Margin="0,0,0,300" />
<Button Content="button"
Margin="0,0,0,300"/>
<TextBlock Text="Bottom"
VerticalAlignment="Bottom" />
</StackPanel>
</ScrollViewer>
<Grid Height="44"
Background="Green"
Grid.Row="2">
<TextBlock Text="Footer"
Margin="10" />
</Grid>
</Grid>
This arises from an interaction between the native Android scroll viewer (which is implicitly nested inside the Xaml ScrollViewer), which tries to scroll elements into view when they receive focus, and the Button, which takes focus when the Page first loads.
As a workaround to disable this behavior, you can use the BringIntoViewOnFocusChange property:
<ScrollViewer Grid.Row="1"
BringIntoViewOnFocusChange="False">
<StackPanel>
<TextBlock Text="Top"
VerticalAlignment="Top"
Height="500" />
<TextBlock Text="Content"
FontSize="66"
Margin="0,0,0,300" />
<Button Content="button"
Margin="0,0,0,300"/>
<TextBlock Text="Bottom"
VerticalAlignment="Bottom" />
</StackPanel>
</ScrollViewer>
I have a proble which seems pretty common and has been asked alot, but I can't find a fixing solution for my problem.
So I try to use 3 listviews in in one page all shall have a title and an explaining image, but instead of designing all 3 ListViews in one page I outsourced one listview with image and title into a control, which I use in my page.
The 3 Controls are placed in a grid. When the listview items get filled thy scrollbar should become visible if the remaining space is no longer enough but it won't show.
I provided a sandbox project where I placed the control and etc. like in the application I'm working on. SampleProject
Their you just need to press start and the listviews get filled. But they don't show the scrollbar.
Thanks in advance!
Edit 1:
As requested I share my code below. If you open up the sample project then you do not need to read further until a second edit is done.
Control containing listview:
<Grid>
<Grid x:Name="Section"
HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="grdTitleArea"
HorizontalAlignment="Stretch"
Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<BitmapIcon
VerticalAlignment="Center"
HorizontalAlignment="Center"
Tapped="grdTitleArea_Tapped"
UriSource="ms-appx:///Assets/area.png"
Height="40" />
<TextBlock
VerticalAlignment="Center"
HorizontalAlignment="Stretch"
Tapped="grdTitleArea_Tapped"
Text="Area"
Grid.Column="1" />
</Grid>
<!--<ScrollViewer
VerticalAlignment="Stretch"
VerticalScrollBarVisibility="Auto"
VerticalScrollMode="Enabled"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
HorizontalScrollBarVisibility="Hidden"
HorizontalScrollMode="Disabled"
>-->
<ListView x:Name="ListView"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.VerticalScrollMode="Auto"
Grid.Row="1">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
BorderThickness="1"
Margin="1"
Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding ActionDescription}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!--</ScrollViewer>-->
</Grid>
</Grid>
Control which contains the control above 3 times:
<Grid x:Name="ProgressControl">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<local:SynchronizeSettingsControl
Visibility="Visible"
x:Name="Settings" />
<local:SynchronizeSectionControl
x:Name="ActualAction"
Visibility="Visible"
Grid.Row="1" />
<local:SynchronizeSectionControl
x:Name="Error"
Visibility="Visible"
Grid.Row="2" />
<local:SynchronizeSectionControl
x:Name="Log"
Visibility="Visible"
Grid.Row="3" />
</Grid>
Page which contains the control which contains the listview:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="*" />
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1"
Text="Demo"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Width="70"
VerticalAlignment="Stretch"
Content="Useless Button" />
</Grid>
<Controls:SynchronizeControl
x:Name="ctlSync"
Grid.Row="2"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch" />
<Button VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
x:Name="btnStart"
Content="Start"
Tapped="btnStart_Tapped"
Grid.Row="3" />
</Grid>
The problem is you used Auto height in the page. This means basically that the page tells the local:SynchronizeSectionControl control: "You can use whichever height you want".
The control then has * as the height of the second row which means "use the rest space available". But because the page offered essentially "infinite height", the ListView height will stretch as much as possible to accommodate for all its items and hence it doesn't scroll, as its height is big enough to display everything, although it is cut off and not visible, because the window height is of course limited.
The thing is you used the Auto property for the height of your rows in your control.
This works fine is the control you use uses a definite space. Like a button or similar stuff. But when the control can extend indefinitely the allocation for the space gets screwed up.
Basically the control displays at its maximum size but extends way over its boundaries.
You can prevent that when you use the * as a Height value.
This will lead to the control taking up all the space available. You can further limit this with using the MaxHeight property.
If you do it that way it will display a scrollviewer when necessary and it will even resize when you change the window size.
I have the following xaml inside a user control:
<StackPanel VerticalAlignment="Top">
<Grid Background="LimeGreen">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" VerticalAlignment="Top" Fill="Yellow" Width="80" Height="80" />
<Rectangle Grid.Column="1" Grid.Row="0" VerticalAlignment="Top" Fill="Red" Width="10" Height="10" />
<Rectangle Grid.Column="1" Grid.Row="1" VerticalAlignment="Top" Fill="Red" Width="10" Height="10" />
<Rectangle Grid.Column="1" Grid.Row="2" VerticalAlignment="Top" Fill="Red" Width="10" Height="10" />
</Grid>
</StackPanel>
and it produces the following layout:
For some reason, this is adding extra unwanted space after the yellow square. I want the following layout instead:
The extra space only occurs when the green grid is inside a stack panel. I can get the correct layout by either:
Putting the green grid inside a grid instead of a stack panel.
Or setting the width of the second column to "Auto". This is undesired, though.
My questions are:
Is the layout in the first picture correct/expected? If so, why is it adding the extra space?
Why does setting the width of the second column to "Auto" get rid of the extra vertical space?
How can I get layout #2 inside a stack panel with width of second column set to * (star)?
I can answer question 3 with this alternative xaml, however it uses a nested grid to bypass using a row span for the yellow square. Ideally this should be possible using just one grid. Anyway, here's the xaml:
<StackPanel VerticalAlignment="Top">
<Grid Background="LimeGreen">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle VerticalAlignment="Top" Fill="Yellow" Width="80" Height="80" />
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" VerticalAlignment="Top" Fill="Red" Width="10" Height="10" />
<Rectangle Grid.Row="1" VerticalAlignment="Top" Fill="Red" Width="10" Height="10" />
<Rectangle Grid.Row="2" VerticalAlignment="Top" Fill="Red" Width="10" Height="10" />
</Grid>
</Grid>
</StackPanel>
I'm still stumped on answering questions 1 and 2.
I am trying to create a messaging screen. This is my XAML:
<phone:PhoneApplicationPage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:edc="clr-namespace:Microsoft.Expression.Controls;assembly=Microsoft.Expression.Drawing" xmlns:em="clr-namespace:Microsoft.Expression.Media;assembly=Microsoft.Expression.Drawing"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696"
x:Class="chatScreen.MainPage"
Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.Resources></phone:PhoneApplicationPage.Resources>
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar>
<shell:ApplicationBarIconButton IconUri="/icons/appbar.message.send.png" IsEnabled="True" Text="send"/>
</phone:PhoneApplicationPage.ApplicationBar>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid x:Name="userInfo" Grid.Row="0" Margin="12,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15" />
<ColumnDefinition Width="84" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="48"/>
</Grid.ColumnDefinitions>
<Image x:Name="PresenceIcon" Grid.Column="0" Height="64" Width="12" HorizontalAlignment="Left" VerticalAlignment="Bottom" Source="available.jpg" />
<Image x:Name="DisplayImage" Grid.Column="1" Height="64" Width="64" HorizontalAlignment="Left" VerticalAlignment="Bottom" Source="tony.jpg" Margin="0" />
<Grid x:Name="metaContact_info" Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock x:Name="DisplayName" Grid.Row="0" Text="Tony Stark" TextWrapping="NoWrap" FontSize="40" />
<TextBlock x:Name="DisplayStatus" Grid.Row="1" Text="enjoying windows phone" FontSize="18" TextTrimming="WordEllipsis" />
</Grid>
<Image x:Name="ServiceIcon" Grid.ColumnSpan="2" Grid.Column="3" Source="service_gtalk.jpg" Width="24" Height="24" VerticalAlignment="Top" Margin="0,20,0,0"/>
</Grid><!-- userInfo ends -->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,18,12,12">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer x:Name="messages" Grid.Row="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="0"/>
</Grid>
<ScrollViewer x:Name="inputBox_scroller" Grid.Row="2" Margin="0" MaxHeight="108" VerticalAlignment="Bottom">
<TextBox x:Name="inputBox" TextWrapping="Wrap" HorizontalContentAlignment="Stretch" Text="" FontSize="{StaticResource PhoneFontSizeMedium}" InputScope="Chat" AcceptsReturn="True" />
</ScrollViewer><!-- Content Panel ends -->
I am also using Jeff Wilcox's PhoneThemeManager 1.2 to make my app always load in light theme.
When I have appBar in this screen and the keyboard opens, there is extra margin of about 48 px below the textBox. When the phone theme is black, this shows an ugly black bar above the keyboard and below the textBox. When the phone theme is white, this black color bar is in white color. Here are screenshots to better demonstrate:
However, when I disable the appbar and then open the keyboard, this extra margin below the textBox is not there.
I want to disable this extra margin when keyboard is open just like how it happens in messaging hub where appBar is there, along with auto correct bar of keyboard and still this extra margin isn't there.
The only way (known by now) is to disabling the AppBar when you're typing.
Hi i had this problem too. Setting the Textbox.InputScope to nothing removes the extra bar above the keyboard, other than that I wasn't able to make it disappear, short of removing the AppBar.