Build a frame with pointer

Build a frame with pointer - xaml

I want to to build a frame like the below one with a pointer, in this case the triangle on the right:
How can this be done?

Create two stacked BoxViews using a Grid, and rotate the top one by 45 degrees:
<StackLayout>
<Grid HorizontalOptions="Center" VerticalOptions="CenterAndExpand" WidthRequest="100" HeightRequest="100">
<BoxView HorizontalOptions="Center" VerticalOptions="CenterAndExpand" WidthRequest="100" HeightRequest="80" BackgroundColor="Red"/>
<BoxView HorizontalOptions="End" VerticalOptions="CenterAndExpand"
WidthRequest="50" HeightRequest="50" BackgroundColor="Red" Rotation="45"/>
<StackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="0">
<Label HorizontalTextAlignment="Center" CharacterSpacing="2" FontSize="13" TextColor="White" Text="DECEMBER"/>
<Label HorizontalTextAlignment="Center" FontAttributes="Bold" FontSize="22" TextColor="White" Text="25"/>
<Label HorizontalTextAlignment="Center" CharacterSpacing="2" FontSize="13" TextColor="White" Text="WEDNESDAY"/>
</StackLayout>
</Grid>
</StackLayout>

Related

StackLayout Tableview cuts off half screen, but only on release mode

I am having some weird issues with my Tableview.
It cuts off half screen, but when I go on Debug mode it works fine.
I am using AbsoluteLayout but I am filling in the entire screen, at least what I think I am.
Only on this page though, all other pages look fine. This is the only page I am using a Tableview not sure if this is related. Only happen on iOS, and it affects when I download it from visual studio directly and also when I distribute it through App center so in this case I don't think it is the simulator or Visual studio. Any thoughts?
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Example123.MoreContentPage"
xmlns:local="clr-namespace:Example123.MarkupExtensions"
Title="More Settings">
<ContentPage.Content>
<AbsoluteLayout>
<StackLayout Padding="5" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<TableView x:Name="MoreTable"
HasUnevenRows="True"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<TableRoot>
<TableSection>
<ViewCell>
<StackLayout Orientation="Horizontal"
BackgroundColor="#f7f7fb">
<Label Text="Preferences"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="OpenFontSizing">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="settings.png"
Margin="10,10,0,10"
WidthRequest="23"/>
<Label Text="App Settings - Adjust text Size"
VerticalTextAlignment="Center"
Margin="15,5,10,5"
Padding="2"
x:Name="label1"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Terms of Use"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="OpenTermsandConditions">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="accept.png" WidthRequest="23" Margin="10,10,0,10"/>
<Label Text="Terms of Use"
Margin="15,5,10,5"
Padding="2"
VerticalTextAlignment="Center"
FontSize="{Binding H2Font}"
TextColor="#5e5e5e"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="DownloadRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="download.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Download our App!"
VerticalOptions="CenterAndExpand"
Margin="15,5,10,5"
Padding="2"
VerticalTextAlignment="Center"
LineBreakMode="WordWrap"
x:Name="label2"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Contact Specialty"
VerticalOptions="Center"
Margin="15,0,5,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SendEmail">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="envelope.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Feedback or Questions"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label3"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="News"
VerticalOptions="Center"
Margin="15,0,5,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="TWRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="twitterFinal.png" Margin="10,10,0,10"
WidthRequest="23" />
<Label Text="Product News"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label4"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Share Market®"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SeasonalRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="search_share.png" Margin="10,10,0,10"
WidthRequest="23" />
<Label Text="In Season Now! List"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label5"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SMRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="add.png" Margin="10,10,0,10" WidthRequest="23" />
<Label Text="Sign up for Share Market® HIghlights Newsletter"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label6"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Social Networks"
VerticalOptions="Center"
Margin="15,5,10,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="FBRedirect" >
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="facebook.png" Margin="10,10,0,10" WidthRequest="23" />
<Label Text="Facebook"
VerticalOptions="Center"
Margin="15,0,5,0"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label7"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="IGRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="instagram.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Instagram"
VerticalOptions="Center"
Margin="15,0,5,0"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label8"/>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
</StackLayout>
</AbsoluteLayout>

I ended up removing the StackLayout and adding the Layout Flags and Bounds to the TableView.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Example123.MoreContentPage"
xmlns:local="clr-namespace:Example123.MarkupExtensions"
Title="More Settings">
<ContentPage.Content>
<AbsoluteLayout>
<TableView x:Name="MoreTable"
HasUnevenRows="True"
AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<TableRoot>
<TableSection>
<ViewCell>
<StackLayout Orientation="Horizontal"
BackgroundColor="#f7f7fb">
<Label Text="Preferences"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="OpenFontSizing">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="settings.png"
Margin="10,10,0,10"
WidthRequest="23"/>
<Label Text="App Settings - Adjust text Size"
VerticalTextAlignment="Center"
Margin="15,5,10,5"
Padding="2"
x:Name="label1"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Terms of Use"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="OpenTermsandConditions">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="accept.png" WidthRequest="23" Margin="10,10,0,10"/>
<Label Text="Terms of Use"
Margin="15,5,10,5"
Padding="2"
VerticalTextAlignment="Center"
FontSize="{Binding H2Font}"
TextColor="#5e5e5e"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="DownloadRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="download.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Download our App!"
VerticalOptions="CenterAndExpand"
Margin="15,5,10,5"
Padding="2"
VerticalTextAlignment="Center"
LineBreakMode="WordWrap"
x:Name="label2"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Contact Specialty"
VerticalOptions="Center"
Margin="15,0,5,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SendEmail">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="envelope.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Feedback or Questions"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label3"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="News"
VerticalOptions="Center"
Margin="15,0,5,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="TWRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="twitterFinal.png" Margin="10,10,0,10"
WidthRequest="23" />
<Label Text="Product News"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label4"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Share Market®"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SeasonalRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="search_share.png" Margin="10,10,0,10"
WidthRequest="23" />
<Label Text="In Season Now! List"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label5"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SMRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="add.png" Margin="10,10,0,10" WidthRequest="23" />
<Label Text="Sign up for Share Market® HIghlights Newsletter"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label6"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Social Networks"
VerticalOptions="Center"
Margin="15,5,10,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="FBRedirect" >
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="facebook.png" Margin="10,10,0,10" WidthRequest="23" />
<Label Text="Facebook"
VerticalOptions="Center"
Margin="15,0,5,0"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label7"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="IGRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="instagram.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Instagram"
VerticalOptions="Center"
Margin="15,0,5,0"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label8"/>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
</AbsoluteLayout>

How would it be a good way to keep the title of the notification and the date separate? In both orientations of the device

Title: app_nome -> TWW / SALDO - HOSPITAL... (Example)
Time: dt_cadastro_hora -> 08:56 (Example)
NotificationsPage.xaml
<RefreshView x:DataType="local:NotificacoesViewModel"
Command="{Binding LoadItemsCommand}"
IsRefreshing="{Binding IsBusy, Mode=TwoWay}"
Padding="0,15,0,0">
<CollectionView x:Name="ItemsListView"
ItemsSource="{Binding Notificacoes}"
SelectionMode="None"
ItemsUpdatingScrollMode="KeepItemsInView"
VerticalScrollBarVisibility="Never"
HorizontalScrollBarVisibility="Never"
IsGrouped="True">
<CollectionView.GroupHeaderTemplate>
<DataTemplate x:DataType="model:NotificacaoGrupoData">
<Label Text="{Binding Data_agrupada}"
FontSize="20"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
Padding="0,15,0,15"
Style="{StaticResource LabelDataAgrupadaStyle}"/>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout x:DataType="model:Notificacao">
<StackLayout Orientation="Horizontal">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1"
Command="{Binding Source={RelativeSource AncestorType={x:Type local:NotificacoesViewModel}},
Path=NotificacaoSelecionada}"
CommandParameter="{Binding .}"/>
</StackLayout.GestureRecognizers>
<Image Source="logo"
HeightRequest="40"
Margin="0,0,5,0"
VerticalOptions="CenterAndExpand"/>
<StackLayout VerticalOptions="CenterAndExpand"
Margin="0,0,10,0">
<FlexLayout JustifyContent="SpaceBetween"
AlignItems="Center">
<Label Text="{Binding app_nome}"
Style="{StaticResource LabelStyle}"
FontSize="20"
WidthRequest="230"
LineBreakMode="TailTruncation"
FontAttributes="Bold"/>
<Label Text="{Binding dt_cadastro_hora}"
Style="{StaticResource LabelStyle}"
FontSize="13"
LineBreakMode="NoWrap"
MinimumWidthRequest="50"
FontAttributes="Bold"/>
</FlexLayout>
<Label Text="{Binding mensagem}"
TextType="Html"
LineBreakMode="TailTruncation"
Style="{StaticResource LabelStyle}"/>
</StackLayout>
<Label Text=""
FontFamily="FontAwesomeBold"
TextColor="#ACACAC"
FontSize="24"
HorizontalOptions="EndAndExpand"
VerticalOptions="CenterAndExpand"
Style="{StaticResource LabelStyle}">
</Label>
</StackLayout>
<BoxView HeightRequest="1"
BackgroundColor="#DDDDDD"
Margin="0,5,0,5"/>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</RefreshView>

You can try replace
<FlexLayout JustifyContent="SpaceBetween"
AlignItems="Center">
<Label Text="{Binding app_nome}"
Style="{StaticResource LabelStyle}"
FontSize="20"
WidthRequest="230"
LineBreakMode="TailTruncation"
FontAttributes="Bold"/>
<Label Text="{Binding dt_cadastro_hora}"
Style="{StaticResource LabelStyle}"
FontSize="13"
LineBreakMode="NoWrap"
MinimumWidthRequest="50"
FontAttributes="Bold"/>
</FlexLayout>
By (notice the HorizontalOptions)
<StackLayout Orientation="Horizontal">
<Label Text="{Binding app_nome}"
Style="{StaticResource LabelStyle}"
HorizontalOptions="StartAndExpand"
FontSize="20"
WidthRequest="230"
LineBreakMode="TailTruncation"
FontAttributes="Bold"/>
<Label Text="{Binding dt_cadastro_hora}"
Style="{StaticResource LabelStyle}"
HorizontalOptions="End"
FontSize="13"
LineBreakMode="NoWrap"
MinimumWidthRequest="50"
FontAttributes="Bold"/>
</StackLayout>

How to design the following grid view in Xamarin form in Xamarin iOS,Android

Needed same design of the form. My coding is this Xamarin form, Xamarin iOS, Android
<Frame Grid.Row="0" Grid.Column="0">
<Image
HeightRequest="50"
Source="Dash01.png"
WidthRequest="50" />
<Label Text="Cow Milk"/>
</Frame>
<BoxView
HeightRequest="3"
HorizontalOptions="Fill"
VerticalOptions="Start"
Color="DimGray" Grid.Row="1" Grid.Column="0" />

Try this Code
<StackLayout
Padding="0,10"
BackgroundColor="#e8f5e4"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<CollectionView
x:Name="foodList"
Grid.Row="1"
Margin="12,0"
HorizontalOptions="FillAndExpand"
ItemSizingStrategy="MeasureAllItems"
SelectionMode="Single"
VerticalOptions="FillAndExpand">
<CollectionView.ItemsLayout>
<GridItemsLayout
HorizontalItemSpacing="5"
Orientation="Vertical"
Span="2"
VerticalItemSpacing="5" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame
Margin="5"
Padding="0"
BackgroundColor="Pink"
CornerRadius="10"
HorizontalOptions="FillAndExpand"
VerticalOptions="Fill">
<StackLayout
Margin="0,0,0,10"
Padding="10"
BackgroundColor="White"
HorizontalOptions="FillAndExpand"
VerticalOptions="Fill">
<Image
Aspect="AspectFit"
HeightRequest="50"
HorizontalOptions="Center"
Source="star.png" />
<Label
FontSize="18"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Text="{Binding}" />
</StackLayout>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>

issue with xaml alignment xamarin forms

I am working on Xamarin form cross app. I am using Navigation drawer where I need to show items/subitems . Single are showing properly but issue is with items and subitem.. in that case.. text is showing vertically.
This is screen shot of current code
Now you can see that text are appearing vertically and same for sub menu items..
I actually want to show like below
My xaml is as below
<MasterDetailPage.Master>
<ContentPage Title="Menu" BackgroundColor="{StaticResource WhiteColor}">
<ScrollView>
<StackLayout Orientation="Vertical">
<!--
This StackLayout you can use for other
data that you want to have in your menu drawer
-->
<StackLayout BackgroundColor="{StaticResource BlueColor}"
HeightRequest="75">
<Label Text="Menu"
FontSize="20"
VerticalOptions="CenterAndExpand"
TextColor="White"
HorizontalOptions="Center"/>
</StackLayout>
<StackLayout>
<!--DashBoard-->
<StackLayout VerticalOptions="CenterAndExpand"
Orientation="Horizontal"
Padding="20,10,0,0"
Spacing="20">
<Image Source="dashbaordmenuicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Dashboards"
FontSize="18"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#637188"/>
<StackLayout VerticalOptions="CenterAndExpand"
Orientation="Horizontal"
Padding="30,5,0,10"
Spacing="20">
<Image Source="summarymenuicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Summary"
FontSize="15"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#98a4b4"/>
</StackLayout>
<StackLayout VerticalOptions="CenterAndExpand"
Orientation="Horizontal"
Padding="30,5,0,10"
Spacing="20">
<Image Source="spendinghistoryicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="pending History"
FontSize="18"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#98a4b4"/>
</StackLayout>
</StackLayout>
</StackLayout>
<!--Dreams-->
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,0"
Spacing="20">
<Image Source="dreamsicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Dreams"
FontSize="18"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#637188"/>
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="30,5,0,10"
Spacing="20">
<Image Source="adddreamicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Add Dream"
FontSize="15"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#98a4b4"/>
</StackLayout>
</StackLayout>
<!--Financial Management-->
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,0"
Spacing="20">
<Image Source="financialmanagementicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Financial Management"
FontSize="18"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#637188"/>
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="30,5,0,10"
Spacing="20">
<Image Source="addicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Add Income"
FontSize="15"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#98a4b4"/>
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="30,5,0,10"
Spacing="20">
<Image Source="addicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Add Expense"
FontSize="15"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#98a4b4"/>
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="30,5,0,10"
Spacing="20">
<Image Source="addicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Add Virtual Account"
FontSize="15"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#98a4b4"/>
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="30,5,0,10"
Spacing="20">
<Image Source="linkaccounticon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Link Account"
FontSize="15"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#98a4b4"/>
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="30,5,0,10"
Spacing="20">
<Image Source="budgeticon.png"
WidthRequest="29"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Budget"
FontSize="15"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#98a4b4"/>
</StackLayout>
</StackLayout>
<!--Settings-->
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,0"
Spacing="20">
<Image Source="settingsicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Settings"
FontSize="18"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#637188"/>
</StackLayout>
<!--Subcription-->
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,0"
Spacing="20">
<Image Source="subscriptionicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Subcription"
FontSize="18"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#637188"/>
</StackLayout>
<!--Feedback-->
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,0"
Spacing="20">
<Image Source="feedbackicon.png"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center" />
<Label Text="Feedback"
FontSize="18"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#637188"/>
</StackLayout>
</StackLayout>
</ScrollView>
</ContentPage>
</MasterDetailPage.Master>

You need to add parent stack layout like :
<StackLayout>
<StackLayout VerticalOptions="CenterAndExpand"
Orientation="Horizontal"
Padding="20,10,0,0"
Spacing="20">
<Image Source="dashbaordmenuicon.png"
WidthRequest="40"
HeightRequest="40"
VerticalOptions="Center" />
<Label Text="Dashboards"
FontSize="18"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#637188"/>
</StackLayout>
<StackLayout VerticalOptions="CenterAndExpand"
Orientation="Horizontal"
Padding="30,5,0,10"
Spacing="20">
<Image Source="summarymenuicon.png"
WidthRequest="40"
HeightRequest="40"
VerticalOptions="Center" />
<Label Text="Summary"
FontSize="15"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#98a4b4"/>
</StackLayout>
<StackLayout VerticalOptions="CenterAndExpand"
Orientation="Horizontal"
Padding="30,5,0,10"
Spacing="20">
<Image Source="spendinghistoryicon.png"
WidthRequest="40"
HeightRequest="40"
VerticalOptions="Center" />
<Label Text="pending History"
FontSize="18"
VerticalOptions="Center"
FontFamily="ProximaNova"
TextColor="#98a4b4"/>
</StackLayout>
</StackLayout>

Height on Listview with imagecell inside a stacklayout

I am with a problem. I have a imagecell inside of a Listview, inside of a Frame and i put all inside a stacklayout.
My problem is that the height of the frame with the imagecell are too expensive. Now, i just have 2 items inside but the height is like the size of the page.
The XAML code:
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<ScrollView>
<StackLayout Padding="10,20,10,10">
<Frame x:Name="frameOpcoes" OutlineColor="Gray" HasShadow="True" VerticalOptions="Fill" HorizontalOptions="FillAndExpand" BackgroundColor="White">
<StackLayout Padding="0,10,0,0" Orientation="Vertical">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical" HorizontalOptions="Start">
<Label x:Name="lblOpcoes" Text="Placa: " TextColor="Gray" FontAttributes="Bold"/>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<Entry x:Name="entryPlacaLetra" TextChanged="entryLetra_TextoAlterado" Keyboard="Text" TextColor="Black" BackgroundColor="#D3D3D3" />
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="Fill">
<Label x:Name="lblTraco" Text="-" TextColor="Gray" FontAttributes="Bold"/>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<Entry x:Name="entryPlacaNum" TextChanged="entryNum_textoAlterado" Keyboard="Numeric" TextColor="Black" BackgroundColor="#D3D3D3"/>
</StackLayout>
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand">
<ListView x:Name="listView" HorizontalOptions="FillAndExpand" VerticalOptions="Start" HasUnevenRows="True" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate >
<ImageCell Text="{Binding Title}" Detail="{Binding Detail}" DetailColor="Gray" TextColor="Black" ImageSource="{Binding IconSource}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</StackLayout>
</Frame>
<StackLayout Padding="0,30,0,0" x:Name="stckCalculo" VerticalOptions="EndAndExpand">
<Button x:Name="btnCalcular" BorderColor="Silver" BackgroundColor="Red" TextColor="White" Text="Prosseguir" />
</StackLayout>
</StackLayout>
</ScrollView>
</StackLayout>
<StackLayout IsVisible="{Binding IsBusy}" Padding="12"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
<Frame Padding="50" OutlineColor="Black" HasShadow="true" AbsoluteLayout.LayoutFlags="PositionProportional" Opacity="0.8" BackgroundColor="Black" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<ActivityIndicator IsRunning="{Binding IsBusy}" Color ="White"/>
<Label Text="Aguarde..." HorizontalOptions="Center" TextColor="White"/>
</Frame>
</StackLayout>
</AbsoluteLayout>

You can create a custom cell like this
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Image Source="{Binding image}" />
<Label Text="{Binding title}"
TextColor="#f35e20" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

We Keep Coding

sql objective-c vba vb.net react-native apache vue.js tensorflow api pandas

Build a frame with pointer - xaml

I want to to build a frame like the below one with a pointer, in this case the triangle on the right: How can this be done?

Related

StackLayout Tableview cuts off half screen, but only on release mode

How would it be a good way to keep the title of the notification and the date separate? In both orientations of the device

How to design the following grid view in Xamarin form in Xamarin iOS,Android

issue with xaml alignment xamarin forms

Height on Listview with imagecell inside a stacklayout

Categories

Resources