I'm new here and a newbie in coding. I just tried this small project from YT. I copied everything and cannot figure out what is wrong with the error. ('x' is an undeclared prefix.)
Thanks in advance!
<Grid Margin="20,0,20,0" VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height ="Auto"/>
<RowDefinition Height ="Auto"/>
<RowDefinition Height ="Auto"/>
<RowDefinition Height ="Auto"/>
<RowDefinition Height ="Auto"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row ="0">
<Entry Placeholder ="UserName" FontSize ="16" x:Name =" EntryUserName"/>
</StackLayout>
<StackLayout Grid.Row="1">
<Entry Placeholder ="PassWord" IsPassword="true" FontSize ="16" x:Name =" EntryUserPassword"/>
</StackLayout>
<StackLayout Grid.Row="2">
<Entry Placeholder ="Email" FontSize ="16" x:Name =" EntryUserEmail"/>
</StackLayout>
<StackLayout Grid.Row="3">
<Entry Placeholder ="PhoneNumber" FontSize ="16" x:Name =" EntryUserPhoneNumber"/>
</StackLayout>
<StackLayout Grid.Row="4">
<Button Text="Register" HorizontalOptions="CenterAndExpand" WidthRequest="100" TextColor="White" BackgroundColor="Blue" Clicked="Handle_Clicked"/>
</StackLayout>
</Grid>
</StackLayout>
The Name attribute value of your Entry is prefixed with Space,which is not reasonable.
You can replace it with other valid characters.
For example:
replace
<StackLayout Grid.Row ="0">
<Entry Placeholder ="UserName" FontSize ="16" x:Name =" EntryUserName"/>
</StackLayout>
with:
<StackLayout Grid.Row ="0">
<Entry Placeholder ="UserName" FontSize ="16" x:Name ="mEntryUserName" />
</StackLayout>
Other entries are similarly named.
Please refer the following code:
<StackLayout>
<Grid Margin="20,0,20,0" VerticalOptions="CenterAndExpand" >
<Grid.RowDefinitions>
<RowDefinition Height ="Auto"/>
<RowDefinition Height ="Auto"/>
<RowDefinition Height ="Auto"/>
<RowDefinition Height ="Auto"/>
<RowDefinition Height ="Auto"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row ="0">
<Entry Placeholder ="UserName" FontSize ="16" x:Name ="mEntryUserName" />
</StackLayout>
<StackLayout Grid.Row="1">
<Entry Placeholder ="PassWord" IsPassword="true" FontSize ="16" x:Name ="mEntryUserPassword"/>
</StackLayout>
<StackLayout Grid.Row="2">
<Entry Placeholder ="Email" FontSize ="16" x:Name ="mEntryUserEmail"/>
</StackLayout>
<StackLayout Grid.Row="3">
<Entry Placeholder ="PhoneNumber" FontSize ="16" x:Name ="mEntryUserPhoneNumber"/>
</StackLayout>
<StackLayout Grid.Row="4">
<Button Text="Register" HorizontalOptions="CenterAndExpand" WidthRequest="100" TextColor="White" BackgroundColor="Blue" Clicked="Button_Clicked"/>
</StackLayout>
</Grid>
</StackLayout>
Then in YourPage.xaml.cs, you can access your entry in function Button_Clicked as follows:
private void Button_Clicked(object sender, EventArgs e)
{
System.Diagnostics.Debug.WriteLine("User Name is : " + mEntryUserName.Text +"<---> PassWord is = " + mEntryUserPassword.Text);
}
Related
In MVC ASP.net Core, I used partials to re-use blocks of a page. In Xamarin, we have DataTemplates & ControlTemplates but I'm not sure how to best use them.
In one of my pages I have the following for the content:
<StackLayout>
<Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
<Label Text="Welcome to data template selector" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
</Frame>
<CollectionView ItemsSource="{Binding MainPageView.Fields}"
EmptyView="No fields for this screen."
ItemTemplate="{StaticResource templateSelector}"
SelectionChanged="CollectionView_SelectionChanged">
</CollectionView>
<StackLayout Margin="10,0,10,5" Orientation="Vertical">
<Button Command="{Binding MainPageView.SubmitCommand}" Text="Submit" />
<validator:ErrorSummaryView
IsVisible="{Binding MainPageView.ShowValidationSummary, Mode=OneWay}"
ErrorStateManager="{Binding MainPageView.ErrorStateManager, Mode=OneWay}"
Margin="0,0,0,5"/>
</StackLayout>
</StackLayout>
The template selector is (there will be more choices later):
<tempcel:FieldDataTemplateSelector
x:Key="templateSelector"
RadioTemplate="{StaticResource RadioTemplate}"
DropListTemplate="{StaticResource DropListTemplate}">
</tempcel:FieldDataTemplateSelector>
Where I could use some direction is right now 80% of what is in RadioTemplate and DropListTemplate are the same and I'd like to pull the shared code out so if I want to change the base layout, I only need to change one place. Here are the two DataTemplates:
<DataTemplate x:Key="DropListTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout
Orientation="Horizontal"
Grid.Row="0">
<Label
Text="{Binding Name}"
Style="{StaticResource LabelStyle}">
</Label>
<ImageButton HorizontalOptions="Center"
CornerRadius="6"
VerticalOptions="Center"
Clicked="HelpButton_Clicked"
HeightRequest="12"
WidthRequest="12"
BorderColor="Black"
BackgroundColor="Black"
BorderWidth="1"
IsVisible="{Binding ShowHelpButton}">
<ImageButton.Source>
<FontImageSource FontFamily="FAFreeSolid"
Color="White"
Glyph="{x:Static fa:FontAwesomeIcons.Question}"/>
</ImageButton.Source>
</ImageButton>
</StackLayout>
<Label
Grid.Row="1"
Style="{StaticResource HelpStyle}"
Text="{Binding HelpTopic.Text}"
IsVisible="{Binding HelpTopic.IsVisible, Mode=TwoWay}">
</Label>
<Picker
Grid.Row="2"
IsEnabled="{Binding IsEnabled}"
Margin="10,2,10,0"
ItemsSource="{Binding Choices.Choices}"
SelectedItem="{Binding SelectedChoice}"
ItemDisplayBinding="{Binding Label}"
SelectedIndexChanged="Picker_SelectedIndexChanged">
</Picker>
<validator:ErrorView ErrorState="{Binding ErrorStatemanager[Input]}" Grid.Row="3" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="RadioTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout
Orientation="Horizontal"
Grid.Row="0">
<Label
Text="{Binding Name}"
Style="{StaticResource LabelStyle}">
</Label>
<ImageButton HorizontalOptions="Center"
CornerRadius="6"
VerticalOptions="Center"
Clicked="HelpButton_Clicked"
HeightRequest="12"
WidthRequest="12"
BorderColor="Black"
BackgroundColor="Black"
BorderWidth="1"
IsVisible="{Binding ShowHelpButton}">
<ImageButton.Source>
<FontImageSource FontFamily="FAFreeSolid"
Color="White"
Glyph="{x:Static fa:FontAwesomeIcons.Question}"/>
</ImageButton.Source>
</ImageButton>
</StackLayout>
<Label
Grid.Row="1"
Style="{StaticResource HelpStyle}"
Text="{Binding HelpTopic.Text}"
IsVisible="{Binding HelpTopic.IsVisible, Mode=TwoWay}">
</Label>
<StackLayout
Grid.Row="2"
RadioButtonGroup.GroupName="{Binding Choices.Code}"
RadioButtonGroup.SelectedValue="{Binding Value}"
BindableLayout.ItemsSource="{Binding Choices.Choices}"
BindableLayout.EmptyView="No choices available"
Orientation="Horizontal"
Spacing="50"
Margin="10,2,0,0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<RadioButton Value="{Binding Value}"
Content="{Binding Label}"
IsChecked="{Binding IsSelected}"
CheckedChanged="OnRadioChanged">
</RadioButton>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
<validator:ErrorView ErrorState="{Binding ErrorStatemanager[Input]}" Grid.Row="3" />
</Grid>
</DataTemplate>
I haven't figured out enough about Xamarin to know if I need to change where I have the CollectionView to put something there that has the common layout information with a way to put the different editors in. Or, if there is a way to modify the DataTemplates to get their base layout from something else. I tried looking at ContentPresenter but couldn't figure out how it would fit in.
Thanks
I found there is very little difference between DropListTemplate and RadioTemplate. So you can also achieve this without DropListTemplate and RadioTemplate .
You can display and hide the two views (Picker and BindableLayout) based on the item data of the CollectionView 's ItemsSource.
The following are the difference in the two Templates:
<Picker
Grid.Row="2"
IsEnabled="{Binding IsEnabled}"
Margin="10,2,10,0"
ItemsSource="{Binding Choices.Choices}"
SelectedItem="{Binding SelectedChoice}"
ItemDisplayBinding="{Binding Label}"
SelectedIndexChanged="Picker_SelectedIndexChanged">
</Picker>
and
<StackLayout
Grid.Row="2"
RadioButtonGroup.GroupName="{Binding Choices.Code}"
RadioButtonGroup.SelectedValue="{Binding Value}"
BindableLayout.ItemsSource="{Binding Choices.Choices}"
BindableLayout.EmptyView="No choices available"
Orientation="Horizontal"
Spacing="50"
Margin="10,2,0,0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<RadioButton Value="{Binding Value}"
Content="{Binding Label}"
IsChecked="{Binding IsSelected}"
CheckedChanged="OnRadioChanged">
</RadioButton>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
Using the below code in HomePage.xaml file
When I use only one CollectionView it properly shows product data but when used inside another collectionview it shows EmptyView
<ContentPage.Content>
<StackLayout>
<CollectionView ItemsSource="{Binding Categories}" EmptyView="Empty">
<CollectionView.ItemsLayout>
<LinearItemsLayout ItemSpacing="20" Orientation="Vertical">
</LinearItemsLayout>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame BackgroundColor="Aqua" CornerRadius="40" >
<Grid Padding="10" BackgroundColor="RosyBrown">
<Grid.RowDefinitions>
<RowDefinition Height="200px"/>
</Grid.RowDefinitions>
<CollectionView ItemsSource="{Binding Products}" EmptyView="Nothing To Show">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10" BackgroundColor="Aqua">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="{Binding ProductName}"/>
<Label Grid.Row="1" Text="{Binding ProductDescription}"/>
<Label Grid.Row="2" Text="{Binding ProductPrice}"/>
<Label Grid.Row="3" Text="{Binding ProductImage}"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Grid>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
I tried changing the orientation and other layout setting but it is not working.
An item template that includes a SkiaSharp control displaying svg, a SwipeView and some labels,
is taking forever to load when navigating to the page.
I am using StackLayout with BindableLayout.ItemSource and ItemTemplate.
Using CollectionView will let the page load much faster, but then every attempt to scroll down will slow the app for a moment, while the CollectionView generate the next batch of items.
I have moved all the code generating the items source to background, so the only thing happening on the ui thread is the binding to the ObservableCollection from the viewmodel, and drawing it.
I have also tried reducing the layouts in the item template, but it did not improve loading speed.
Xaml for page:
<DataTemplate x:Key="DataTemplateReportsItemAction">
<StackLayout Orientation="Horizontal">
<effectsView:SfEffectsView Style="{StaticResource StyleRippleEffectReportAction}">
<effectsView:SfEffectsView.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ActionCommand}" />
</effectsView:SfEffectsView.GestureRecognizers>
<image:SVGImage ImageSource="{Binding IconName}"
Style="{StaticResource StyleSVGImageReportRowAction}" />
</effectsView:SfEffectsView>
<BoxView Style="{StaticResource StyleBoxViewReportItemAction}"
IsVisible="{Binding IsLast, Converter={StaticResource BoolToReverseBoolConverter}}" />
</StackLayout>
</DataTemplate>
<ControlTemplate x:Key="DataTemplateReportsItemCellDefault">
<StackLayout Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
BindingContext="{TemplateBinding BindingContext}">
<StackLayout Orientation="Vertical"
HorizontalOptions="FillAndExpand"
VerticalOptions="Center">
<Label Style="{StaticResource StyleLabelReportCellTop}"
Text="{Binding DisplayValue}"
TextColor="{Binding ColorName, TargetNullValue={StaticResource ColorLabelReportCell}, FallbackValue={StaticResource ColorLabelReportCell}}" />
<Label Style="{StaticResource StyleLabelReportCellBottom}"
Text="{Binding DisplayTitle}"
TextColor="{Binding ColorName, TargetNullValue={StaticResource ColorLabelReportCell}, FallbackValue={StaticResource ColorLabelReportCell}}" />
</StackLayout>
<BoxView Style="{StaticResource StyleBoxViewReportItemCell}"
IsVisible="{Binding IsLast, Converter={StaticResource BoolToReverseBoolConverter}}" />
</StackLayout>
</ControlTemplate>
<ControlTemplate x:Key="DataTemplateReportsItemCellTrend">
<StackLayout Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
BindingContext="{TemplateBinding BindingContext}">
<StackLayout Orientation="Vertical"
HorizontalOptions="FillAndExpand"
VerticalOptions="Center">
<image:SVGImage ImageSource="{Binding IconName}"
HorizontalOptions="Center" />
<Label Style="{StaticResource StyleLabelReportCellTrend}"
Text="{Binding DisplayTitle}"
TextColor="{Binding ColorName, TargetNullValue={StaticResource ColorLabelReportCell}, FallbackValue={StaticResource ColorLabelReportCell}}" />
</StackLayout>
<BoxView Style="{StaticResource StyleBoxViewReportItemCell}"
IsVisible="{Binding IsLast, Converter={StaticResource BoolToReverseBoolConverter}}" />
</StackLayout>
</ControlTemplate>
<converters:ValueToValueConverter x:Key="CellTemplateSelector"
DefaultValue="{StaticResource DataTemplateReportsItemCellDefault}">
<converters:ValueToValueList>
<converters:ValueToValueItem OnValue="{x:Static reportenums:MobileColumnMetaType.Trend}"
ToValue="{StaticResource DataTemplateReportsItemCellTrend}" />
</converters:ValueToValueList>
</converters:ValueToValueConverter>
<DataTemplate x:Key="DataTemplateReportsItemCell">
<ContentView ControlTemplate="{Binding MobileMetaType, Converter={StaticResource CellTemplateSelector}}"
HorizontalOptions="FillAndExpand" />
</DataTemplate>
<DataTemplate x:Key="DataTemplateReportsItem">
<Grid HeightRequest="{StaticResource DoubleReportRowTotalHeight}">
<Grid.RowDefinitions>
<RowDefinition Height="{StaticResource DoubleReportRowTitleHeight}" />
<RowDefinition Height="{StaticResource DoubleReportRowSwipeHeight}" />
</Grid.RowDefinitions>
<StackLayout Margin="0,5"
Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
Spacing="10">
<image:SVGImage ImageSource="{Binding LactationIcon}"
IsVisible="{Binding LactationIcon, Converter={StaticResource StringToIsVisibleConverter}}"
Style="{StaticResource StyleSVGImageReportRowLactation}" />
<Label Style="{StaticResource StyleLabelReportRowTitle}"
FontSize="{Binding UseSmallTitle, Converter={StaticResource RowFontSizeConverter}}"
Text="{Binding DisplayTitle}" />
<Label Style="{StaticResource StyleLabelReportRowTitleGroup}"
IsVisible="{Binding GroupName, Converter={StaticResource StringToIsVisibleConverter}}"
Text="{Binding GroupName}" />
<Frame Style="{StaticResource StyleFrameReportRowBadge}"
BackgroundColor="{Binding Badge.BadgeType, Converter={StaticResource BadgeColorConverter}}"
IsVisible="{Binding Badge.HasBadge}">
<Label Style="{StaticResource StyleLabelReportRowTitleBadge}"
Text="{Binding Badge.BadgeTitle}" />
</Frame>
</StackLayout>
<Grid Grid.Row="1">
<SwipeView BackgroundColor="{StaticResource ColorReportViewRowBackground}"
IsEnabled="{Binding IsEditable}"
x:Name="swipey">
<SwipeView.RightItems>
<SwipeItems Mode="Reveal"
SwipeBehaviorOnInvoked="RemainOpen">
<SwipeItemView WidthRequest="{Binding Width, Source={Reference swipey}}">
<Grid BackgroundColor="{StaticResource ColorLabelReportRowActionsBackground}">
<Grid Margin="20,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<effectsView:SfEffectsView Style="{StaticResource StyleRippleEffectReportRowClose}"
helpers:VisualTreeHelper.ReferenceObject="{Binding Source={Reference swipey}}">
<effectsView:SfEffectsView.GestureRecognizers>
<TapGestureRecognizer Tapped="OnGroupRowCloseTapped" />
</effectsView:SfEffectsView.GestureRecognizers>
<image:SVGImage Style="{StaticResource StyleSVGImageReportRowActionsClose}" />
</effectsView:SfEffectsView>
<StackLayout Grid.Column="2"
Orientation="Horizontal"
BindableLayout.ItemTemplate="{StaticResource DataTemplateReportsItemAction}"
BindableLayout.ItemsSource="{Binding ActionItems}" />
</Grid>
</Grid>
</SwipeItemView>
</SwipeItems>
</SwipeView.RightItems>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackLayout Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
BackgroundColor="{StaticResource ColorTransparent}"
BindableLayout.ItemTemplate="{StaticResource DataTemplateReportsItemCell}"
BindableLayout.ItemsSource="{Binding Cells}">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BindingContext.NavigateCommand, Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type views:BasePage}}}"
CommandParameter="{Binding}" />
</StackLayout.GestureRecognizers>
</StackLayout>
<Frame Grid.Column="1"
Padding="0"
BackgroundColor="{StaticResource ColorReportGroupRowActionsBackground}"
IsVisible="{Binding IsEditable}">
<image:SVGImage Style="{StaticResource StyleSVGImageSwipe}" />
</Frame>
</Grid>
</SwipeView>
<Grid BackgroundColor="{StaticResource ColorTransparent}"
IsVisible="{Binding IsEditable, Converter={StaticResource BoolToReverseBoolConverter}}">
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BindingContext.NavigateCommand, Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type views:BasePage}}}"
CommandParameter="{Binding}" />
</Grid.GestureRecognizers>
</Grid>
</Grid>
</Grid>
</DataTemplate>
</ContentView.Resources>
<ContentView.Content>
<Grid>
<gradient:SfGradientView BackgroundBrush="{StaticResource BrushViewBackgroundGradient}" />
<Grid BackgroundColor="{StaticResource ColorReportsBrowserViewBackground}"
Margin="10,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<reports:ReportToolbarView />
<RefreshView Grid.Row="1"
IsRefreshing="{Binding IsRefreshing, Mode=TwoWay}"
Command="{Binding RefreshCommand}"
BackgroundColor="{StaticResource ColorReportsViewBackground}"
Margin="10,0">
<ScrollView HorizontalScrollBarVisibility="Never"
VerticalScrollBarVisibility="Default">
<StackLayout Orientation="Vertical">
<StackLayout BindableLayout.ItemsSource="{Binding ReportItems}"
BindableLayout.ItemTemplate="{StaticResource DataTemplateReportsItem}"
Orientation="Vertical" />
<BoxView HeightRequest="50" />
</StackLayout>
</ScrollView>
</RefreshView>
<sortfilter:SortFilterView Grid.Row="1"
VerticalOptions="Start"
IsVisible="{Binding SortFilterModel.IsVisible}" />
</Grid>
</Grid>
</ContentView.Content>
For comparison, replacing the item template with a simple Label makes the page load extremely fast.
Is there a way to load lists of items faster in Xamarin Forms?
Too many StackLayouts. Even worse, you stacked them into each other. Don't do that.
StackLayouts need a lot of layout cycles, as they have to calculate their size based on the children you have put in. If one of those children is a StackLayout as well, that will more than double the layout passes necessary to get to the final result.
And now guess what happens, when you have 50 or more items in your list. Those layout passes will have to run for each single item in your list.
My advice based on my experience would be to replace the StackLayouts with a grid and place your elements using their Grid.Row, Grid.Colum, Grid.RowSpan and Grid.Columnspan properties. Also set your grid sizes to either fixed values or use star based sizes. Don't use "Auto" as this needs more layout passes as well.
I'm trying to make a payment method page. The functionality i'm trying to do is - click on the radio button and the expander body should show the text boxes to add the corresponding details. So I tried this code:
<Grid Grid.Row="2">
<StackLayout Orientation="Vertical" >
<Frame BorderColor="Gray"
CornerRadius="5"
Padding="8">
<StackLayout >
<Expander>
<Expander.Header>
<StackLayout>
<Label Text="COD"/>
<RadioButton GroupName="PaymentMethod"
Text="{lang:Translate COD}"
IsChecked="False"/>
</StackLayout>
</Expander.Header>
</Expander>
</StackLayout>
</Frame>
<Frame BorderColor="Gray"
CornerRadius="5"
Padding="8">
<StackLayout>
<Expander>
<Expander.Header>
<StackLayout>
<Label Text="Card Payment"/>
<RadioButton GroupName="PaymentMethod"
Text="{lang:Translate Card}"
IsChecked="False"/>
</StackLayout>
</Expander.Header>
<Expander.Content>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<StackLayout Orientation="Horizontal">
<local:XEntry Style="{StaticResource entry}"
Placeholder="Card Number"
PlaceholderColor="LightGray"
MaxLength="100"/>
<!--Text="{Binding CardNumber}"-->
<local:XEntry Style="{StaticResource entry}"
Placeholder="MM"
PlaceholderColor="LightGray"
Text="{Binding Month}"
MaxLength="2"/>
<Label Text="/"/>
<local:XEntry Style="{StaticResource entry}"
Placeholder="YY"
PlaceholderColor="LightGray"
MaxLength="2"/>
<!--Text="{Binding Year}"-->
<local:XEntry Style="{StaticResource entry}"
Placeholder="CVV"
PlaceholderColor="LightGray"
MaxLength="3"/>
<!--Text="{Binding CVV}"-->
</StackLayout>
</Grid>
<Grid Grid.Row="1">
<StackLayout>
<local:XEntry Style="{StaticResource entry}"
Placeholder="Card Holder Name"
PlaceholderColor="LightGray"
MaxLength="100"/>
<!--Text="{Binding CardHolderName}"-->
</StackLayout>
</Grid>
</Grid>
</Expander.Content>
</Expander>
</StackLayout>
</Frame>
<Frame BorderColor="Gray"
CornerRadius="5"
Padding="8">
<StackLayout>
<Expander>
<Expander.Header>
<StackLayout>
<Label Text="Net Banking"/>
<RadioButton GroupName="PaymentMethod"
Text="{lang:Translate Card}"
IsChecked="False" />
<!--{Binding NetBank}-->
</StackLayout>
</Expander.Header>
<Expander.Content>
<StackLayout>
<Label Text="Net Banking"/>
</StackLayout>
</Expander.Content>
</Expander>
</StackLayout>
</Frame>
</StackLayout>
</Grid>
The Expander is working only if the header contains a Lable likw thw code i pasted above. When i add just the RadioButton in the header, it doesn't expand. I don't want the label in my header. Instead I want the expander to expand when the radio button is active. I'm using the Xamarin.Forms 4.6 Release RadioButton and Expander . Please suggest a solution. Thanks in advance.
Thanks for your time. Here is the answer:
<Expander x:Name="MyExpander">
<Expander.Header>
<StackLayout>
<RadioButton HorizontalOptions="StartAndExpand" WidthRequest="200" GroupName="PaymentMethod"
Text="Credit/Debit Card"
IsChecked="False"
Clicked="RadioButton_Clicked"/>
</StackLayout>
</Expander.Header>
</Expander>
and in the cs file:
private void RadioButton_Clicked(object sender, EventArgs e)
{
MyExpander.IsExpanded = !MyExpander.IsExpanded;
}
I created a CustomView to use in CollectionView's DataTemplate
<Frame CornerRadius="10" IsClippedToBounds="True" Padding="0" HasShadow="False" >
<AbsoluteLayout Padding="0" Margin="0">
<Image Source="image1.png" AbsoluteLayout.LayoutBounds="0,0,1,1" Aspect="AspectFill" AbsoluteLayout.LayoutFlags="All"></Image>
<Frame BackgroundColor="#fedb0a" AbsoluteLayout.LayoutBounds="0,0,0.426,0.1177" AbsoluteLayout.LayoutFlags="All" HasShadow="False">
<StackLayout Orientation="Horizontal" AbsoluteLayout.LayoutBounds="0.682,0.29,AutoSize,0.05885">
<Label Text="Hi" FontSize="Medium" VerticalOptions="CenterAndExpand"></Label>
</StackLayout>
</Frame>
<StackLayout AbsoluteLayout.LayoutBounds="0,1,1,0.2" AbsoluteLayout.LayoutFlags="All" BackgroundColor="#95000000" Orientation="Horizontal">
<StackLayout VerticalOptions="CenterAndExpand" Margin="5,0,5,0">
<Frame CornerRadius="20" IsClippedToBounds="True" Padding="0">
<Image Source="icon1.png" Aspect="AspectFill" WidthRequest="40" HeightRequest="40"></Image>
</Frame>
</StackLayout>
<StackLayout VerticalOptions="CenterAndExpand">
<Label Text="hopeshow~" FontSize="Large" TextColor="#fedb0a"></Label>
<Label Text="2020 year" FontSize="Medium" TextColor="White"></Label>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</Frame>
I placed it in my DataTemplate <vi:MyCustomView HeightRequest="40"></vi:MyCustomView> but it seems that the HeightRequest is not sequenced.
the view autosized a large view.
The WidthRequest is ok when I set a value.
How to do with it?
The layout like StackLayout and AbsoluteLayout will not fit the size of its child elements . So if you want to implement it you can use Grid instead of them .
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
//set them in the same Row and Column and they will be in the same position .
<Image Source="image1.png" Grid.Row="0" Grid.Column="0"></Image>
<Frame BackgroundColor="#fedb0a" HasShadow="False"Grid.Row="0" Grid.Column="0">
//...
</Frame>
//...other elements
</Grid>
For more details about layout you can check https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid