Im trying to make a Android app using visual studio and MAUI
.
I have this XAML that display rows of data fetched from a mySQL DB, but I have a issue with the picker.
When I first select a number in any of the pickers, it works fine and the picker selection closes and displays the selected number.
And then if I open one of the other pickers ABOVE the first one it still works fine, but if I open a picker selection from one of the picker below, and select a number - it then shows the selected number as usual, but the picker selection window keeps reappearing again and again until i click Cancel, aslo it then shows back up no matter where I click in the rows (does not show up if I click outside of the listview)
I have tried alot of different things for hours, properly something real easy, but this is my first time trying out XAML and im hoping someone spots my error.
<ListView x:Name="listView" RowHeight="100">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="100">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding ImageSource}" WidthRequest="80" />
<Label Grid.Column="2" Text="{Binding Description}" />
<Label Grid.Column="1" Text="{Binding ArticleNumber}" />
<Picker x:Name="{Binding ArticleNumber}" Grid.Column="3" BackgroundColor="LightGray" FontSize="16" HorizontalTextAlignment="Center" TitleColor="Black" VerticalTextAlignment="Center" Title="Velg antall" TextColor="Black"
SelectedIndexChanged="OnQuantityPickerSelectedIndexChanged">
<Picker.Items>
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<x:String>5</x:String>
</Picker.Items>
</Picker>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This issue can be replicated on my side. To fix the picker selection window keeps popping up, you can use CollectionView as an alternative solution for now. There seems to be a focus issue when using Picker inside a ListView.
Here's the XAML code below for your reference:
<CollectionView x:Name="listView" >
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding ImageSource}" WidthRequest="80" />
<Label Grid.Column="2" Text="{Binding Description}" />
<Label Grid.Column="1" Text="{Binding ArticleNumber}" />
<Picker Grid.Column="3" BackgroundColor="LightGray" FontSize="16" HorizontalTextAlignment="Center" TitleColor="Black" VerticalTextAlignment="Center" Title="Velg antall" TextColor="Black"
>
<Picker.Items>
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<x:String>5</x:String>
</Picker.Items>
</Picker>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Related
In my application, I would like to display a ListView, with a vertical scroll. Inside the ListView, I would like to insert a Grid divided into two columns. Each column would like to have a list of objects in Binding, so 2 objects for each row. I thought of creating 2 ListView, with simultaneous scrolling, so that when I scroll on the left one, it also happens on the right one, as if it were a single. But the work is longer. Is there anything simpler than being able to use only a ListView with two objects for each row, one for each column?
This is my code XAML:
<ListView x:Name="CategorySx"
RelativeLayout.XConstraint="{ConstraintExpression
Type=Constant,
Constant=55}"
WidthRequest="130" HasUnevenRows="True" ItemsSource="{Binding listSx}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid RowSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image x:Name="SX" Grid.Row="0" Grid.Column="0" Source="{Binding ImageSx}"/>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding TitoloSx}"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView x:Name="CategoryDx"
RelativeLayout.XConstraint="{ConstraintExpression
Type=Constant,
Constant=200}"
WidthRequest="130" HasUnevenRows="True" ItemsSource="{Binding listDx}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid RowSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image x:Name="SX" Grid.Row="0" Grid.Column="0" Source="{Binding ImageDx}"/>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding TitoloDx}"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RelativeLayout>
Use a collectionView with Vertical grid would achieve the result easily:
<CollectionView ItemsSource="{Binding Monkeys}"
ItemsLayout="VerticalGrid, 2">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label Grid.Column="1"
Text="{Binding Name}"
FontAttributes="Bold"
LineBreakMode="TailTruncation" />
<Label Grid.Row="1"
Grid.Column="1"
Text="{Binding Location}"
LineBreakMode="TailTruncation"
FontAttributes="Italic"
VerticalOptions="End" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
I have a ListView that displays recent Search items. I have added it in the Stack Layout of my Main page. I want to show ListView over the other UI elements just like this: How can it be done.
I am currently using a new Page just for SearchBar and ListView. On the mainpage I have just a Search Button, when I click on that button, app navigates to the new Page that contains SearchBar and ListView. But I want it done on the same page. When Search button is clicked, SearchBar and ListView show become visible over the other UI elements.
Here is my code:
On MainPage.xaml
<Button Text="Search" Clicked="SearchButtonPressed" />
C# Code
void SearchButtonPressed(object sender, EventArgs e)
{
Navigation.PushAsync(new SearchPage());
}
SearchPage.xaml Code
<StackLayout>
<SearchBar x:Name="SearchBar"
TextChanged="Handle_SearchButtonPressed"
Placeholder="Search places..."
CancelButtonColor="Red" />
<ListView x:Name="ListView" ItemsSource="{Binding Source=list}" RowHeight="50" IsVisible="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Tapped="ViewCell_Tapped">
<Label Text="{Binding}" TextColor="Black" VerticalOptions="Center" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
you can do it with a grid:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Entry Grid.Row="0"
Placeholder="SearchItem"
TextChanged="Entry_TextChanged"/>
<Image Grid.Row="1"
Aspect="Fill"
Source="testImage.png"/>
<ListView x:Name="ListView"
Grid.Row="1"
VerticalOptions="Start"
HorizontalOptions="Fill"
IsVisible="False"
HeightRequest="300"
BackgroundColor="White"
Opacity="0.8">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
if the text of the search entry changed, show the listview:
private void Entry_TextChanged(object sender, TextChangedEventArgs e)
{
ListView.IsVisible = e.NewTextValue.Length > 0;
}
If you put the list which you will use for suggestion to the bottom of xaml hierarchy, you will resolve it without navige to another page. In addition, if you use the searchbar and listview in the grid and give a same row, they will overlap. Ex:
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="1" />
<RowDefinition Height="*" />
<RowDefinition Height="90" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="350" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SearchBar
Grid.ColumnSpan="3"
BackgroundColor="White"
CancelButtonColor="Red"
IsSpellCheckEnabled="False">
<SearchBar.Margin>
<OnPlatform Android="0,0,0,-5" />
</SearchBar.Margin>
</SearchBar>
<Label
Grid.Row="1"
Grid.ColumnSpan="3"
BackgroundColor="Gray" />
<Frame
Grid.Row="3"
Grid.Column="1"
Margin="0,21,0,21"
Padding="8"
BackgroundColor="White"
BorderColor="Red"
CornerRadius="20"
HasShadow="False"
VerticalOptions="End">
<Grid ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Label
Margin="5,0,0,0"
Text="Test"
TextColor="Red" />
</Grid>
</Frame>
<StackLayout
Grid.Row="2"
Grid.ColumnSpan="3"
BackgroundColor="White"
Opacity="0.8"
VerticalOptions="End">
<Label
x:Name="LabelDescription"
Grid.Row="1"
Grid.ColumnSpan="3"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Text="Test 2"
TextColor="Red" />
</StackLayout>
<BoxView
Grid.Row="2"
Grid.ColumnSpan="3" />
<ListView
Grid.RowSpan="3"
Grid.ColumnSpan="3"
Margin="0,50.5,0,0"
BackgroundColor="White"
HorizontalScrollBarVisibility="Never"
ItemsSource="{Binding SuggestionItems}"
RowHeight="42"
SeparatorVisibility="None"
VerticalOptions="Start"
VerticalScrollBarVisibility="Never">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid ColumnSpacing="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="58" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Label
Grid.Column="1"
Margin="0,0,10,0"
Text="{Binding item1}"
VerticalOptions="Center" />
<Label
Grid.Row="1"
Grid.Column="1"
Margin="0,0,10,0"
Text="{Binding item2}"
VerticalOptions="Center" />
<Label
Grid.Row="2"
Grid.ColumnSpan="2"
BackgroundColor="Gray" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
I am working on Xamarin forms using synfusion controls.
I needed a page with image upload in popup page, but image is not uploaded from the project image folder.
After debugging it seems the main problem is the tags and its properties
so please kindly suggest what should I use for the same.
<sfPopup:SfPopupLayout x:Name="popupLayout">
<sfPopup:SfPopupLayout.PopupView>
<sfPopup:PopupView HeaderTitle="Popup Imagess"
AnimationMode="None"
AutoSizeMode="None"
HeightRequest="{OnPlatform UWP={OnIdiom Phone=250, Tablet=290, Desktop=290}, Android=350, iOS=250}" >
<sfPopup:PopupView.ContentTemplate>
<DataTemplate>
<syncfusion:SfListView x:Name="listView" Orientation="Horizontal" Padding="10,10,10,10"
SelectionMode="None" Grid.Row="1"
ItemsSource="{Binding Gallerynfo}"
ItemDoubleTapped="ListView_ItemDoubleTapped_1"
ItemSpacing="3">
<syncfusion:SfListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Frame BackgroundColor="#EEEEEE" Padding="2">
<Grid x:Name="headerGrid" RowSpacing="1">
<Label LineBreakMode="NoWrap"
Text="photo" FontAttributes="Bold" TextColor="Black" HorizontalOptions="Center" VerticalOptions="Center"/>
<Image Source="{Binding Image}" Aspect="Fill"/>
<Label Grid.Row="1" Text="{Binding ImageTitle}"
LineBreakMode="WordWrap"
HorizontalTextAlignment="Start"
VerticalTextAlignment="Center"
TextColor="Black" Opacity="0.87"
Margin="16,0,0,0">
</Label>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
</Grid>
</Frame>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
</DataTemplate>
</sfPopup:PopupView.ContentTemplate>
</sfPopup:PopupView>
</sfPopup:SfPopupLayout.PopupView>
<sfPopup:SfPopupLayout.Content>
<StackLayout x:Name="layout">
<Button x:Name="clickToShowPopup" Text="ClickToShowPopup" VerticalOptions="Start"
HorizontalOptions="FillAndExpand" Clicked="ClickToShowPopup_Clicked" />
</StackLayout>
</sfPopup:SfPopupLayout.Content>
</sfPopup:SfPopupLayout>
We are using a ListView and every row of the list contains a Label and a Switch, there is some margin around the Switch, which wishes to remove.
Screenshot:
Xaml:
<ListView ItemsSource="{Binding ListOfEnums}" Grid.Row="0" Grid.Column="1"
Grid.ColumnSpan="2"
VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label VerticalTextAlignment="Center"
Text="{Binding Status, Converter={StaticResource EnumToStringConverter}}" />
<Switch IsToggled="{Binding Selected}" Grid.Column="1" Margin="0,0,20,0" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
What can we do to remove/reduce the spaces between the list rows and how to set Height and Padding for Toggle button?
Try changing the Grid height:
<ListView ItemsSource="{Binding ListOfEnums}" Grid.Row="0" Grid.Column="1"
Grid.ColumnSpan="2"
VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Height="your_height">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label VerticalTextAlignment="Center"
Text="{Binding Status, Converter={StaticResource EnumToStringConverter}}" />
<Switch IsToggled="{Binding Selected}" Grid.Column="1" Margin="0,0,20,0" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
I want to create a ListView mentioned in the picture below. The problem is that I don't want to create a full rounded ListView. I just want a rectangle shape ListView Header and the rounded first and last ViewCell? Can anyone tell me how to do that?
You can use this type
<ListView x:Name="lstView"
BackgroundColor="White"
HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="0,10,0,15">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="10" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Column="1" Source="{Binding Image}" />
<StackLayout Grid.Column="2" Orientation="Vertical">
<Label Text="{Binding Title}" TextColor="#f36e22" />
<Label Text="{Binding Text}" TextColor="Black" />
</StackLayout>
<Image Grid.Column="3" Source="{Binding smallImage}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>