I wrote a simple CollectionView (.Net MAUI) with a DataTemplate and get completely different results when I deploy the code to either a Android device or a iOS device.
It would be really awesome if someone has a hint - this project drives me crazy since 4 months :D
I used the same code in Xamarin before without any issues.
EDIT:
I added the WidthRequest (and a margin) and now the style is as expected - thanks so far. (I also checked the text colors which are fine and I changed the TextColor of two lables to red - just for testing)
But I still have another issue. When the iOS App is opened, the part on the right hand side does not show up and it seems that the app is hung up. If I try to scroll, then I get a completlely random list of my items (some are missing) and everything is stuck.
<RefreshView x:DataType="local:ItemsViewModel" Command="{Binding LoadItemsCommand}" IsRefreshing="{Binding IsBusy, Mode=TwoWay}">
<CollectionView x:Name="ItemsListView" ItemsSource="{Binding Items}" SelectionMode="None">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10" x:DataType="model:Cryptocurrency">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Image Source="{Binding image}" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" HeightRequest="50" WidthRequest="50" Margin="0,0,10,0" />
<Label Text="{Binding name}" Grid.Row="0" Grid.Column="1"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemTextStyle}"
FontSize="16" />
<Label Text="Price" Grid.Row="0" Grid.Column="2"
LineBreakMode="NoWrap" HorizontalTextAlignment="End" Padding="0,0,20,0"
Style="{DynamicResource ListItemTextStyle}"
FontSize="16" />
<Label Text="x to ATH" Grid.Row="0" Grid.Column="3"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemTextStyle}"
FontSize="16" />
<Label Text="{Binding market_cap_rank}" Grid.Row="1" Grid.Column="1"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemDetailTextStyle}"
FontSize="13" />
<Label Text="{Binding current_price, StringFormat='{}{0:C}'}" Grid.Row="1" Grid.Column="2"
LineBreakMode="NoWrap" HorizontalTextAlignment="End" Padding="0,0,20,0"
Style="{DynamicResource ListItemDetailTextStyle}"
FontSize="13" />
<Label Text="{Binding RatioToATH}" Grid.Row="1" Grid.Column="3"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemDetailTextStyle}"
FontSize="13" />
<Grid.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding Source={RelativeSource AncestorType={x:Type local:ItemsViewModel}}, Path=ItemTapped}"
CommandParameter="{Binding .}">
</TapGestureRecognizer>
</Grid.GestureRecognizers>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</RefreshView>
EDIT2:
It also works flawlessly on macOS (MacCatalyst)
You could set the constraint of Image(give it a width), please refer to the following code.
<Image Source="{Binding image}" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" HeightRequest="50" WidthRequest="150" />
Yes! this is how MAUI work they will call out the native controls instead of control that is written in the middle layer like Flutter
They provide you OnPlatform so you can easily adjust the UI better
IsVisible={x:OnPlatform WinUI=true, Android=false, iOS=false, Tizen=false, MacCatalyst=false}
Related
Really at a loss here.
I'm loading an image into an announcement page:
if (!string.IsNullOrWhiteSpace(_announcementDetails.ImageUrl))
{
this.DefaultLogo.IsVisible = false;
this.AnnouncementImage.Source = _announcementDetails.ImageUrl;
this.ImageLogo.IsVisible = true;
}
<StackLayout Grid.Row="0" IsVisible="False" VerticalOptions="Center" Spacing="0" Padding="0,0,0,10" x:Name="ImageLogo">
<Image x:Name="AnnouncementImage"
VerticalOptions="Fill"
HorizontalOptions="Fill" ></Image>
</StackLayout>
<StackLayout Grid.Row="1" Padding="20,30,20,30" x:Name="MainContent">
<Label Margin="0,0,0,10" Text="Empty placeholder bug" x:Name="AnnouncementTitle" FontAttributes="Bold" HorizontalTextAlignment="Center" FontSize="18" />
<Label HorizontalTextAlignment="Center" Text="Empty placeholder body bug" x:Name="AnnouncementBody" Margin="0,0,0,10"/>
<Grid HorizontalOptions="CenterAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" BackgroundColor="{StaticResource Primary}" BorderRadius="2" Text="{x:Static resources:AppResources.AboutLearnMore}" VerticalOptions="End" TextColor="White" x:Name="OpenWebsite"/>
<Button Grid.Column="1" BackgroundColor="{StaticResource Primary}" BorderRadius="2" Text="{x:Static resources:AppResources.OK}" VerticalOptions="End" TextColor="White" x:Name="Close"/>
</Grid>
</StackLayout>
After the image pops in, when the device is in landscape, any text below disappears. If you rotate the device to portrait and back, the text re-appears.
https://i.imgur.com/PBaOv4J.png
Rotate the device to portrait and back...
https://i.imgur.com/emfQKmo.png
Any help? No issues in portrait mode. Running on android.
I want to give the user the ability to go the previous page when using the app on any page. But I don't know how to go about it.
In the XAML code:
<Grid Grid.Row="0" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
</Grid.ColumnDefinitions>
<Image Margin="0,20,0,0"
HeightRequest="25"
HorizontalOptions="Center"
Source="back"
VerticalOptions="Center"
WidthRequest="25" />
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type vm:KlinectBaseViewModel}}, Path=BackView}" />
</Grid.GestureRecognizers>
</Grid>
CS:
public ICommand BackView => new Command(async () => await NavigationService.GoBack());
You could set the TitleView of ContentPage as you want . For example
<NavigationPage.TitleView>
<Grid Grid.Row="0" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition Width="0.6*" />
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition Width="0.1*"/>
</Grid.ColumnDefinitions>
<!--back to preview page-->
<ImageButton Margin="0,20,0,0"
Grid.Column="0"
HeightRequest="25"
HorizontalOptions="Center"
Source="back.png"
VerticalOptions="Center"
WidthRequest="25"
Command="{Binding xxx}"/>
<!--back to last page , if necerssary-->
<ImageButton Margin="0,20,0,0"
Grid.Column="1"
HeightRequest="25"
HorizontalOptions="Center"
Source="back.png"
VerticalOptions="Center"
WidthRequest="25"
Command="{Binding xxx}"/>
<!--Title Label-->
<Label Grid.Column="2" Text="Title" TextColor="White" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
</Grid>
</NavigationPage.TitleView>
For more details you could check https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical#displaying-views-in-the-navigation-bar .
have a ListView in which for each element of the List you have 3 buttons for 3 different options, when you enter the screen there are no overflow problems in the images of the ImageButton, but when you do the first scroll the sources start to overflow as shown in the following image
The images lose the center and are misaligned as you scroll up or down, this problem does not occur in iOS, only occurs in Android (version 6,7,8 and 9), apparently it is a problem like Android render the images
I tried, changing the ImageButton control to Button and the problem persists, also trying to assign the "Aspect" property to the ImageButton, but I'm not getting successful results, any help how to fix this? then my code XAML
<ListView
ItemsSource="{Binding ListaRecintos}"
SelectionMode="None"
IsRefreshing="{Binding IsRefreshing, Mode=TwoWay}"
RowHeight="80"
HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout
Margin="0,4,0,0"
Orientation="Vertical">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3.9*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label
Text="{Binding Code}"
HorizontalOptions="Start"
FontSize="Small"
WidthRequest="40"
HeightRequest="30"
FontAttributes="Bold"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="CenterAndExpand"
Grid.Column="0">
</Label>
<StackLayout Orientation="Vertical"
Grid.Column="1">
<Label
Text="{Binding Name}"
HorizontalOptions="Start"
FontSize="Small"
HeightRequest="32"
MaxLines="2"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="Center"
VerticalTextAlignment="Center">
</Label>
</StackLayout>
</Grid>
<!--STACK BUTTON-->
<StackLayout
Orientation="Horizontal"
HorizontalOptions="EndAndExpand"
Margin="0,1,1,0">
<!--BUTTON 1-->
<ImageButton
Source="ic_check_wt"
Aspect="AspectFit"
CornerRadius="0"
BackgroundColor="{StaticResource das.color.estado_success}"
HorizontalOptions="End"
VerticalOptions="Center"
HeightRequest="35"
WidthRequest="50"
CommandParameter="2"
Command="{Binding ControlAuditoriaCommand}"
IsEnabled="{Binding EnabledButton}"/>
<!--BUTTON 2-->
<ImageButton
Source="ic_hammer"
BackgroundColor="{StaticResource das.color.estado_primary}"
HorizontalOptions="End"
CornerRadius="0"
Aspect="AspectFit"
VerticalOptions="Center"
HeightRequest="35"
WidthRequest="50"
CommandParameter="1"
Command="{Binding ControlAuditoriaCommand}"
IsEnabled="{Binding EnabledButton}"/>
<!--BUTTON 3-->
<ImageButton
Source="ic_arrow_up"
BackgroundColor="{StaticResource das.color.estado_success}"
HorizontalOptions="End"
CornerRadius="0"
Aspect="AspectFit"
VerticalOptions="Center"
HeightRequest="35"
WidthRequest="50"
CommandParameter="3"
Command="{Binding ControlAuditoriaCommand}"
IsEnabled="{Binding EnabledButton}"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
How can I avoid this behavior? Any help for me?
I suggest you use (Frame + image ) instead of ImageButton , and add tapgesture on it .
I have 4 buttons arranged in a grid. I want each button to display an image exactly the size of that button, but am at a loss as to how to do this. I'm trying the following method right now, but am given the error "cannot set the content of button as it does not have a content property attribute" when I include the line.
I tried adding an image to the first button in the grid, but the image is far too large. I want the image to perfectly overlay the size of the button, regardless of the size of the phone I'm using.
This is my code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.ColumnSpan="2" Text="Welcome," HorizontalOptions="Center" FontSize="Large" TextColor="Aqua"/>
<Label Grid.Row="1" Grid.ColumnSpan="2" Text="User" HorizontalOptions="Center" FontSize="Large" TextColor="Aqua"/>
<Button Grid.Row="2" Grid.Column="0" Image="iris_light" Text="Student
Directory" TextColor="Aqua"/>
<Button Grid.Row="2" Grid.Column="1" Text="Executive
Directory" TextColor="Aqua"/>
<Button Grid.Row="3" Grid.Column="0" Text="Voting" TextColor="Aqua"/>
<Button Grid.Row="3" Grid.Column="1" Text="Map" TextColor="Aqua">
<Image Source="iris_light"/>
</Button>
</Grid>
If you want that (meaning that the Image property is not flexible enough for you), you must write a custom renderer.
Unlike Windows, iOS and Android are not based on the XAML so content of their controls is not editable that way as it is not supported by the underlying OS.
Solved my problem:
<Grid BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.ColumnSpan="2" Text="Welcome," HorizontalOptions="Center" FontSize="Large" TextColor="Aqua"/>
<Label Grid.Row="1" Grid.ColumnSpan="2" Text="User" HorizontalOptions="Center" FontSize="Large" TextColor="Aqua"/>
<Image Grid.Row="2" Grid.Column="0" Source="iris_light"/>
<Button Grid.Row="2" Grid.Column="0" BackgroundColor="Transparent" Text="Student
Directory" TextColor="Aqua"/>
<Image Grid.Row="2" Grid.Column="1" Source="iris_light"/>
<Button Grid.Row="2" Grid.Column="1" BackgroundColor="Transparent" Text="Executive
Directory" TextColor="Aqua"/>
<Image Grid.Row="3" Grid.Column="0" Source="iris_light"/>
<Button Grid.Row="3" Grid.Column="0" BackgroundColor="Transparent" Text="Voting" TextColor="Aqua"/>
<Image Grid.Row="3" Grid.Column="1" Source="iris_light"/>
<Button Grid.Row="3" Grid.Column="1" BackgroundColor="Transparent" Text="Map" TextColor="Aqua"/>
</Grid>
I am looking to create a xamarin cross platform dashboard page with some buttons. Each button have an icon image and a text. I tried two approaches 1. with using inbuilt property of Icon of Button control and another with separate StackLayout
But my output needs some optimization on xaml
The xaml i tried is like this
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="150" ></RowDefinition>
<RowDefinition Height="150"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" BackgroundColor="#3094d2" >
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Image Source="#drawable/announcement.png" VerticalOptions="Center" HorizontalOptions="Center" />
</StackLayout>
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Button Text="Announcement" TextColor="White" VerticalOptions="Center" HorizontalOptions="Center" />
</StackLayout>
</StackLayout>
<Button Text="News & Events" Grid.Row="0" Grid.Column="1" BackgroundColor="#287cbe" Image="#drawable/announcement.png" TextColor="White" Clicked="Button_NewsHome_Clicked" />
<Button Text="Messages" Grid.Row="1" Grid.Column="0" BackgroundColor="#5153a9" Image="#drawable/announcement.png" TextColor="White" Clicked="Button_SMSHome_Clicked" />
<Button Text="SMS Alers" Grid.Row="1" Grid.Column="1" Image="#drawable/announcement.png" BackgroundColor="#a434a6" TextColor="White" Clicked="Button_SMSHome_Clicked" />
</Grid>
What adjustments i have to do on Vertical and Horizontal align to make my ouput looks like that on the left side
You can use XLabs Extended Button to get desired output