.NET Maui Labels in VerticalStackLayout in a CollectionView not wrapping according the LineBreakMode - maui

I have a HorizontalStackLayout with an image and a VerticalStackLayout containing a Label to hold my Subject. If I use a smaller device I would the Subject to be wrapped accoording to the width of the device and the Labels LineBreakMode. But this is not happend.
If I manually set the width of the VerticalStackLayout the Subject is wrapped but I want this to be automaticly done.
What have I missed or done wrong?
Using VS 2022 v17.3.0 Preview 4.0
My code look like this:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:model ="clr-namespace:fotbollz.Model"
x:Class="fotbollz.MainPage">
<CollectionView>
<CollectionView.ItemsSource>
<x:Array Type="{x:Type model:NewsItem}">
<model:NewsItem Created="2022-07-27" Updated="2022-07-27 12:15"
Subject="ÖFK klar för Allsvenskan igen och man är jätteglada!"
Author="Firstname Lastname"
ClubLogo="https://fotbollz.se/_upload/teams/logo/ofk_logo.gif" />
<model:NewsItem Created="2022-07-27 14:02" Updated="2022-07-27 12:15" Subject="Min rubrik2" Author="Firstname Lastname" ClubLogo="https://fotbollz.se/_upload/teams/logo/ofk_logo.gif" />
<model:NewsItem Created="2022-07-27 12:03" Updated="2022-07-27 12:15" Subject="Ytterhogdal vinner igen!" Author="Firstname Lastname" ClubLogo="https://fotbollz.se/_upload/teams/logo/ytterhogdal_logo.gif" />
<model:NewsItem Created="2022-07-27 12:04" Updated="2022-07-27 12:15" Subject="Min rubrik4" Author="Firstname Lastname" ClubLogo="https://fotbollz.se/_upload/teams/logo/ifk_logo.gif" />
<model:NewsItem Created="2022-07-27 12:05" Updated="2022-07-27 12:15" Subject="Häggenås spelade oavgjort!" Author="Myggan Handler" ClubLogo="https://fotbollz.se/_upload/teams/logo/haggenas.png" />
</x:Array>
</CollectionView.ItemsSource>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:NewsItem">
<HorizontalStackLayout Padding="5">
<!-- This is the url to the club logo-->
<Image Source="{Binding ClubLogo}" HeightRequest="75" WidthRequest="75" Aspect="AspectFill" />
<!-- This is the Subject author and created date of the news
Problem: Why isn't the long text wrapped as described in LineBreakMode. If I set WidthRequest="275" then the text is wrapped.
-->
<VerticalStackLayout Padding="5" HorizontalOptions="Center">
<Label Text="{Binding Subject}" FontSize="14" LineBreakMode="MiddleTruncation" MaxLines="1" FontAttributes="Bold" />
<Label FontSize="12" >
<Label.Text>
<MultiBinding StringFormat="{}{0:yyyy-MM-dd HH:mm} Av: {1}">
<Binding Path="Created" />
<Binding Path="Author" />
</MultiBinding>
</Label.Text>
</Label>
<Label Text="{Binding Ingress}" FontSize="18" />
</VerticalStackLayout>
</HorizontalStackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ContentPage>
The attached image shows the result: on the left is what I want and the picture on the right is what I get: What I want and what I get

Related

Correct AbsoluteLayout positioning/overlay

The main goal of the task to create AutoSuggest control.
In my case AutoSuggest control is custom control inherited from Grid
<Grid xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
...
xmlns:handlers ="clr-namespace:CrowdExchangeV2.Controls.Handlers"
WidthRequest="150">
<Grid.RowDefinitions>
<RowDefinition Height="35"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Frame Grid.Row="0"
...>
<handlers:BorderlessEntry Placeholder="{Binding Source={x:Reference this}, Path=Placeholder}"
WidthRequest="150"
.../>
</Frame>
<AbsoluteLayout
WidthRequest="150"
MaximumHeightRequest="100"
Grid.Row="1"
x:Name="resAl">
<ScrollView
MaximumHeightRequest="100"
MaximumWidthRequest="160"
x:Name="resSV">
<CollectionView x:Name="list">
<CollectionView.ItemTemplate>
<DataTemplate>
<HorizontalStackLayout VerticalOptions="Center"
HorizontalOptions="Start">
<Label Text="{Binding Key}" Padding="0,0,4,0"/>
<Label Text="{Binding Value}"/>
</HorizontalStackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ScrollView>
</AbsoluteLayout>
</Grid>
So, control looking for suggestions in Dictionary while user typing text in Entry. The thing is - when CollectionView updates suggestions it pushes all the other elements on ContentPage down... but suppose to overlay them. All right lets wrap Suggester in AbsoluteLayout on contentPage and setBounds to a desirable position. (PS: Suggester name is suggester 0_o)
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
...
Title=" ">
<AbsoluteLayout x:Name="mainAbs">
<AbsoluteLayout Margin="0,0,0,0"
x:Name="suggestAl">
<suggester:Suggester Placeholder="USD"
SearchDictionary="{Binding SearchCurrency}"
MaximumHeightRequest="150"
MaximumWidthRequest="150"/>
</AbsoluteLayout>
<Grid Padding="10" AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<ScrollView>
<VerticalStackLayout>
...
<Frame HorizontalOptions="Fill">
<VerticalStackLayout>
...
<VerticalStackLayout HeightRequest="80"
x:Name="currVSL">
<Label Text="Currency out:"
VerticalOptions="Start"
HorizontalOptions="Start"
FontSize="Header"
x:Name="curLbl"/>
**SUggester should be here**
</VerticalStackLayout>
</VerticalStackLayout>
</Frame>
</VerticalStackLayout>
</ScrollView>
</Grid>
</AbsoluteLayout>
</ContentPage>
The first idea is - to grab x:Name="currVSL" bounds, adjust it for size of Label, and place x:Name="suggestAl" there, but i cant get absolute position of x:Name="currVSL" only relative and in absolute terms it's wrong
I don't want to hardcode position in static numbers, because the position highly depends on a particular device.
So the question is how to achieve a desirable result - Place x:Name="currVSL" under the x:Name="curLbl" label.
OR
Might be there is a more elegant solution to show suggestion results without pushing all the other elements down?(Read:overlay other elements on UI)
Image to visualise UI

DotNet Maui - Button - control the Imagesource size

How can I resize the image when I use the ContentLayout the put the text below the ImageSource.
<HorizontalStackLayout>
<Button MaximumHeightRequest="50"
Text="Open"
VerticalOptions="Start"
ImageSource="file_open.png"
ContentLayout="left,50" />
<Button Text="Open file test"
ContentLayout="Top,0"
VerticalOptions="Start"
ImageSource="file_open.png"
Command="{Binding DivideBy2Command}" />
<ImageButton x:Name="Toto"
MaximumHeightRequest="50"
VerticalOptions="Start"
Source="file_open.png"
Command="{Binding DivideBy2Command}" />
</HorizontalStackLayout>
Per Feedback from ToolmakerSteve and Alexandar May - MSFT Stackoverflow users and also playing with Padding I was able get what I need. Here the updated code.
<HorizontalStackLayout>
<Button Text="Open"
HeightRequest="50"
VerticalOptions="Start"
ImageSource="file_open.png"
ContentLayout="left, 0"
/>
<Button
VerticalOptions="Start"
Text="Open File"
FontSize="10"
ImageSource="file_open.png"
ContentLayout="Top,-10"
Padding="2,-10,2,2"
HeightRequest="50"
WidthRequest="50"
/>
<ImageButton
VerticalOptions="Start"
Source="file_open.png"
MaximumHeightRequest="50"
/>
</HorizontalStackLayout>
Here the Output
This can be achieved by setting the HeightRequest and WidthRequest of the Button like below:
<HorizontalStackLayout >
<Button
VerticalOptions="Start"
MaximumHeightRequest="50"
Text="Open"
ImageSource="file_open.png"
ContentLayout="left, 50"
/>
<Button
VerticalOptions="Start"
Text="Open file test"
FontSize="10"
ImageSource="file_open.png"
Command="{Binding DivideBy2Command}"
ContentLayout="Top,0"
HeightRequest="100"
WidthRequest="100"
/>
<ImageButton
VerticalOptions="Start"
x:Name="Toto"
Source="file_open.png"
MaximumHeightRequest="50"
Command="{Binding DivideBy2Command}"
/>
</HorizontalStackLayout>

How to change position of the app title in .NET MAUI?

I want to change the position of title to the middle or right side of the screen. I used the following code:
<Shell
x:Class="CostManagement.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:CostManagement"
Shell.FlyoutBehavior="Disabled"
FlowDirection="RightToLeft">
<ShellContent
Title="Main Page"
ContentTemplate="{DataTemplate local:MainPage}"
Route="MainPage" />
</Shell>
How can I change its position?
This can be customized by setting the Shell.FlyoutContent and use the CollectionView to define the appearance of the menu item like the title as you said. You can refer to the code sample below:
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="CostManagement.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:CostManagement"
FlyoutBackgroundColor="LightGray"
FlyoutBehavior="Flyout"
FlyoutWidth="400"
FlyoutHeight="400">
<Shell.FlyoutContent>
<CollectionView BindingContext="{x:Reference shell}" ItemsSource="{Binding FlyoutItems}" IsGrouped="True">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="40,*" Padding="10">
<Image Source="{Binding Icon}"></Image>
<Label Grid.Column="1" Text="{Binding Title}" TextColor="Black"></Label>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Shell.FlyoutContent>
</Shell>

Flex Layout , Xamarin Forms one image with three labels

Trying to put one image and three label in a row with multiple columns just using flex layout and without nested flex layout, need some help.
<XF.FlexLayout direction="Column">
<XF.CollectionView itemsSource={Bind.oneWay(() => this.viewModel.list)}
itemsLayout="VerticalList">
<XF.CollectionView.itemTemplate>
<XF.FlexLayout {...XF.FlexLayout.grow(1)}>
<XF.Label margin="10, 10, 10, 10" text={Bind.twoWays((x) => x.data.name)}
fontAttributes="Bold" fontSize={18}/>
<XF.Label text={Bind.twoWays((x) => x.data.description)}
fontSize={16} />
<XF.Label text={Bind.twoWays((x) => x.data.price)}
fontSize={16} />
<XF.ImageButton margin="10, 10, 10, 10" widthRequest={80} heightRequest={120} {...XF.FlexLayout.basis(100)}
source={Bind.twoWays((x) => x.data.url)}
aspect="AspectFill"
{...XF.FlexLayout.order(-1)} />
<XF.Button {...XF.FlexLayout.basis(150)}
margin="10, 10, 10, 10"
heightRequest={50}
widthRequest={150}
text="Details"
borderRadius="6"
backgroundColor="#F26857"
borderColor="#F26857"
borderWidth={2}
textColor={Colors.white} />
</XF.FlexLayout>
</XF.CollectionView.itemTemplate>
</XF.CollectionView>
</XF.FlexLayout>
</XF.ContentPage>
You can use Grid to achieve it:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="1" />
<Label text="lbl1" Grid.Row="0" Grid.Column="2" />
<Label text="lbl2" Grid.Row="0" Grid.Column="3" />
<Label text="lbl3" Grid.Row="0" Grid.Column="4" />
</Grid>

Telerik Xamarin RadListView weird behavior

In Xamarin Forms (Portable) project when I place RadlistView in first page I got binded list which not render template in Android. I not checked other platforms. In this case the RadListView in second page is rendered ok.
First page with RadListView
Second page with RadListView
But if I replace radlistview in first page with Xamarin.Forms.ListView, it showed normal but in the second page RadListView showed without template.
The first page with Xamarin ListView
Second page with RadListView losted template
First page code below :
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Name="Page"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
xmlns:viewmodels="clr-namespace:InRestoApp.ViewModels"
xmlns:behaviors="clr-namespace:InRestoApp.Behaviors"
xmlns:helpers="clr-namespace:InRestoApp.Helpers"
x:Class="InRestoApp.Views.HallsPage">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="10, 20, 10, 0" />
<On Platform="Android, UWP" Value="10, 0" />
</OnPlatform>
</ContentPage.Padding>
<ContentPage.Resources>
<helpers:InvertBoolConverter x:Key="invertBoolConverter"/>
</ContentPage.Resources>
<Grid HeightRequest="800">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<telerikDataControls:RadListView x:Name="ItemsListView" SelectionMode="Single" HeightRequest="800"
ItemsSource="{Binding Halls}"
ItemTapped="ListView_OnItemTapped">
<telerikDataControls:RadListView.LayoutDefinition>
<telerikListView:ListViewLinearLayout VerticalItemSpacing="0" />
</telerikDataControls:RadListView.LayoutDefinition>
<telerikDataControls:RadListView.ItemTemplate>
<DataTemplate>
<telerikListView:ListViewTemplateCell>
<telerikListView:ListViewTemplateCell.View>
<Frame CornerRadius="5" HasShadow="True" OutlineColor="#4488F6" Padding="10" Margin="10">
<StackLayout Orientation="Horizontal">
<Label Text="{Binding HallCode}" FontSize="Large" VerticalOptions="StartAndExpand" />
<Label Text="{Binding HallName}" FontSize="Medium" VerticalOptions="CenterAndExpand" />
</StackLayout>
</Frame>
</telerikListView:ListViewTemplateCell.View>
</telerikListView:ListViewTemplateCell>
</DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>
</Grid>
</ContentPage>
Second view XAML below (Used ContentView because it is openening as slide drawer)
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
xmlns:helpers="clr-namespace:InRestoApp.Helpers"
xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
x:Name="productView"
x:Class="InRestoApp.Views.ProductsView">
<ContentView.Resources>
<helpers:ImageBytesConverter x:Key="imageBytesConverter"/>
<helpers:TempConverter x:Key="tempConverter"/>
<helpers:ImageFileToImageSourceConverter x:Key="imageFileToImageSourceConverter"/>
</ContentView.Resources>
<ContentView.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="6*"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Frame CornerRadius="2" HasShadow="True" OutlineColor="Aquamarine" Padding="10" Margin="2">
<Image x:Name="btnClear" Source="clear_icon.png" HeightRequest="50" WidthRequest="50" >
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.ClearProductsFilterCommand, Source={x:Reference productView}}" CommandParameter="{Binding .}" />
</Image.GestureRecognizers>
</Image>
</Frame>
<telerikDataControls:RadListView x:Name="CategoriesListView" Grid.Row="1" SelectedItem="{Binding SelectedProductCategory, Mode=TwoWay}" SelectionMode="Single"
ItemsSource="{Binding ProductCategories}">
<telerikDataControls:RadListView.LayoutDefinition>
<telerikListView:ListViewLinearLayout VerticalItemSpacing="0" />
</telerikDataControls:RadListView.LayoutDefinition>
<!--<telerikDataControls:RadListView.ItemStyle>
<telerikListView:ListViewItemStyle BackgroundColor="Transparent" BorderLocation="None"/>
</telerikDataControls:RadListView.ItemStyle>-->
<telerikDataControls:RadListView.ItemTemplate>
<DataTemplate>
<telerikListView:ListViewTemplateCell>
<telerikListView:ListViewTemplateCell.View>
<Frame CornerRadius="10" HasShadow="True" OutlineColor="#4488F6" Padding="10" Margin="10" >
<StackLayout Orientation="Horizontal">
<StackLayout>
<ffimageloading:CachedImage HeightRequest="70" Aspect="AspectFill" WidthRequest="70" Margin="5"
DownsampleHeight="70" DownsampleUseDipUnits="false"
LoadingPlaceholder="image_loading.png" ErrorPlaceholder="image_error.png"
Source="{Binding FileName, Converter={StaticResource imageFileToImageSourceConverter}}"/>
<Label Text="{Binding ProductCategoryName}" FontSize="Medium" VerticalOptions="CenterAndExpand" />
</StackLayout>
</StackLayout>
</Frame>
</telerikListView:ListViewTemplateCell.View>
</telerikListView:ListViewTemplateCell>
</DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>
</Grid>
<telerikDataControls:RadListView x:Name="ProductsListView" Grid.Column="1" SelectedItem="{Binding SelectedProduct, Mode=TwoWay}" SelectionMode="Single"
ItemsSource="{Binding Products}">
<telerikDataControls:RadListView.LayoutDefinition>
<telerikListView:ListViewLinearLayout VerticalItemSpacing="0" />
</telerikDataControls:RadListView.LayoutDefinition>
<telerikDataControls:RadListView.ItemTemplate>
<DataTemplate>
<telerikListView:ListViewTemplateCell>
<telerikListView:ListViewTemplateCell.View>
<Frame CornerRadius="10" HasShadow="True" OutlineColor="#4488F6" Margin="5" HeightRequest="110" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<ffimageloading:CachedImage HeightRequest="70" Aspect="AspectFit" WidthRequest="70" Margin="2"
DownsampleHeight="50" DownsampleUseDipUnits="false"
LoadingPlaceholder="image_loading.png" ErrorPlaceholder="image_error.png"
Source="{Binding FileName, Converter={StaticResource imageFileToImageSourceConverter}}"/>
<Label Text="{Binding RestProductNameEntity.ProductName}" FontSize="Medium" VerticalOptions="CenterAndExpand" Grid.Row="1" />
<telerikInput:RadNumericInput Value="{Binding Quantity, Mode=TwoWay}" Grid.Row="2" HeightRequest="20" />
</Grid>
</Frame>
</telerikListView:ListViewTemplateCell.View>
</telerikListView:ListViewTemplateCell>
</DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>
</Grid>
</ContentView.Content>
</ContentView>
c# file not providing because it used web api from another project, also using dummy source has same effect. As source used
ObservableCollection
I forgot add that before issue I updated Telerik Xamarin platform. After clean solution, deleting bin and obj folders and rebild project it solved.