<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
in UWP the above results in the first column to horizontally expand just enough to fit the contents but second column grows to take the rest of the available width on the device screen.
in iOS / Android / Wasm the first column expands to take the whole screen - I never get to see the second column. I believe the second column may still be there but squashed or pushed outside of the screen.
The workaround for me was to set the column widths explicitly by for example saying first column is 30* and forth column is 70*.This also works and correctly shows the 2 columns:
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="leftCol" Width="110"/>
<ColumnDefinition x:Name="rightCol" Width="*"/>
</Grid.ColumnDefinitions>
In general Grid.Auto is supported by Uno on iOS/Android/WASM. The code below works as expected, for example.
If you're seeing an issue, it's probably related to the content of the Grid. If you're able to post some code that reproduces the issue, we can help you further.
<Grid Margin="0,100,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="In auto"
Grid.Column="0" />
<Border Background="Pink"
Height="50"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Grid.Column="1"/>
</Grid>
Windows:
iOS:
Related
I have this grid:
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.07*" />
<ColumnDefinition Width="1.2*" />
<ColumnDefinition Width="0.05*" />
</Grid.ColumnDefinitions>
</Grid>
This Grid is part of titleview in android and ios. I need to center the icon in the middle column but since ios and android handle the title view differently the icon in the middle does sit slightly more left bound on ios while it sits in the center on android. I would need to set different colum widths for each platform.
Is this doable?
Thank you!
You can use following code to achieve for different Colum Definitions for different platforms (android, ios).
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition >
<ColumnDefinition.Width>
<OnPlatform x:TypeArguments="GridLength">
<On Platform="iOS" Value="1.2*"></On>
<On Platform="Android" Value="2.07*"></On>
</OnPlatform>
</ColumnDefinition.Width>
</ColumnDefinition>
<ColumnDefinition Width="1.2*" />
<ColumnDefinition Width="0.05*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="By default, a Grid contains one row and one column." />
</Grid>
I am working on a cross-platform project using Xamarin forms. I am using carouselview to display an image button. See the code snippets below. The customImageButtonStyle sets to Aspect.Aspect.Fit. Initially it works as intended. However, after the image is changed, the image is still displayed, but smaller, ie. no longer does Aspect.Fit. If I place the same code outside the carouselview, it works without such a issue.
<StackLayout Grid.Row="0" Grid.Column="1" Orientation="Vertical" HorizontalOptions="CenterAndExpand">
<Grid x:Name="relayGrid" HorizontalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="4.0*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<views:CustomImageButton x:Name="relayButton" Source="{Binding RelayIcon}" Grid.Row="0" Grid.Column="0"
Style="{StaticResource customImageButtonStyle}"
Command="{Binding NavigateCommand}" CommandParameter="{x:Type views:RelayPage}" />
<Label Text="RELAYS" Grid.Row="1" Grid.Column="0" Style="{StaticResource deviceHomeBottomTextStyle}" />
</Grid>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding NavigateCommand}" CommandParameter="{x:Type views:RelayPage}" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Grid>
</x:Array>
</controls:CarouselViewControl.ItemsSource>
Please note this issue is also logged at https://github.com/alexrainman/CarouselView/issues/561
It seems this is a Xamarin forms issue. I've tried to replace the image button with an image, the problem goes away. It seems sometimes AspectFit doesn't work for ImageButton when the bound image changes from a view model.
How should be Xamarin Xaml Formatting Standart like be?
For example I will share two same code with different formatting. Which one should I prefer and why?
<!-- One Line Formatting -->
<Grid Grid.Row="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="6*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" FontSize="40" HorizontalOptions="CenterAndExpand" Text="Welcome, good to see you" TextColor="{StaticResource DarkIndigo}" Style="{StaticResource LabelLight}" />
<Label Grid.Row="1" FontSize="24" HorizontalOptions="CenterAndExpand" Text="{Binding UserName}" TextColor="{StaticResource DarkIndigo}" Style="{StaticResource LabelExtraBold}"/>
</Grid>
<!-- Separating lines -->
<Grid Grid.Row="0"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="6*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Label Text="Welcome, good to see you"
Grid.Row="0" FontSize="40"
HorizontalOptions="CenterAndExpand"
TextColor="{StaticResource DarkIndigo}"
Style="{StaticResource LabelLight}" />
Label Text="{Binding UserName}"
Grid.Row="1"
FontSize="24"
HorizontalOptions="CenterAndExpand"
TextColor="{StaticResource DarkIndigo}"
Style="{StaticResource LabelExtraBold}"/>
</Grid>
This is quite opinion based, but per my experience and personal test, I would advise to use the second option.
The biggest advantage is related to easily seing all the attributes related to an element, without the need for scroll (imagine having a small screen or such).
The second option is better, as it's easier to read.
Just keep in mind, if somebody would use your code, he/she won't be thankful because of long lines to read.
As for me, I use ReSharper, that could do code formatting for me. You should try that to!
I am looking for an equivalent of constraint layout from Android in Xamarin forms. Is there any? How can I achieve this in XAML? I have been looking around and have not found anything useful.
Thank you so much for any recommendations.
In general, for my base page's layout I use a grid (but there are many ways to handle a page layout...)
Inside this grid you can put your UI elements. But what is interesting is that you can set Width x Height for each rows and columns of the grid.
Then you can also set margin properties for each of your UI elements.
I'm not familiar with Android design but in Xamarin Forms you can have something like that:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*" />
<ColumnDefinition Width="0.75*" />
</Grid.ColumnDefinitions>
<Label Text="Top Left" Grid.Row="0" Grid.Column="0" Margin="5,10,5,10" />
<Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
<Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" />
<Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
</Grid>
This sample generates a layout with 4 parts (2 rows, 2 columns). Rows will have the same height and fill the screen. 2nd column will be 3x larger than 1st one and both will fill the screen.
Margin="5,10,5,10" ensure that an empty space of 5 'pixels' is always present before the label, 10 'pixels' are present on top the label ...
There are several controls to manage layout, like StackLayout or Listview (to manage items). If you have a more concrete example to implement, don't hesitate to complete your question.
I suggest you to check this documentation, you will find all you need !
Xamarin Forms layout documentation
I have a Stepper in an ItemTemplate and it looks very odd on Windows Phone.
If I don't set any WidthRequest, it occupies most of the screen (why?).
If I set, the Stepper is cut and visible only partially.
This is the XAML:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Stepper Grid.Row="0"
Grid.Column="1"
HorizontalOptions="FillAndExpand"
Increment="1"
Maximum="50"
Minimum="0"
VerticalOptions="CenterAndExpand"
Value="{Binding MyValue}" />
This is how it looks on Android (completely good):
This is how it looks on Windows Phone (auto sized):
This is how it looks on Windows Phone (fixed sized - 100):
What should I do to make the + and - sign visible on Windows Phone?