Trigger IsVisible true- false of label on radio button checked- Uncheck in xaml - xaml

I am trying to show/hide a label using Trigger on RadioButton check/uncheck but I am getting the error. I can also do it in c# code by inotifypropertychanged but i want to use Triggers and this is my first time. I am not able to understand this error.
<StackLayout Orientation="Vertical" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Padding="10">
<Frame HasShadow="False" Margin="10,20" CornerRadius="5" BorderColor="{StaticResource BorderColor}" BackgroundColor="#F7F7F7">
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<RadioButton Content="English" x:Name="rdbEnglish" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent"
CornerRadius="10" BorderWidth="2" Margin="2"
Grid.Column="0" Grid.Row="0" IsChecked="{Binding IsCheckedEnglish,Mode=TwoWay}" >
</RadioButton>
<RadioButton Content="hindi" x:Name="rdbHindi" HorizontalOptions="FillAndExpand"
BackgroundColor="Transparent"
CornerRadius="10" BorderWidth="2" IsChecked="{Binding IsCheckedHindi,Mode=TwoWay}"
Margin="2" Grid.Column="1" Grid.Row="0" />
</Grid>
</Frame>
<StackLayout Orientation="Vertical" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Padding="10">
<Label x:Name="lblrdbEnglish" Text="Note : Menu iteam changes will be updated next time"
Margin="2,-10,2,5" TextColor="Red" IsVisible="false" FontAttributes="Italic" >
<Label.Triggers>
<DataTrigger TargetType="RadioButton"
Binding="{Binding Source={x:Reference rdbEnglish},Path=IsChecked}" Value="True" >
<Setter Property="IsVisible" Value="True" />
</DataTrigger>
</Label.Triggers>
</Label>
</StackLayout>
</StackLayout>
Error
System.InvalidOperationException: 'bindable not an instance of AssociatedType'

The TargetType should be of type Label and not RadioButton.
From triggers docs:
TargetType - the control type that the trigger applies to.
...
<Label.Triggers>
<DataTrigger TargetType="Label"
Binding="{Binding Source={x:Reference rdbEnglish},
Path=IsChecked}" Value="True">
<Setter Property="IsVisible" Value="True" />
</DataTrigger>
</Label.Triggers>

Related

How do I write xaml to bind (in MAUI) to a field other than the one specified in ItemsSource of the CollectionView?

I have this (probably naΓ―ve question):
I have this xaml:
<CollectionView
ItemsSource="{Binding Receipts}"
SelectionMode="None">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:Receipt">
<Grid Padding="1, 1, 1, 1">
<Frame Style="{StaticResource CardView}">
<Frame.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:ER_Expense_Receipts_View_VM}}, Path=GoToReceiptDetailsCommand}"
CommandParameter="{Binding .}" />
</Frame.GestureRecognizers>
<Grid RowDefinitions="Auto, *" ColumnDefinitions="310, 20" RowSpacing="10">
<Image
x:Name="imgReceipt"
Aspect="AspectFit"
Margin="0"
Grid.ColumnSpan="2"
Source="{Binding ContentsThumbnail, Mode=OneWay, Converter={StaticResource ByteArrayToImageSourceConverter}}"
WidthRequest="300" />
<Label
Grid.Row="1"
FontSize="12"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
VerticalOptions="Start"
VerticalTextAlignment="Center"
HeightRequest="30"
Text="{Binding Description}">
</Label>
<ImageButton
x:Name="cmdDelete"
Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:ER_Expense_Receipts_View_VM}}, Path=DeleteReceiptCommand}"
CommandParameter="{Binding ID}"
Grid.Row="1"
Grid.Column="1"
Source="delete2.svg"
HeightRequest="20"
WidthRequest="40">
<ImageButton.Triggers>
<DataTrigger TargetType="ImageButton" Binding="{Binding ExpenseReport.Status}" Value="{x:Static res:AppRes.StatusSent}">
<Setter Property="IsEnabled" Value="False" />
<Setter Property="TextColor" Value="Gray" />
</DataTrigger>
</ImageButton.Triggers>
</ImageButton>
</Grid>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Receipts is a collection of Receipt objects in my "ER_Expense_Receipts_View_VM" model:
[ObservableProperty]
private Receipt receipt;
public ObservableCollection<Receipt> Receipts { get; } = new();
Also in my model I have this property
[ObservableProperty]
private Expense expense;
What I need to do here is to bind the "cmdDelete" ImageButton's property IsEnabled to the Status field of the ExpenseReport object in the model. See below. Alas, I get the message "Member not found in data context 'Receipt'".
So, please, what I am doing wrong here ? What's the correct syntax to bind that IsEnabled property to some field in the model other than from the Receipt objects ?
Thank you very much,
Alex

Scrollview + stacklayout bottom part of content blank after validation labels made visible

am developing an app that takes an input from user with error labels for input validation
the error label visibility default value is false.
am having more than a 10 entry and their error label.
and after the app takes input and validates it with error labels it hides everything from the middle of the screen to the very end of the layout.
this my xaml code
<ContentPage.Content>
<ScrollView>
<StackLayout
Margin="20">
<!--Unit Type Picker-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Text="{xct:Translate UnitType}"
Style="{StaticResource PickerLabelStyle}"/>
<Picker
Grid.Column="1"
ItemsSource="{Binding UnitTypeList,Mode=OneWay}"
SelectedIndex="{Binding UnitTypeIndex,Mode=OneWayToSource}"
Style="{StaticResource PickerStyle}"/>
</Grid>
<Label
Text="{Binding UnitTypeError,Mode=OneWay}"
Style="{StaticResource ErrorLabel}"
IsVisible="{Binding UnitTypeErrorVis,Mode=OneWay}"
/>
<!--Unit IsFurnished Picker-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Text="{xct:Translate Furnished}"
Style="{StaticResource PickerLabelStyle}"/>
<Picker
Grid.Column="1"
ItemsSource="{Binding IsFurnishedList,Mode=OneWay}"
SelectedIndex="{Binding FurnishedIndex,Mode=OneWayToSource}"
Style="{StaticResource PickerStyle}"/>
</Grid>
<Label
Text="{Binding FurnishedError,Mode=OneWay}"
Style="{StaticResource ErrorLabel}"
IsVisible="{Binding FurnishedErrorVis,Mode=OneWay}"
/>
<!--Unit National ID-->
<Entry
Placeholder="{xct:Translate UnitNationalID}"
Text="{Binding UnitNationalID}"
Style="{StaticResource EntryStyle}"
Keyboard="Numeric"/>
<Label
Text="{Binding UnitNationalIDError,Mode=OneWay}"
Style="{StaticResource ErrorLabel}"
IsVisible="{Binding UnitNationalIDErrorVis,Mode=OneWay}"
/>
<!--Floor Num-->
<Entry
Placeholder="{xct:Translate FloorNum}"
Text="{Binding FloorNum,Mode=OneWayToSource}"
Style="{StaticResource EntryStyle}"
Keyboard="Numeric"/>
<Label
Text="{Binding FloorNumError,Mode=OneWay}"
Style="{StaticResource ErrorLabel}"
IsVisible="{Binding FloorNumErrorVis,Mode=OneWay}"
/>
<!--Unit Space-->
<Entry
Placeholder="{xct:Translate UnitSpace}"
Text="{Binding UnitSpace,Mode=OneWayToSource}"
Style="{StaticResource EntryStyle}"
Keyboard="Numeric"/>
<Label
Text="{Binding UnitSpaceError,Mode=OneWay}"
Style="{StaticResource ErrorLabel}"
IsVisible="{Binding UnitSpaceErrorVis,Mode=OneWay}"
/>
<!--Living Room Space-->
<Entry
Placeholder="{Binding LivingRoomSpacePH,Mode=OneWay}"
Text="{Binding LivingRoomSpace,Mode=OneWayToSource}"
Style="{StaticResource EntryStyle}"
Keyboard="Numeric"/>
<!--Rooms Num-->
<Entry
Placeholder="{Binding RoomsNumPH,Mode=OneWay}"
Text="{Binding RoomsNum,Mode=OneWayToSource}"
Style="{StaticResource EntryStyle}"
Keyboard="Numeric"/>
<!--Lights Num-->
<Entry
Placeholder="{Binding LightsNumPH,Mode=OneWay}"
Text="{Binding LightsNum,Mode=OneWayToSource}"
Style="{StaticResource EntryStyle}"
Keyboard="Numeric"/>
<!--Baths Num-->
<Entry
Placeholder="{xct:Translate BathsNum}"
Text="{Binding BathsNum,Mode=OneWayToSource}"
Style="{StaticResource EntryStyle}"
Keyboard="Numeric"/>
<Label
Text="{Binding BathsNumError,Mode=OneWay}"
Style="{StaticResource ErrorLabel}"
IsVisible="{Binding BathsNumErrorVis,Mode=OneWay}"
/>
<!--Maid Rooms Num-->
<Entry
Placeholder="{xct:Translate MaidRoomsNum}"
Text="{Binding MaidRoomsNum,Mode=OneWayToSource}"
Style="{StaticResource EntryStyle}"
Keyboard="Numeric"/>
<Label
Text="{Binding MaidRoomsNumError,Mode=OneWay}"
Style="{StaticResource ErrorLabel}"
IsVisible="{Binding MaidRoomsNumErrorVis,Mode=OneWay}"
/>
<!--Air Conditioner Type Picker-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Text="{xct:Translate AirCondType}"
Style="{StaticResource PickerLabelStyle}"/>
<Picker
Grid.Column="1"
ItemsSource="{Binding AirCondTypeList,Mode=OneWay}"
SelectedIndex="{Binding AirCondTypeIndex,Mode=OneWayToSource}"
Style="{StaticResource PickerStyle}"/>
</Grid>
<Label
Text="{Binding AirCondTypeError,Mode=OneWay}"
Style="{StaticResource ErrorLabel}"
IsVisible="{Binding AirCondTypeErrorVis,Mode=OneWay}"
/>
<!--Air Cond Power-->
<Entry
Placeholder="{xct:Translate AirCondPower}"
Text="{Binding AirCondPower,Mode=OneWayToSource}"
Style="{StaticResource EntryStyle}"
Keyboard="Numeric"/>
<Label
Text="{Binding AirCondPowerError,Mode=OneWay}"
Style="{StaticResource ErrorLabel}"
IsVisible="{Binding AirCondPowerErrorVis,Mode=OneWay}"
/>
<!--Rent-->
<Entry
Placeholder="{xct:Translate Rent}"
Text="{Binding Rent,Mode=OneWayToSource}"
Style="{StaticResource EntryStyle}"
Keyboard="Numeric"/>
<Label
Text="{Binding RentError,Mode=OneWay}"
Style="{StaticResource ErrorLabel}"
IsVisible="{Binding RentErrorVis,Mode=OneWay}"
/>
<!--Discount-->
<Entry
Placeholder="{Binding DiscountPH,Mode=OneWay}"
Text="{Binding Discount,Mode=OneWayToSource}"
Style="{StaticResource EntryStyle}"
Keyboard="Numeric"/>
<!--Unit Availability Picker-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Text="{xct:Translate UnitAvailability}"
Style="{StaticResource PickerLabelStyle}"/>
<Picker
Grid.Column="1"
ItemsSource="{Binding UnitAvailabilityList,Mode=OneWay}"
SelectedIndex="{Binding UnitAvailabilityIndex,Mode=OneWayToSource}"
Style="{StaticResource PickerStyle}"/>
</Grid>
<Label
Text="{Binding UnitAvailabilityError,Mode=OneWay}"
Style="{StaticResource ErrorLabel}"
IsVisible="{Binding UnitAvailabilityErrorVis,Mode=OneWay}"
/>
<!--Electricity Meter-->
<Entry
Placeholder="{xct:Translate ElectricityMeterInfo}"
Text="{Binding ElecMeter}"
Style="{StaticResource EntryStyle}"
Keyboard="Numeric"/>
<Label
Text="{Binding ElecMeterError,Mode=OneWay}"
Style="{StaticResource ErrorLabel}"
IsVisible="{Binding ElecMeterErrorVis,Mode=OneWay}"
/>
<!--Water Meter-->
<Entry
Placeholder="{xct:Translate WaterMeterInfo}"
Text="{Binding WaterMeter}"
Style="{StaticResource EntryStyle}"
Keyboard="Numeric"/>
<Label
Text="{Binding WaterMeterError,Mode=OneWay}"
Style="{StaticResource ErrorLabel}"
IsVisible="{Binding WaterMeterErrorVis,Mode=OneWay}"
/>
<!--Submit Button-->
<Button
Text="{xct:Translate Submit}"
Command="{Binding SubmitCommand}"
Style="{StaticResource ButtonStyle}"/>
</StackLayout>
</ScrollView>
</ContentPage.Content>
and my static resourse for styling each view
<!--Entry Style-->
<Style x:Key="EntryStyle" TargetType="Entry">
<Setter Property="VerticalOptions" Value="CenterAndExpand"/>
<Setter Property="HorizontalOptions" Value="FillAndExpand"/>
<Setter Property="PlaceholderColor" Value="Black"/>
<Setter Property="HorizontalTextAlignment" Value="Start"/>
</Style>
<!--Button Style-->
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="VerticalOptions" Value="CenterAndExpand"/>
<Setter Property="HorizontalOptions" Value="CenterAndExpand"/>
<Setter Property="Margin" Value="20"/>
<Setter Property="CornerRadius" Value="30"/>
<Setter Property="BackgroundColor" Value="Black"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="WidthRequest" Value="140"/>
</Style>
<!--Error Label-->
<Style x:Key="ErrorLabel" TargetType="Label">
<Setter Property="TextColor" Value="Red"/>
</Style>
<!--Picker Style-->
<Style x:Key="PickerStyle" TargetType="Picker">
<Setter Property="WidthRequest" Value="300"/>
<Setter Property="VerticalOptions" Value="CenterAndExpand"/>
<Setter Property="HorizontalOptions" Value="CenterAndExpand"/>
</Style>
<!--Picker Label Style-->
<Style x:Key="PickerLabelStyle" TargetType="Label">
<Setter Property="VerticalOptions" Value="CenterAndExpand"/>
<Setter Property="HorizontalOptions" Value="CenterAndExpand"/>
<Setter Property="TextColor" Value="Black"/>
<Setter Property="FontSize" Value="Medium"/>
</Style>
Note: the screen shot taken from android device xiaomi redmi note 7
It might be this open bug.
A work-around from this comment:
Replace this:
<ScrollView>
...
</ScrollView>
With this:
<Grid>
<ScrollView>
...
</ScrollView>
<Grid>

Xamarin collectionview is not scrolling smoothly

I am using collection view in Xamarin and I don't know what reason the scrolling is not smooth. I implemented compiled binding and increased the Garbage collector size in android. I would like any recommendation on how to optimize the collection view, or point out what the problem is.
<CollectionView x:DataType="viewmodels:PageViewModel" ItemsSource="{Binding ItemList}" >
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:Item">
<StackLayout>
<BoxView HorizontalOptions="FillAndExpand" HeightRequest="5" Color="Silver"/>
<Grid RowSpacing="0" ColumnSpacing="0" Padding="15,10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.ColumnSpan="2" Grid.Column="0" Orientation="Horizontal">
<ff:CachedImage Source="Image.jpg" HeightRequest="50" WidthRequest="50" HorizontalOptions="Start">
<ff:CachedImage.Transformations>
<ffTrans:CircleTransformation />
</ff:CachedImage.Transformations>
</ff:CachedImage>
<StackLayout HorizontalOptions="FillAndExpand" Padding="10,0,0,0">
<Label Text="{Binding Name}" FontSize="Small"/>
<Label Text="{Binding Date, StringFormat='{0:dd MMM yyyy}'}" FontSize="Small"/>
</StackLayout>
</StackLayout>
<ImageButton Grid.Row="0" BackgroundColor="Transparent" Grid.Column="2" IsVisible="True" Source="Icon.png" WidthRequest="30" HorizontalOptions="End">
<ImageButton.Triggers>
<DataTrigger TargetType="ImageButton" Binding="{Binding .}" Value="True" >
<Setter Property="IsVisible" Value="False" />
</DataTrigger>
<DataTrigger TargetType="ImageButton" Binding="{Binding .}" Value="False" >
<Setter Property="IsVisible" Value="False" />
</DataTrigger>
</ImageButton.Triggers>
</ImageButton>
<ImageButton Grid.Row="0" BackgroundColor="Transparent" Grid.Column="2" IsVisible="False" Source="Icon.png" WidthRequest="30" HorizontalOptions="End">
<ImageButton.Triggers>
<DataTrigger TargetType="ImageButton" Binding="{Binding .}" Value="True" >
<Setter Property="IsVisible" Value="True" />
</DataTrigger>
</ImageButton.Triggers>
</ImageButton>
<ImageButton Grid.Row="0" BackgroundColor="Transparent" Grid.Column="2" IsVisible="False" Source="img.png" WidthRequest="30" HorizontalOptions="End">
<ImageButton.Triggers>
<DataTrigger TargetType="ImageButton" Binding="{Binding .}" Value="False" >
<Setter Property="IsVisible" Value="True" />
</DataTrigger>
</ImageButton.Triggers>
</ImageButton>
<ImageButton Grid.Row="0" BackgroundColor="Transparent" Grid.Column="2" Source="Icon.png" WidthRequest="20" HorizontalOptions="Center"/>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Text="{Binding Text}" Margin="0,10"/>
<mediavideoplayer:VideoPlayer x:Name="mediaelement" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" IsEnabled="{Binding Attachments, Converter={StaticResource VideoVisibilityConverter}}" IsVisible="{Binding Attachments ,Converter={StaticResource VideoVisibilityConverter}}" DisplayControls="False" FillMode="ResizeAspectFill" HeightRequest="350" AutoPlay="True" Repeat="True">
<mediavideoplayer:VideoPlayer.Source>
<MultiBinding Converter="{StaticResource VideoUrlConverter}">
<Binding Path="Attachments.Path" />
<Binding Path="Attachments" />
</MultiBinding>
</mediavideoplayer:VideoPlayer.Source>
</mediavideoplayer:VideoPlayer>
<Image IsVisible="{Binding Attachments, Converter={StaticResource ImageVisibilityConverter}}" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Aspect="AspectFill" Style="{StaticResource StCommentPicture}">
<Image.Source>
<MultiBinding Converter="{StaticResource UrlConverter}">
<Binding Path="Attachments.path" />
<Binding Path="Attachments" />
</MultiBinding>
</Image.Source>
</Image>
<StackLayout Grid.Row="3" Grid.Column="0" >
<Label Text="πŸ‘" />
<Label Text="😍" />
<Label Text="πŸ˜‚" />
<Label x:Name="LikesCount" Grid.Row="5" Grid.Column="1" Text="{Binding likes}" />
</StackLayout>
<Label Grid.Row="3" Grid.Column="2" HorizontalOptions="End" Text="{Binding Comments, StringFormat='{0} Comments'}" Margin="0,6"/>
<BoxView Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" VerticalOptions="EndAndExpand" HeightRequest="1" Color="LightGray" Margin ="0,5"/>
<Frame Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" x:Name="likeArea" Opacity="0" Padding="0" HasShadow="true" OutlineColor="#EEEEEE" CornerRadius="70">
<Grid x:Name="GridlikeArea" Padding="5,0" BackgroundColor="Transparent" ColumnDefinitions="*,*,*,*,*" VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<ImageButton x:Uid="Like" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="0" Aspect="AspectFit" Source="Like.png" Clicked="LikeFrame_Clicked" ></ImageButton>
<ImageButton x:Name="Laugh" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="1" Aspect="AspectFit" Source="Laugh.png" Clicked="LikeFrame_Clicked"></ImageButton>
<ImageButton x:Name="Love" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="2" Aspect="AspectFit" Source="love.png" Clicked="LikeFrame_Clicked"></ImageButton>
<ImageButton x:Name="Sad" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="3" Aspect="AspectFit" Source="sad.png" Clicked="LikeFrame_Clicked"></ImageButton>
<ImageButton x:Name="Hate" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="4" Aspect="AspectFit" Source="angry.png" Clicked="LikeFrame_Clicked"></ImageButton>
</Grid>
</Frame>
<Button x:Name="LikeButton" HeightRequest="40" BackgroundColor="{Binding Reactions,Converter={StaticResource ReactionColorConverter}}"
CornerRadius="50" Grid.Row="5" Grid.Column="0" ImageSource="{Binding Reactions, Converter={StaticResource ReactionImageConverter}}" Text="Like" Clicked="LikeButton_Clicked" HorizontalOptions="StartAndExpand"/>
</Grid>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.Footer>
<StackLayout HorizontalOptions="CenterAndExpand" Padding="0">
<Button BackgroundColor="Transparent" HorizontalOptions="CenterAndExpand" TextColor="#529dff" FontAttributes="Bold" Text="Load More..." Command="{Binding LoadMoreCommand}" Clicked="loadmorebutton_Clicked"/>
</StackLayout>
</CollectionView.Footer>
</CollectionView>
**Note: deleting the mediavideoplayer:VideoPlayer control wont make any difference **
The Issue is solved by the nuget Glidex. glidex.forms is small library we can use to improve Xamarin.Forms image performance on Android by taking a dependency on Glide. See my post on the topic here.

How to fill and expand a Button within a Frame Xamarin.Forms

I have different Buttons that I want to put inside the <Frame> control, all this with the aim of avoiding the overflow of the image within the <ListView>, but when putting the HorizontalOptions and VerticalOptions property in FillAndExpand is not filling the Frame, I attached an image of the problem
How can I make the <Button> inside the <Frame> fill the space? I have tried to give the Columns and Rows the Auto property and I have not succeeded.
How can I keep the size of the button (Height and Width) but without losing the frame?
How can I fill and expand the button inside a Frame?
Any help for me?
VIEW.XAML:
<ListView
ItemsSource="{Binding ListaInventario}"
SelectionMode="None"
VerticalOptions="FillAndExpand"
IsRefreshing="{Binding IsRefreshing, Mode=TwoWay}"
HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout
Margin="0,4,0,0"
Orientation="Vertical">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label
Text="{Binding Id}"
FontSize="Small"
HorizontalOptions="Center"
FontAttributes="Bold"
HeightRequest="39"
VerticalTextAlignment="Start"
TextColor="{StaticResource das.color.texto}"
Grid.Column="0"
Grid.Row="0">
</Label>
<Label
Text="{Binding NombreComercial}"
HorizontalOptions="Start"
FontSize="Small"
MaxLines="3"
HeightRequest="39"
TextColor="{StaticResource das.color.texto}"
VerticalOptions="Start"
Grid.Column="1"
Grid.Row="0">
</Label>
<Frame
HorizontalOptions="End"
BackgroundColor="Transparent"
Grid.Column="2"
Grid.Row="0">
<Button
ImageSource="ic_pdf"
HeightRequest="35"
WidthRequest="50"
BackgroundColor="{StaticResource das.color.estado_primary}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Command="{Binding HDSSisquimCommand}"/>
</Frame>
</Grid>
<!---->
<!--CANTIDAD-->
<StackLayout
Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
Margin="0,1,0,2">
<StackLayout
Orientation="Horizontal"
HorizontalOptions="Start"
Margin="0,0,3,0">
<Label
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
VerticalOptions="End"
VerticalTextAlignment="Center"
Text="Cantidad: "
FontAttributes="Bold"
FontSize="Small"
HeightRequest="35"
IsEnabled="{Binding EnabledEstimadoEntry}"></Label>
<Entry
HorizontalOptions="FillAndExpand"
Placeholder="Cantidad"
Keyboard="Numeric"
HorizontalTextAlignment="Center"
MaxLength="4"
FontSize="Small"
HeightRequest="35"
Text="{Binding CantidadDecimal}"
IsEnabled="{Binding EnabledContenedorEntry}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStatesEntry">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Transparent" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Focused">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="LightGray" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Entry>
</StackLayout>
<!--UNIDAD-->
<StackLayout
Orientation="Horizontal"
HorizontalOptions="FillAndExpand">
<Label
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
VerticalOptions="End"
VerticalTextAlignment="Center"
Text="Unidad: "
FontAttributes="Bold"
FontSize="Small"
HeightRequest="35"
IsEnabled="{Binding EnabledEstimadoEntry}"></Label>
<Picker
iOSSpecific:Picker.UpdateMode = "WhenFinished"
ItemsSource="{Binding ListaUnidadesMedida}"
SelectedItem="{Binding SelectedUnidadMedida}"
ItemDisplayBinding="{Binding NombreCorto}"
Title="Unidad"
FontSize="Small"
HeightRequest="35"
HorizontalOptions="FillAndExpand"
IsEnabled="{Binding EnabledContenedor}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStatesPicker">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Transparent" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Focused">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="LightGray" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Picker>
</StackLayout>
</StackLayout>
<!-- TWO BUTTONS -->
<StackLayout
Orientation="Horizontal"
HorizontalOptions="End"
Margin="0,1,0,2">
<Button
Margin="0,0,2,0"
ImageSource="ic_actualizar"
BackgroundColor="{Binding ColorBotonActualizar}"
HorizontalOptions="End"
VerticalOptions="Center"
HeightRequest="35"
WidthRequest="50"
Command="{Binding ActualizarSQCommand}"/>
<Button
ImageSource="ic_minus_sisquim"
BackgroundColor="{StaticResource das.color.estado_danger}"
HorizontalOptions="End"
VerticalOptions="Center"
HeightRequest="35"
WidthRequest="50"
Command="{Binding DesasociarSQCommand}"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I only needed to set Padding="0" in the frame.
HorizontalOptions and VerticalOptions where not necessary to set as #Jessie Zhang -MSFT suggested.
<Frame Padding="0">
<Button />
</Frame>
You can try to added a property Padding="0" to Frame and remove the following properties of Button.
HeightRequest="35"
WidthRequest="50"
So the code is like this:
<Frame
HorizontalOptions="End"
BackgroundColor="Green"
Grid.Column="2"
Padding="0"
Grid.Row="0">
<Button
Text="test"
BackgroundColor="Accent"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
/>
</Frame>

Xamarin MasterPage - show/hide seperator line within menu

How do I show/hide the seperator line within the menu from a MasterPage? At the moment, all the lines seem to be enabled, but I don't know where they are coming from. I want to disable all line except the line between "Slaap" and "Persoonlijke gegevens". In this picture it looks like there are only two lines, but in reality you can see them all clearly.
MasterPage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TimeToSport.Views"
xmlns:local1="clr-namespace:TimeToSport.Views"
x:Class="TimeToSport.Views.Main.MasterPage"
Padding="0,0,0,0" Title="Time To Sport">
<StackLayout>
<Image Source="HeaderBackground.png" Margin="0,0,0,15"/>
<ListView x:Name="listView" x:FieldModifier="public">
<ListView.ItemsSource>
<x:Array Type="{x:Type local:MasterPageItem}">
<local1:MasterPageItem Title="Home" IconSource="contacts.png" TargetType="{x:Type local:ItemsPage}" />
<local1:MasterPageItem Title="Sport" IconSource="contacts.png" TargetType="{x:Type local:SportPage}" />
<local1:MasterPageItem Title="Voeding" IconSource="reminders.png" TargetType="{x:Type local:VoedingPage}" />
<local1:MasterPageItem Title="Slaap" IconSource="todo.png" TargetType="{x:Type local:SlaapPage}" />
<local1:MasterPageItem Title="Persoonlijke Gegevens" IconSource="todo.png" TargetType="{x:Type local:GegevensGewichtDoel}"/>
</x:Array>
</ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding IconSource}" />
<Label Grid.Column="1" Text="{Binding Title}" FontSize="17" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
First, your Listview should have the SeparatorVisibility=None,
In your local: MasterPageItem add a new Property IsSeparator, to identify which element will be separator
Then, in your listview
<ListView x:Name="listView" SeparatorVisibility="None" x:FieldModifier="public">
<ListView.ItemsSource>
<x:Array Type="{x:Type local:MasterPageItem}">
<local1:MasterPageItem Title="Home" IconSource="contacts.png" TargetType="{x:Type local:ItemsPage}" />
<local1:MasterPageItem Title="Sport" IconSource="contacts.png" TargetType="{x:Type local:SportPage}" />
<local1:MasterPageItem Title="Voeding" IconSource="reminders.png" TargetType="{x:Type local:VoedingPage}" />
<local1:MasterPageItem IsSeparator="true" Title="Slaap" IconSource="todo.png" TargetType="{x:Type local:SlaapPage}" />
<local1:MasterPageItem Title="Persoonlijke Gegevens" IconSource="todo.png" TargetType="{x:Type local:GegevensGewichtDoel}"/>
</x:Array>
</ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5,10">
<Grid.RowDefinitions>
<RowDefinition Height ="*"/>
<RowDefinition Height ="1"/>
<Grid.RowDefinitions/>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding IconSource}" />
<Label Grid.Column="1" Text="{Binding Title}" FontSize="17" />
<BoxView Grid.Row="1" Grid.ColumnSpan="2" HeightRequest="1" Color="Red" IsVisible="{Binding IsSeparator}">
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>