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>
Related
I have the following XAML
<?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"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="MyApp.Pages.Locations.LocationsList"
xmlns:mvvm="clr-namespace:MvvmHelpers;assembly=MvvmHelpers"
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Add" Command="{Binding AddCommand}" />
</ContentPage.ToolbarItems>
<ContentPage.Behaviors>
<toolkit:EventToCommandBehavior EventName="Appearing" Command="{Binding LoadCommand}" />
</ContentPage.Behaviors>
<ContentPage.Resources>
<ResourceDictionary>
<toolkit:SelectedItemEventArgsConverter x:Key="SelectedItemEventArgsConverter" />
</ResourceDictionary>
</ContentPage.Resources>
<ListView BackgroundColor="Transparent"
CachingStrategy="RecycleElement"
ItemsSource="{Binding Locations}"
SelectedItem="{Binding SelectedLocation, Mode=TwoWay}"
SeparatorVisibility="None"
HasUnevenRows="True">
<ListView.Behaviors>
<toolkit:EventToCommandBehavior
EventName="ItemSelected"
EventArgsConverter="{StaticResource SelectedItemEventArgsConverter}"
Command="{Binding SelectCommand}"/>
</ListView.Behaviors>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Text="Delete" IsDestructive="True"
Command="{Binding DeleteCommand}"
CommandParameter="{Binding .}" />
<MenuItem Text="Edit" Command="{Binding EditCommand}"
CommandParameter="{Binding .}" />
</ViewCell.ContextActions>
<Grid Padding="10">
<Frame>
<StackLayout Orientation="Horizontal">
<Image Source="map.png" WidthRequest="40" />
<StackLayout Orientation="Vertical" Padding="10,0,0,0">
<Label VerticalOptions="Center"
FontSize="Medium"
Text="{Binding Name}" />
<Label VerticalOptions="Center"
FontSize="Micro"
Text="This is where the address will go." />
</StackLayout>
</StackLayout>
</Frame>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
My ViewModel uses the Maui Community Toolkit and has 4 AsyncCommands defined
LoadCommand
SaveCommand
DeleteCommand
EditCommand
The LoadCommand and SaveCommand work perfectly but the DeleteCommand and EditCommand do not fire. I assume it's something to do with the commands being on the viewmodel and NOT on the item source model. How do I get it to trigger the AsyncCommands on the viewmodel?
Thanks
For this, you can check document Define MenuItem behavior with MVVM.
The MenuItem class supports the Model-View-ViewModel (MVVM) pattern through BindableProperty objects and the ICommand interface. The following XAML shows MenuItem instances bound to commands defined on a viewmodel:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viewmodels="clr-namespace:MenuItemDemos.ViewModels"
mc:Ignorable="d"
x:Class="MenuItemDemos.MenuItemXamlMvvmPage"
x:Name="myContentpage"
Padding="10"
Title="MenuItem XAML MVVM Demo"
>
<ContentPage.BindingContext>
<viewmodels:ListPageViewModel />
</ContentPage.BindingContext>
<StackLayout>
<Label Text="Reveal the context menu by right-clicking (UWP), long-pressing (Android), or swiping (iOS) an item in the following list." />
<Label Text="{Binding Message}"
TextColor="Red"
HorizontalOptions="CenterAndExpand"
VerticalOptions="Start" />
<ListView ItemsSource="{Binding Items}"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Text="Edit"
IconImageSource="icon.png"
Command="{Binding Source={x:Reference myContentpage}, Path=BindingContext.EditCommand}"
CommandParameter="{Binding .}"/>
<MenuItem Text="Delete"
Command="{Binding Source={x:Reference myContentpage}, Path=BindingContext.DeleteCommand}"
CommandParameter="{Binding .}"/>
</ViewCell.ContextActions>
<Label Text="{Binding .}" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
The viewmodel(ListPageViewModel.cs) contains the commands referenced in the XAML:
public class ListPageViewModel : INotifyPropertyChanged
{
...
public ICommand EditCommand => new Command<string>((string item) =>
{
Message = $"Edit command was called on: {item}";
});
public ICommand DeleteCommand => new Command<string>((string item) =>
{
Message = $"Delete command was called on: {item}";
});
}
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
I have declared some Datatemplates for my Collectionviews Header to use as an Template.
<ResourceDictionary>
<!--#region HeaderTemplates-->
<DataTemplate x:Key="translationHeaderTemplate">
<Frame x:Name="translationDropTarget" Margin="5">
<Label Style="{x:StaticResource boldLabelStyle}" Text="{Binding SolutionDisplay}" FontSize="Medium" HorizontalOptions="Center" HeightRequest="50" VerticalOptions="Center" x:Name="FrameLabel"></Label>
<Frame.GestureRecognizers>
<DropGestureRecognizer AllowDrop="True" DropCommand="{Binding DropOverCommand}">
</DropGestureRecognizer>
</Frame.GestureRecognizers>
</Frame>
</DataTemplate>
<DataTemplate x:Key="pictureHeaderTemplate">
<Frame x:Name="pictureDropTarget" Margin="5">
<Image Source="{Binding SolutionIconString}" HorizontalOptions="FillAndExpand" MinimumWidthRequest="50" HeightRequest="100" VerticalOptions="CenterAndExpand" x:Name="FrameImage"></Image>
<Frame.GestureRecognizers>
<DropGestureRecognizer AllowDrop="True" DropCommand="{Binding DropOverCommand}">
</DropGestureRecognizer>
</Frame.GestureRecognizers>
</Frame>
</DataTemplate>
<DataTemplate x:Key="ttsHeaderTemplate">
<Frame x:Name="ttsDropTarget" Margin="5">
<forms:AnimationView x:Name="XAnim" AutoPlay="true" VerticalOptions="CenterAndExpand" RepeatMode="Infinite" HorizontalOptions="CenterAndExpand" Animation="soundIcon.json"
Clicked="XAnim_Clicked" ></forms:AnimationView>
<Frame.GestureRecognizers>
<DropGestureRecognizer AllowDrop="True" DropCommand="{Binding DropOverCommand}">
</DropGestureRecognizer>
</Frame.GestureRecognizers>
</Frame>
</DataTemplate>
<!--#endregion-->
<DataTemplate x:Key="translationTemplate">
<Frame HasShadow="True" CornerRadius="15" VerticalOptions="Start" HeightRequest="70">
<StackLayout>
<Label
Text="{Binding DisplayString}"
Style="{x:StaticResource mediumlabelStyle}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
FontSize="Small">
</Label>
</StackLayout>
<Frame.GestureRecognizers>
<DragGestureRecognizer
DragStartingCommand="{Binding Path=BindingContext.DragStartingCommand, Source={x:Reference ViewCollection}}"
DragStartingCommandParameter="{Binding .}"/>
</Frame.GestureRecognizers>
</Frame>
</DataTemplate>
<vokabelmodul:VocabularyViewTemplateSelector
x:Key="vocViewTemplateSelector"
TranslationTemplate="{StaticResource translationHeaderTemplate}"
PictureTemplate="{StaticResource pictureHeaderTemplate}"
TTSTemplate="{StaticResource ttsHeaderTemplate}"/>
</ResourceDictionary>
</ContentPage.Resources>
And I'm trying to consume it within my CollectionView with the templateselector :
<ContentPage.Content>
<AbsoluteLayout>
<StackLayout
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<Frame>
<StackLayout>
<Label Style="{x:StaticResource labelStyle}" FontSize="Small" x:Name="TimerLabel" Text="{Binding Remaining}"></Label>
<ProgressBar x:Name="Progress" Progress="{Binding Progress}" ProgressColor="Blue"></ProgressBar>
</StackLayout>
</Frame>
<StackLayout x:Name="InnerStack">
<CollectionView
x:Name="ViewCollection"
ItemsSource="{Binding ViewObjects}"
VerticalOptions="Center"
Margin="5"
ItemTemplate="{StaticResource translationTemplate}"
HeaderTemplate="{StaticResource vocViewTemplateSelector}"
Header="{Binding .}"
>
<CollectionView.EmptyView>
<Label Text="No VocabularyItems!" Style="{x:StaticResource boldLabelStyle}"></Label>
</CollectionView.EmptyView>
<CollectionView.ItemsLayout>
<GridItemsLayout
Orientation="Vertical"
HorizontalItemSpacing="5"
VerticalItemSpacing="5"
Span="2"/>
</CollectionView.ItemsLayout>
</CollectionView>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ContentPage.Content>
But when I run the Programm I'm always getting "System.InvalidOperationException: 'LoadTemplate should not be null'".
When I'm binding my HeaderTemplate directly like this:
HeaderTemplate="{StaticResource someHeaderTemplate}"
it works just fine.
I've added a log and breakpoint to my TemplateSelector Class but OnSelectTemplate doesn't even get called.
I've also used another Templateselector for my ItemTemplate and that one worked just fine.
Any Help would be appreciated.
In your xaml page, your DataTemplate tag does not add any data or styles, you need to add styles to each DataTemplate tag.
You have not bound the Header data of the CollectionView. You need to add Header="{Binding ViewObjects}" to your CollectionView tag.
This is my xaml code for your reference, I hope it can solve your problem:
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="someHeaderTemplate">
<Label Text="aaa" BackgroundColor="LightPink"></Label>
</DataTemplate>
<DataTemplate x:Key="someOtherHeaderTemplate">
<Label Text="bbb" BackgroundColor="Green"></Label>
</DataTemplate>
<DataTemplate x:Key="someThirdHeaderTemplate">
<Label Text="ccc" BackgroundColor="Yellow"></Label>
</DataTemplate>
<nameSpace:templateSelector x:Key="templateSelector"
first="{StaticResource someHeaderTemplate}"
second="{StaticResource someOtherHeaderTemplate}"
third="{StaticResource someThirdHeaderTemplate}"/>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<CollectionView
x:Name="ViewCollection"
Header="{Binding ViewObjects}"
ItemsSource="{Binding ViewObjects}"
VerticalOptions="Center"
Margin="5"
HeaderTemplate="{StaticResource templateSelector}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Label></Label>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
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.
I'm using SAPUI5 XML view
myView.view.xml
<f:SimpleForm id="form1"/>
<f:content id="content1">
<core:Title text="" />
<m:Label text="Label A" />
<m:Input value="10/5/2548" enabled="false" />
<m:Label text="ชั้นที่/ปีที่" />
<m:Input value="1" />
<core:Title text="" />
<m:Label text="Label B" />
<m:Input value="3.25" />
<core:Title text="" />
</f:content>
</f:SimpleForm>
myController.controller.js
addNewContent:function(){
var content = this.getView().byId("form1").getContent();
this.getView().byId("form1").addContent(content);
}
Error message
not valid for aggregation "content" of Element
sap.ui.layout.form.SimpleForm#__xmlview1--form1
I want to copy content (id="content1") to button when click addNewContent Button
Anyone help thanks
Add more information
this is what i want to do
Technically
The getContent() method returns an array sap.ui.core.Element[].
The addContent() method takes a single sap.ui.core.Element as parameter.
So you need to do something like this:
this.getView().byId("form1").addContent(content[0]);
or this:
oForm = this.getView().byId("form1");
content.forEach(oControl => oForm.addContent(oControl))
or if not using ES6:
oForm = this.getView().byId("form1");
for (var i = 0; i < content.length; i++) {
oForm.addContent(content[i]);
}
Functionally
It is not clear to me what you are trying to achieve. Based on your code snippet, you are trying to copy from and paste to the same place...
Hope this will help you, try to clone form and append it to the container.
XML view
<Button text="+" press="cloneContent" /><!-- Button for cloning -->
<f:SimpleForm id="form1" editable="false" layout="ResponsiveGridLayout" title="Address" labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="4" emptySpanL="4" emptySpanM="4" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1" singleContainerFullSize="false">
<f:content>
<core:Title text="" />
<Label text="Label A" />
<Input value="10/5/2548" enabled="false" />
<Label text="ชั้นที่/ปีที่" />
<Input value="1" />
<core:Title text="" />
<Label text="Label B" />
<Input value="3.25" />
<core:Title text="" />
</f:content>
</f:SimpleForm>
<VBox id="contentHolder"></VBox><!-- clone form holder -->
Controller
cloneContent: function(oEvent){
var oForm = this.getView().byId("form1");
if (oForm) {
oFormClone = oForm.clone();
oFormClone.setTitle("");
var oHolder = this.getView().byId("contentHolder");
if (oHolder) {
//oHolder.removeAllItems();//if you want to remove all the previous added item you can uncomment this line
oHolder.addItem(oFormClone);
}
}
}
Note: Take care of binding after clone. You can use oHolder to rebind if you have any issue.