I have a question here about customizing ProgressBar. However I am not using Syncfusion. Here is my idea, it seems not perfect =]]]]]
<StackLayout Padding="12,0" Margin="0,0,0,35">
<Grid HorizontalOptions="FillAndExpand" BackgroundColor="#fff" Padding="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--group-->
<Grid Grid.Row="0" Grid.Column="0" Margin="0,0,0,-2" HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="0 K" HorizontalOptions="CenterAndExpand" FontSize="12" />
</Grid>
<Grid Grid.Row="1" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center">
<Frame HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="Red"></Frame>
</Grid>
<Grid Grid.Row="2" Grid.Column="0" Margin="0,-2,0,0" HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="10%" TextColor="Red" HorizontalOptions="CenterAndExpand" FontSize="13" />
</Grid>
<!--end group-->
<!--group-->
<Grid Grid.Row="0" Grid.Column="1" Margin="0,0,0,-2" HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="10 K" HorizontalOptions="CenterAndExpand" FontSize="12" />
</Grid>
<Grid Grid.Row="1" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center">
<Frame HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="#ddd"></Frame>
</Grid>
<Grid Grid.Row="2" Grid.Column="1" Margin="0,-2,0,0" HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="11%" TextColor="Red" HorizontalOptions="CenterAndExpand" FontSize="13" />
</Grid>
<!--end group-->
<!--group-->
<Grid Grid.Row="0" Grid.Column="2" Margin="0,0,0,-2" HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="200 K" HorizontalOptions="CenterAndExpand" FontSize="12" />
</Grid>
<Grid Grid.Row="1" Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center">
<Frame HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="#ddd"></Frame>
</Grid>
<Grid Grid.Row="2" Grid.Column="2" Margin="0,-2,0,0" HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="12%" TextColor="Red" HorizontalOptions="CenterAndExpand" FontSize="13" />
</Grid>
<!--end group-->
<!--group-->
<Grid Grid.Row="0" Grid.Column="3" Margin="0,0,0,-2" HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="300 K" HorizontalOptions="CenterAndExpand" FontSize="12" />
</Grid>
<Grid Grid.Row="1" Grid.Column="3" HorizontalOptions="Center" VerticalOptions="Center">
<Frame HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="#ddd"></Frame>
</Grid>
<Grid Grid.Row="2" Grid.Column="3" Margin="0,-2,0,0" HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="12%" TextColor="Red" HorizontalOptions="CenterAndExpand" FontSize="13" />
</Grid>
<!--end group-->
<!--group-->
<Grid Grid.Row="0" Grid.Column="4" Margin="0,0,0,-2" HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="400 K" HorizontalOptions="CenterAndExpand" FontSize="12" />
</Grid>
<Grid Grid.Row="1" Grid.Column="4" HorizontalOptions="Center" VerticalOptions="Center">
<Frame HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="#ddd"></Frame>
</Grid>
<Grid Grid.Row="2" Grid.Column="4" Margin="0,-2,0,0" HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="12%" TextColor="Red" HorizontalOptions="CenterAndExpand" FontSize="13" />
</Grid>
<!--end group-->
<!--group-->
<Grid Grid.Row="0" Grid.Column="5" Margin="0,0,0,-2" HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="500 K" HorizontalOptions="CenterAndExpand" FontSize="12" />
</Grid>
<Grid Grid.Row="1" Grid.Column="5" HorizontalOptions="Center" VerticalOptions="Center">
<Frame HasShadow="False" Padding="0" CornerRadius="30" WidthRequest="10" HeightRequest="10" BackgroundColor="#ddd"></Frame>
</Grid>
<Grid Grid.Row="2" Grid.Column="5" Margin="0,-2,0,0" HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="12%" TextColor="Red" HorizontalOptions="CenterAndExpand" FontSize="13" />
</Grid>
<!--end group-->
</Grid>
<ProgressBar Margin="35,-37.5,35,0" ProgressColor="#ddd" HeightRequest="3" HorizontalOptions="FillAndExpand" x:Name="progressbar"/>
</StackLayout>
And this is the result:
I have 2 questions:
How is the ProgressBar below the red dot I circled in the image above?
Inside .xaml.cs how can i set ProgressTo for ProgressBar. Here is how I set it up. However it doesn't work:
private async void Progress()
{
progressbar.Progress = 10000;
float progress = 2000;
await progressbar.ProgressTo(progress, 500, Easing.Linear);
}
Please help any solution. Thank you!
Because your ProgressBar is the last element in your StackLayout, it will be drawn on TOP of the previous controls
From the docs:
Progress is a float value that represents the current progress as a
value from 0 to 1. Progress values less than 0 will be clamped to 0,
values greater than 1 will be clamped to 1.
Related
I looked for open codes or nuget that could help me with this question, I would like to create a list of Cards like these in the images, where I could have several click events, but could get the id of the item that fills the card.
Eu tentei com CollectionView, porem não consigo pegar a id do item do card, nem com uma label e o x:Name atribuído a essa label.
Segue o cod xaml que criei
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage.Resources>
<converters:ByteArrayToImageSourceConverter x:Key="ByteArrayToImage" />
</ContentPage.Resources>
<ContentPage.Content>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<Image.GestureRecognizers HeightRequest="30" WidthRequest="30">
</Image.GestureRecognizers>
<CollectionView ItemsSource="{Binding Items}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="0" Margin="2">
<Grid>
<StackLayout Padding="0" Margin="5,25,10,0" HorizontalOptions="Center">
<Frame BackgroundColor="White" HeightRequest="440" WidthRequest="330" HasShadow="True" Padding="5" Margin="0">
<StackLayout>
<Label x:Name="lblMessage" HorizontalOptions="StartAndExpand" Text="Rep:" IsVisible="false"></Label>
<StackLayout HeightRequest="100" WidthRequest="320" Orientation="Horizontal" HorizontalOptions="Fill">
<Frame HeightRequest="100" WidthRequest="320" BackgroundColor="Transparent" Padding="0" Margin="0">
<ImageButton Source="{Binding ImagemVideo, Converter={StaticResource ByteArrayToImage}}" Aspect="AspectFill" Margin="0" Clicked="Video_Clicked"/>
</Frame>
</StackLayout>
<Frame BorderColor="Transparent" BackgroundColor="White" HorizontalOptions="CenterAndExpand">
<Label Grid.Column="0"
TextColor="#000000"
Text="{Binding NomeTreino}"
FontAttributes="None"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Start"
Margin="8,0,10,10"
FontSize="Medium"/>
</Frame>
<Frame BorderColor="LightGray" BackgroundColor="White" HorizontalOptions="StartAndExpand">
<Label Grid.Row="2" HorizontalOptions="StartAndExpand" Text="{Binding Descricao}"/>
</Frame>
<StackLayout Padding="0" Margin="5,5">
<Grid Visual="Material">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="65"/>
<RowDefinition Height="65"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Visual="Material" Grid.Column="0" BorderColor="LightGray">
<StackLayout >
<Label HorizontalOptions="StartAndExpand" Text="Carga:"></Label>
<Label HorizontalOptions="CenterAndExpand" Text="{Binding cargaInicial}"></Label>
</StackLayout>
</Frame>
<Frame Grid.Row="0" Grid.Column="1" BorderColor="LightGray">
<StackLayout >
<Label HorizontalOptions="StartAndExpand" Text="Séries:"></Label>
<Label HorizontalOptions="CenterAndExpand" Text="{Binding serie1}"></Label>
</StackLayout>
</Frame>
<Frame Grid.Row="0" Grid.Column="2" BorderColor="LightGray">
<StackLayout >
<Label HorizontalOptions="StartAndExpand" Text="Rep:"></Label>
<Label HorizontalOptions="CenterAndExpand" Text="{Binding repeticao1}"></Label>
</StackLayout>
</Frame>
<Frame Grid.Row="1" Grid.Column="0" BorderColor="LightGray">
<StackLayout >
<!--<Image Source="prod.jpg"></Image>-->
<Label Text="{Binding tempoIntervalo}" ></Label>
</StackLayout>
</Frame>
<Frame Grid.Row="1" Grid.Column="2" BorderColor="LightGray">
<StackLayout >
<ImageButton BackgroundColor="White" Source="Checkblue.png" Aspect="Fill" HeightRequest="20" WidthRequest="20" Margin="0" Clicked="BtnCheck_Clicked"/>
</StackLayout>
</Frame>
</Grid>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</Grid>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ScrollView>
</StackLayout>
</ContentPage.Content>
in your event handler
protected void ButtonClicked(object Sender, EventArgs args)
{
var btn = (Button)sender;
var item = (MyClassName)btn.BindingContext;
// now you can access an property on item that you need
}
Im unable to navigate the content page when i click on button using xamarin forms. It is working on Android but not working in IOS.
Kindly check the below code.
ButtonClick Event
Navigation.PushAsync(new LeaveRequestAddEdit("insert"));
The xaml code is
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
<ContentPage.Content>
<StackLayout>
<Frame Padding="5" Margin="5,5,5,5" CornerRadius="10" HasShadow="True" BackgroundColor="White" BorderColor="LightBlue">
<Grid BackgroundColor="White" x:Name="LeaveRequestContainer">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
<RadioButton x:Name="OnedayRadioBtn" Clicked="OnedayRadioBtn_Clicked" />
<Label Text="One Day" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" Orientation="Horizontal">
<RadioButton x:Name="MultipledaysRadioBtn" Clicked="MultipledaysRadioBtn_Clicked"/>
<Label Text="Multiple Days" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
</StackLayout>
<Label x:Name="selectlable" Text="Select :" Margin="50,0,0,0" IsVisible="False" Grid.Row="1" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
<DatePicker x:Name="selectdate" IsVisible="False" Date="{Binding FromDate,Mode=TwoWay}" Format="dd/MM/yyy" Grid.Row="1" Grid.Column="1" HorizontalOptions="StartAndExpand" />
<Label x:Name="fromdatelabel" Text="From Date :" IsVisible="False" Margin="50,0,0,0" Grid.Row="1" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
<DatePicker x:Name="fromdate" IsVisible="False" DateSelected="fromdate_DateSelected" Date="{Binding FromDate,Mode=TwoWay}" Format="dd/MM/yyy" Grid.Row="1" Grid.Column="1" HorizontalOptions="StartAndExpand"/>
<Label x:Name="todatelable" Text="To Date :" IsVisible="False" Margin="50,0,0,0" Grid.Row="2" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
<DatePicker x:Name="Todate" IsVisible="False" Date="{Binding ToDate,Mode=TwoWay}" Format="dd/MM/yyy" Grid.Row="2" Grid.Column="1" HorizontalOptions="StartAndExpand"/>
<Frame CornerRadius="10" Margin="0" Padding="0" BorderColor="LightBlue" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" >
<local1:ExtendedEditorControl x:Name="Reason" Placeholder="Enter Reason Here" IsExpandable="True" Text="{Binding ReasonForLeave,Mode=TwoWay}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" MaxLength="250" />
</Frame>
<StackLayout Orientation="Vertical" x:Name="ActionNoteStack" IsVisible="False" Grid.Row="4" Grid.ColumnSpan="2" Grid.RowSpan="2">
<Label x:Name="title" IsVisible="False" Text="Action Notes :" TextColor="Black" HorizontalOptions="Start" VerticalOptions="Center" />
<!--<Label Text="Action Notes :" WidthRequest="400" VerticalTextAlignment="Center" HorizontalOptions="FillAndExpand" TextColor="Blue"/>-->
<Frame x:Name="actionframe" IsVisible="False" CornerRadius="10" Margin="0" BorderColor="LightBlue" Padding="0">
<Label x:Name="actionNote" IsVisible="False" Text="{Binding ActionNotes,Mode=TwoWay}" Margin="5" VerticalOptions="Center" HorizontalOptions="FillAndExpand" />
</Frame>
</StackLayout>
</Grid>
</Frame>
<StackLayout Margin="5,0,5,5" Orientation="Horizontal" VerticalOptions="End">
<Button Text="Save" x:Name="btnSave" BackgroundColor="#6559D8" CornerRadius="10" TextColor="White" HorizontalOptions="FillAndExpand" Clicked="btnSave_Clicked"/>
<Button Text="Cancel" x:Name="btnCancel" Clicked="btnCancel_Clicked" BackgroundColor="Gray" CornerRadius="10" TextColor="White" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Kindly help on this. I'm new to Xamarin forms
You can replace the Clicked event in the RadioButton with the CheckedChanged event to make it work.
I am trying to create a UI like below:
My Code:
<RelativeLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="33.3*" />
<ColumnDefinition Width="33.4*" />
<ColumnDefinition Width="33.3*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#F0BB1D" Margin="-10">
<Label Text="Daily Readings" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" HeightRequest="40" Orientation="Vertical" BackgroundColor="#FD728B" Margin="-10">
<Label Text="Saint of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="2" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#1FB5D6" Margin="-10">
<Label Text="Quiz of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
</StackLayout>
</Grid>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="33.3*" />
<ColumnDefinition Width="33.4*" />
<ColumnDefinition Width="33.3*" />
</Grid.ColumnDefinitions>
<Image Source="ic_daily_reading_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="0" />
<Image Source="ic_saint_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="1" />
<Image Source="ic_quiz_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="2"/>
</Grid>
</StackLayout>
</RelativeLayout>
Current Output:
How can I create a layout like the top? What property of relative layout needs to use to achieve this?
In fact it's pretty simple, use the TranslationY property on your images view:
<Image Grid.Column="0"
TranslationY="-20"
Source="ic_daily_reading_icon_xx.png"
WidthRequest="30"
HeightRequest="30" />
Agree with #Roubachof. Or you can put the stacklayouts in the same grid cell .
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand">
<Grid HeightRequest="30">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="33.3*" />
<ColumnDefinition Width="33.4*" />
<ColumnDefinition Width="33.3*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#F0BB1D" >
<Label Text="Daily Readings" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" HeightRequest="40" Orientation="Vertical" BackgroundColor="#FD728B" >
<Label Text="Saint of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="2" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#1FB5D6" >
<Label Text="Quiz of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
</StackLayout>
</Grid>
</StackLayout>
<StackLayout Grid.Row="0" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" >
<Grid HeightRequest="30">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="33.3*" />
<ColumnDefinition Width="33.4*" />
<ColumnDefinition Width="33.3*" />
</Grid.ColumnDefinitions>
<Image BackgroundColor="Red" WidthRequest="30" HeightRequest="30" Grid.Column="0" />
<Image BackgroundColor="Red" WidthRequest="30" HeightRequest="30" Grid.Column="1" />
<Image BackgroundColor="Red" WidthRequest="30" HeightRequest="30" Grid.Column="2"/>
</Grid>
</StackLayout>
</Grid>
You can do it this way:
<Grid>
<Button HeightRequest="50" WidthRequest="100" HorizontalOptions="Start" VerticalOptions="Start" BackgroundColor="Red"/>
<Button HeightRequest="100" WidthRequest="50" HorizontalOptions="Start" VerticalOptions="Start" BackgroundColor="Green"/>
</Grid>
Pay attention to HorizontalOptions and VerticalOptions properties, these specify how controls are placed. (In my case the objects are anchored to top left corner)
And controls order matter. You can see that green button is on top of the red one, it's because in the code it's placed after the red one.
Just to supplement the solution by Alex Logvin, I was able to superimpose images and text with transparency over a photo in my gammaDog application:
<Grid>
<ffimageloading:CachedImage
x:Name="MyImage"
Source="{Binding MyImage}" >
</ffimageloading:CachedImage>
<Image HorizontalOptions="Center"
VerticalOptions="Center"
Rotation="{Binding Heading}"
Source="arrow.png"
Margin="75"
x:Name="ImageArrow"/>
<Image HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Rotation="{Binding HeadingCompass}"
Source="compass.png"/>
<Label Text="{Binding MyTitle, StringFormat='{0}'}"
FontSize="Large" TextColor="Red"
HorizontalTextAlignment="Center"></Label>
<Label Text="{Binding MyNote, StringFormat='{0}'}"
FontSize="Large" TextColor="Red"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Bottom"></Label>
</Grid>
I have created a page in Xamarin forms and trying to show 4 images. These images are in png format. However I can only see one png image at a time and not all of them
I have tried moving image tag outside StackLayout but it doesnt show. However if i use same png image for all 5 icons, i can see them.
If i comment first image, I can see second image only.
<ContentPage.Content>
<StackLayout HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Padding="10"
Spacing="30">
<Label Style="{StaticResource HeadingLblStyle}" Text="{Binding AssetPalletScanning}" />
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".33*"/>
<ColumnDefinition Width=".33*"/>
<ColumnDefinition Width=".33*"/>
</Grid.ColumnDefinitions>
<StackLayout HorizontalOptions="Center"
Spacing="10"
Style="{StaticResource VStackStyle}">
<Grid WidthRequest="100" HeightRequest="100">
<ct:CustomButton x:Name="btnInventoryPallet"
Grid.Row="0"
WidthRequest="100"
HeightRequest="100"
HorizontalOptions="Center"
VerticalOptions="Center"
BackgroundColor="{StaticResource DeepSea}"
BorderRadius="50"
Command="{Binding MoveChagneCommand}"
CommandParameter="Inventory"/>
<StackLayout Grid.Row="0"
WidthRequest="50"
HeightRequest="50"
HorizontalOptions="Center"
VerticalOptions="Center" BackgroundColor="{StaticResource DeepSea}">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding MoveChagneCommand}" CommandParameter="Inventory"/>
</StackLayout.GestureRecognizers>
<Image HorizontalOptions="Center"
VerticalOptions="Center"
Source="inventory.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding MoveChagneCommand}" CommandParameter="Inventory"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</Grid>
<Button HorizontalOptions="CenterAndExpand"
BackgroundColor="Transparent"
Command="{Binding MoveChagneCommand}"
CommandParameter="Inventory"
FontFamily="{StaticResource RegularFont}"
FontSize="{StaticResource BigSize}"
Text="{Binding AssetInventoryPallet}"
TextColor="{StaticResource HippieBlue}" />
</StackLayout>
<StackLayout HorizontalOptions="Center"
Spacing="10" Grid.Column="1"
Style="{StaticResource VStackStyle}">
<Grid WidthRequest="100" HeightRequest="100">
<ct:CustomButton x:Name="btnProductionPallet"
Grid.Row="0"
WidthRequest="100"
HeightRequest="100"
HorizontalOptions="Center"
VerticalOptions="Center"
BackgroundColor="{StaticResource DeepSea}"
BorderRadius="50"
Command="{Binding MoveChagneCommand}"
CommandParameter="Production"/>
<StackLayout Grid.Row="0"
WidthRequest="50"
HeightRequest="50"
HorizontalOptions="Center"
VerticalOptions="Center">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding MoveChagneCommand}" CommandParameter="Production"/>
</StackLayout.GestureRecognizers>
<Image HorizontalOptions="Center"
VerticalOptions="Center"
Source="production.png" >
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding MoveChagneCommand}" CommandParameter="Production"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</Grid>
<Button HorizontalOptions="CenterAndExpand"
BackgroundColor="Transparent"
Command="{Binding MoveChagneCommand}"
CommandParameter="Production"
FontFamily="{StaticResource RegularFont}"
FontSize="{StaticResource BigSize}"
Text="{Binding AssetProductionPallet}"
TextColor="{StaticResource HippieBlue}" />
</StackLayout>
<StackLayout HorizontalOptions="Center"
Spacing="10" Grid.Column="2"
Style="{StaticResource VStackStyle}">
<Grid WidthRequest="100" HeightRequest="100">
<ct:CustomButton x:Name="btnTeardownPallet"
Grid.Row="0"
WidthRequest="100"
HeightRequest="100"
HorizontalOptions="Center"
VerticalOptions="Center"
BackgroundColor="{StaticResource DeepSea}"
BorderRadius="50"
Command="{Binding MoveChagneCommand}" CommandParameter="Teardown"/>
<StackLayout Grid.Row="0"
WidthRequest="50"
HeightRequest="50"
HorizontalOptions="Center"
VerticalOptions="Center">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding MoveChagneCommand}" CommandParameter="Teardown"/>
</StackLayout.GestureRecognizers>
<Image HorizontalOptions="Center"
VerticalOptions="Center"
Source="teardown.png" >
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding MoveChagneCommand}" CommandParameter="Teardown"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</Grid>
<Button HorizontalOptions="CenterAndExpand"
BackgroundColor="Transparent"
Command="{Binding MoveChagneCommand}"
CommandParameter="Teardown"
FontFamily="{StaticResource RegularFont}"
FontSize="{StaticResource BigSize}"
Text="{Binding AssetTeardownPallet}"
TextColor="{StaticResource HippieBlue}" />
</StackLayout>
</Grid>
<Label Style="{StaticResource HeadingLblStyle}" Text="{Binding StorageUnitLocation}" />
<StackLayout HorizontalOptions="Center"
Spacing="10"
Style="{StaticResource VStackStyle}">
<Grid WidthRequest="100" HeightRequest="100">
<ct:CustomButton x:Name="btnMoveChange"
Grid.Row="0"
WidthRequest="100"
HeightRequest="100"
HorizontalOptions="Center"
VerticalOptions="Center"
BackgroundColor="{StaticResource DeepSea}"
BorderRadius="50"
Command="{Binding PalletZoneCommand}" />
<StackLayout Grid.Row="0"
WidthRequest="50"
HeightRequest="50"
HorizontalOptions="Center"
VerticalOptions="Center">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding PalletZoneCommand}" />
</StackLayout.GestureRecognizers>
<Image HorizontalOptions="Center"
VerticalOptions="Center"
Source="zone_location.png" >
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding PalletZoneCommand}"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</Grid>
<Button HorizontalOptions="CenterAndExpand"
BackgroundColor="Transparent"
Command="{Binding PalletZoneCommand}"
FontFamily="{StaticResource RegularFont}"
FontSize="{StaticResource BigSize}"
Text="{Binding PalletZoneLocation}"
TextColor="{StaticResource HippieBlue}" />
</StackLayout>
</StackLayout>
</ContentPage.Content>
Expected result - It should show all 5 icons but Actual result - It shows only one icon at a time and shows all if same image used
I think you're missing Grid.Row attributes on your StackLayouts inside your top-level Grid - so they all end up displaying on the 0th row.
I have different views along with ListView on my screen. ListView almost fills the screen and elements below the ListView are not visible. I have set HasUnEvenRows=True because each list item has different height.
<StackLayout Spacing="0">
<local:PageHeader></local:PageHeader>
<Grid Padding="25,15,25,10" Grid.RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" VerticalOptions="CenterAndExpand" Grid.ColumnSpan="1" Text="{local:Translate FROM_COLON}" FontSize="18"></Label>
<StackLayout Orientation="Vertical" Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Grid.ColumnSpan="3">
<Label Text="{Binding Group}" TextColor="{x:Static local:ColorUtils.DarkBlue}" FontStyle="Bold" FontSize="18"></Label>
<Label Text="{Binding Sender, StringFormat='<{0}>'}" TextColor="{x:Static local:ColorUtils.DarkBlue}" FontSize="18"></Label>
</StackLayout>
<ContentView Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Padding="0,15,0,0">
<Button Text="{Binding DetailsButtonTitle}" Clicked="OnDetailButtonClick" BackgroundColor="Transparent" TextColor="{x:Static local:ColorUtils.DarkBlue}" HorizontalOptions="Start" VerticalOptions="StartAndExpand" Padding="0"></Button>
</ContentView>
<Button Grid.Column="3" Grid.Row="1" Grid.RowSpan="{Binding ReplyButtonRowSpan}" Text="{local:Translate REPLY}" Image="reply_arrow_small" BackgroundColor="Transparent" TextColor="{x:Static local:ColorUtils.Gray}" HorizontalOptions="End" VerticalOptions="EndAndExpand" Padding="0" FontSize="13" WidthRequest="65" Clicked="OnReplyButtonClick"></Button>
<Label Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="3" IsVisible="{Binding IsDetailShown, Converter={local:NotConverter Convert}}" Text="{Binding HumanizedDateFormat}" TextColor="{x:Static local:ColorUtils.Gray}"></Label>
<ContentView Padding="0,0,0,5" Grid.Column="0" Grid.Row="2" IsVisible="{Binding IsDetailShown}" >
<Label Text="{local:Translate FROM_COLON}" TextColor="{x:Static local:ColorUtils.Gray}" FontStyle="Bold" />
</ContentView>
<StackLayout Orientation="Horizontal" Grid.Column="1" Grid.Row="2" Grid.RowSpan="2" Grid.ColumnSpan="3" IsVisible="{Binding IsDetailShown}">
<Label VerticalTextAlignment="Start" Text="{Binding Group}" TextColor="{x:Static local:ColorUtils.Gray}" FontStyle="Bold" />
<Label VerticalTextAlignment="Start" Text="{Binding Sender, StringFormat='<{0}>'}" TextColor="{x:Static local:ColorUtils.Gray}"></Label>
</StackLayout>
<Label Grid.Column="0" Grid.Row="4" Grid.RowSpan="1" IsVisible="{Binding IsDetailShown}" Text="{local:Translate TO_COLON}" TextColor="{x:Static local:ColorUtils.Gray}" FontStyle="Bold" />
<ListView x:Name="ListToAddresses" Grid.RowSpan="1" Grid.Column="1" Grid.Row="4" Grid.ColumnSpan="3" IsVisible="{Binding IsDetailShown}" HeightRequest="{Binding ListHeight}" VerticalOptions="Start" HasUnevenRows="True" CachingStrategy="RecycleElement" ItemsSource="{Binding Recipients}" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell IsEnabled="False">
<StackLayout VerticalOptions="Start" Padding="0,0,0,12" >
<Label Text="{Binding Path=Key}" VerticalTextAlignment="Start" TextColor="{x:Static local:ColorUtils.Gray}" FontStyle="Bold" VerticalOptions="Start" />
<Label Text="{Binding Path=Value}" VerticalTextAlignment="Start" TextColor="{x:Static local:ColorUtils.Gray}" VerticalOptions="Start" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ContentView Padding="0,5,0,0" Grid.Column="0" Grid.Row="5" IsVisible="{Binding IsDetailShown}">
<Label Text="{local:Translate DATE_COLON}" TextColor="{x:Static local:ColorUtils.Gray}" FontStyle="Bold" />
</ContentView>
<Label Grid.Column="1" Grid.Row="5" Grid.ColumnSpan="3" VerticalTextAlignment="End" IsVisible="{Binding IsDetailShown}" Text="{Binding LongDateFormat}" TextColor="{x:Static local:ColorUtils.Gray}"></Label>
</Grid>
<BoxView HeightRequest="1" BackgroundColor="{x:Static local:ColorUtils.LightGray}"></BoxView>
<ContentView Padding="25,15,25,0">
<Label Text="{Binding Description}" FontSize="18"></Label>
</ContentView>
</StackLayout>