Dynamically create list of FlyoutItem in Shell? - c#

Currently I use MasterDetailPage but I want to change my project model to Shell.
How can I generate FlyoutItems dynamically like my old version of MasterDetail?
<StackLayout>
<ListView x:Name="MenuItemsListView"
SeparatorVisibility="None"
HasUnevenRows="true"
ItemsSource="{Binding MenuItems}">
<ListView.Header>
<Grid BackgroundColor="#8f0000">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="80"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Label
Grid.Column="1"
Grid.Row="2"
Text="{Binding Title}"
Style="{DynamicResource SubtitleStyle}"
TextColor="#d7d9b4"
FontSize="24"/>
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="15,10" HorizontalOptions="FillAndExpand">
<Label VerticalOptions="FillAndExpand"
VerticalTextAlignment="Center"
Text="{Binding MenuTitle}"
d:Text="{Binding .}"
FontSize="20"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
Do you have example with dynamic FlyoutItems?


You can use FlyoutContentTemplate, by using it you are telling Shell to overwrite/replace whatever the Flyout content that was auto-generate based on your AppShell.xaml hierarchy by what you provide instead.
I guess by MenuItems you meant a list of flyout items.
<Shell Title="Shell Title" ...>
<Shell.FlyoutContentTemplate>
<DataTemplate>
<StackLayout>
<ListView x:Name="MenuItemsListView"
SeparatorVisibility="None"
HasUnevenRows="true"
ItemsSource="{Binding FlyoutItems}">
<ListView.Header>
<Grid BackgroundColor="#8f0000">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="80"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Label Grid.Row="2" Grid.Column="1"
TextColor="#d7d9b4"
Text="{Binding Title}"
FontSize="24"/>
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="15,10"
HorizontalOptions="FillAndExpand">
<Label VerticalOptions="FillAndExpand"
VerticalTextAlignment="Center"
Text="{Binding MenuTitle}"
TextColor="Black"
FontSize="20"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</DataTemplate>
</Shell.FlyoutContentTemplate>
Sample code
public ObservableCollection<dynamic> FlyoutItems { get; set; }
public AppShell()
{
FlyoutItems = new ObservableCollection<dynamic>()
{
new { MenuTitle="MenuTitle1" },
new { MenuTitle="MenuTitle2" },
new { MenuTitle="MenuTitle3" },
new { MenuTitle="MenuTitle4" }
};
InitializeComponent();
BindingContext = this;
}
It is only a sample to show the idea, not sure about your data design, but maybe it is better to use FlyoutContentTemplate with an ObservableCollection of your Items and MenuItemTemplate to a separate list of Menus item.

Related

Xamarin - Frame Shadow not showing properly

I have a Xamarin Forms project and I'm trying to show frame shadow just like this
But instead it shows like this, the shadow is only appearing on the corners
I can't get it to show everywhere like the first picture
Here is my code:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewmodels="clr-namespace:AppCrijoya.ViewModels"
xmlns:model="clr-namespace:AppCrijoya.Models"
x:Class="AppCrijoya.Views.InvoicePage"
x:DataType="viewmodels:InvoiceViewModel"
Title="Facturas">
<!--<ContentPage.BindingContext>
<viewmodels:InvoiceViewModel />
</ContentPage.BindingContext>-->
<ContentPage.Content>
<StackLayout BackgroundColor="White">
<CollectionView x:Name="ListViewCart"
ItemsSource="{Binding ListCart}"
SelectionMode = "Single"
SelectedItem="{Binding CartSelected}"
SelectionChangedCommand="{Binding ShowAlertCommand}"
SelectionChangedCommandParameter="{Binding CartSelected, Source={RelativeSource Self}}"
>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:Invoice">
<Frame Margin="2" CornerRadius="30" HasShadow="True">
<Grid Margin="0" HorizontalOptions="FillAndExpand" VerticalOptions="Center" HeightRequest="160" RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="Nombre del Cliente:" VerticalOptions="Start"/>
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Name}" VerticalOptions="Start"/>
<Image Source="arrow_dropdown.png" HeightRequest="20" WidthRequest="20" Grid.Row="0" Grid.Column="3" VerticalOptions="End"/>
<Label Grid.Row="1" Grid.Column="0" Text="Fecha Compra:" VerticalOptions="Start"/>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Date}" VerticalOptions="Start"/>
<Label Grid.Row="2" Grid.Column="0" Text="Monto Total:" VerticalOptions="Start"/>
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Total, Mode=TwoWay, StringFormat='{0:N2}€'}" VerticalOptions="Start"/>
<Label Grid.Row="3" Grid.ColumnSpan="3" Text="Detalle Compra" VerticalOptions="Start"/>
<BoxView Grid.Row="4" Grid.ColumnSpan="3" Color="Gray" HeightRequest="2" HorizontalOptions="Fill" />
<Label Grid.Row="5" Grid.Column="0" Text="Nombre" VerticalOptions="Start" TextColor="#9C2424"/>
<Label Grid.Row="5" Grid.Column="1" Text="Monto" VerticalOptions="Start" TextColor="#9C2424"/>
<Label Grid.Row="5" Grid.Column="2" Text="Cantidad" VerticalOptions="Start" TextColor="#9C2424"/>
<StackLayout Grid.Row="6" Grid.ColumnSpan="3" Margin="0" Padding="0">
<CollectionView x:Name="ListViewOrders"
ItemsSource="{Binding ListOrders}"
SelectionMode = "None"
>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:CrOrder">
<Grid RowSpacing="0" ColumnSpacing="0" Margin="0" MinimumHeightRequest="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding Reference}" TextColor="Black" VerticalOptions="Center" FontSize="12" />
<Label Grid.Row="0" Grid.Column="1" Text="{Binding Price, StringFormat='{0:N2}€'}" TextColor="Black" VerticalOptions="End" FontSize="12" />
<Label Grid.Row="0" Grid.Column="2" Text="{Binding Quantity}" TextColor="Black" VerticalOptions="End" FontSize="12"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</Grid>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
What can I do to show the shadow all around the frame? Please help and thanks.
EDIT
This is what I have with Margin=2 on Frame
Margin=50
Padding=50
Just to show how it behaves

At first, you can create a new frame in your project to check if the cause is the renderer or not. Such as:
<Frame Margin="20" CornerRadius="10" HasShadow="True">
<Label Text="TestShaw" HorizontalOptions="Center"/>
</Frame>
If the shadow shows correctly, the cause maybe the layout or the margin of your frame. So you can change the values of it.
If the shadow shows incorrectly too, you may need to use a custom renderer for the frame. Such as:
[assembly: ExportRenderer(typeof(Myframe), typeof(MyFrameRenderer))]
namespace App36.Droid
{
public class MyFrameRenderer : Xamarin.Forms.Platform.Android.FastRenderers.FrameRenderer
{
public MyFrameRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
{
base.OnElementChanged(e);
CardElevation = 50;
SetOutlineSpotShadowColor(Xamarin.Forms.Color.Black.ToAndroid());
SetOutlineAmbientShadowColor(Xamarin.Forms.Color.Black.ToAndroid());
}
}
}
But in my project, both of them shows correctly. So if you need more information, you can check the link following.
Link: Xamarin forms Shadow on Frame in Android
And here is the frame in my project:
If the platform is ios for your project, please check this case:Forms frame isn't the same on iOS

Xamarin Forms Center items in listview vertically

I have ListView here and I can't get the items to center vertically:
<ListView x:Name="TasksList" ItemSelected="TasksList_ItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding name}" Padding="20, 0, 0, 0"></Label>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding status}" HorizontalTextAlignment="End" Padding="0,0,20,0" TextColor="{Binding statusColor}"></Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have tried adding a StackLayout around my labels and played with VericalOptions and VerticalTextOptions, but nothing seems to work

Just add the following code for your Grid in your ListView:
VerticalOptions="Center"
Please refer to the following code:
<ListView x:Name="lstView" RowHeight="60">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding name}" Padding="20, 0, 0, 0"></Label>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding status}" HorizontalTextAlignment="End" Padding="0,0,20,0" ></Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I created a demo according to your code, the result is:

My view slides up completely when my cellphone keyboard opens

I have my view that when I open the keyboard of my cell phone it totally moves with everything and my top bar, what I need from my app that contains a chat is that the top bar is fixed and that only when the keyboard is opened do the messages move.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:common="clr-namespace:HomieApp.Views.Common;assembly=HomieApp"
xmlns:app="clr-namespace:HomieApp;assembly=HomieApp"
xmlns:helpers="clr-namespace:HomieApp.Helpers;assembly=HomieApp"
xmlns:forms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"
x:Class="HomieApp.Views.Servicio.ChatPage">
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="leftChatTemplate">
<ViewCell>
<common:ChatLeftMessageItemTemplate />
</ViewCell>
</DataTemplate>
<DataTemplate x:Key="rightChatTemplate">
<ViewCell>
<common:ChatRightMessageItemTemplate />
</ViewCell>
</DataTemplate>
<helpers:ChatDataTemplateSelector x:Key="chatDataTemplateSelector"
LeftChatTemplate="{StaticResource leftChatTemplate}"
RightChatTemplate="{StaticResource rightChatTemplate}" />
</ResourceDictionary>
</ContentPage.Resources>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<common:MainLabelNavigation
Grid.Row="0"
HorizontalOptions="FillAndExpand"
x:Name="bar"
IsVisibleMenu="True"
Clicked="Bar_OnClicked"></common:MainLabelNavigation>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListView
x:Name="ListViewMensajes"
Grid.Row="1"
ItemsSource="{Binding Mensajes}"
SeparatorVisibility="None"
SeparatorColor="Transparent"
HasUnevenRows="True"
ItemTapped="OnItemTapped"
ItemTemplate="{StaticResource chatDataTemplateSelector}">
</ListView>
<!--- BUTTONS CONTAINER -->
<Grid
x:Name="ContainerSend"
Grid.Row="2"
ColumnSpacing="5"
Padding="0"
MinimumHeightRequest="40">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="55"/>
</Grid.RowDefinitions>
<app:GradientButton Grid.Row="0" Grid.Column="0"
Margin="0,0,0,0"
VerticalOptions="End"
HorizontalOptions="FillAndExpand"
Command="{Binding EnviarVideoCommand}"
ButtonType="Gray"
Text="Tomar Video"/>
<app:GradientButton Grid.Row="0" Grid.Column="1"
Margin="0,0,0,0"
VerticalOptions="End"
HorizontalOptions="FillAndExpand"
Command="{Binding EnviarImagenCommand}"
ButtonType="Gray"
Text="Tomar Foto"/>
<StackLayout Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
Margin="0,0,0,15"
BackgroundColor="{ DynamicResource TranslucidOrange }"
Orientation="Horizontal">
<!--- ENTRY -->
<Entry
HorizontalOptions="FillAndExpand"
FontSize="14"
Placeholder="Escribe tu mensaje..."
Text="{Binding Path=Mensaje, Mode=TwoWay}"/>
<!--- SEND BUTTON -->
<app:FontAwesomeIcon
x:Name="SendButton"
HorizontalOptions="End"
Margin="10,0"
Text="{ x:Static app:Icon.FAPlay }"
FontSize="20"
TextColor="{StaticResource BorderTextColor}"
Style="{ StaticResource FontIcon }"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"/>
</StackLayout>
</Grid>
<app:CustomActivityIndicator
IsVisible="{Binding IsLoading}"
Grid.Row="0" Grid.RowSpan="3"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"/>
</Grid>
</Grid>
</ContentPage>
I already try changing the views in various ways, but since I am new to the development of applications in Xamarin I still do not understand or understand the view they handle very well.

MasterDetailPage background image not displaying in IOS in xamarin.forms

I am using MasterDetailPage in Xamarin.Forms. I have set BackgroundImage property in OnAppearing() method. It works fine in android. But, In IOS image doesn't display.
My Code : XAML
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="EzySales.Views.MainPageMaster"
Title="Master" >
<StackLayout VerticalOptions="FillAndExpand">
<ListView x:Name="MenuItemsListView" WidthRequest="200"
HasUnevenRows="true"
ItemsSource="{Binding MenuItems}"
SeparatorColor="White">
<ListView.Header>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="80"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Image Source="logo.png" Grid.Row="1" Grid.Column="1"></Image>
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Grid.Row="2">
<StackLayout Padding="15,10" Orientation="Horizontal">
<Image Source="{Binding Icon}"
WidthRequest="30"
HeightRequest="30" Margin="0,0,5,0"
VerticalOptions="Center" />
<Label VerticalOptions="FillAndExpand"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
Text="{Binding Title}"
TextColor="White"
FontSize="16" FontAttributes="Bold" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
MainPageMaster.xaml.cs
protected override void OnAppearing()
{
this.BackgroundImage = "masterpagebg.png";
}
Image is available in Resource Folder.

I have also face same issue and solved.
Try this Hope it will Help..
You could use a Relative layout to achieve the results
<RelativeLayout>
<Image Source="masterpagebg.png" Opacity="1"
RelativeLayout.WidthConstraint=
"{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint=
"{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
<ListView RelativeLayout.WidthConstraint=
"{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint=
"{ConstraintExpression Type=RelativeToParent, Property=Height}" x:Name="MenuItemsListView" WidthRequest="200"
HasUnevenRows="true"
ItemsSource="{Binding MenuItems}"
SeparatorColor="White">
<ListView.Header>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="80"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Image Source="logo.png" Grid.Row="1" Grid.Column="1"></Image>
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Grid.Row="2">
<StackLayout Padding="15,10" Orientation="Horizontal">
<Image Source="{Binding Icon}"
WidthRequest="30"
HeightRequest="30" Margin="0,0,5,0"
VerticalOptions="Center" />
<Label VerticalOptions="FillAndExpand"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
Text="{Binding Title}"
TextColor="White"
FontSize="16" FontAttributes="Bold" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RelativeLayout>

You should check if the image is set to the iOS project as BundleResource, if not you should set it as so. I myself had some troubles with this.

How to round corners on a Imagecell in xamarin?

I'm trying to get rounded corners on my ImageCell in xamarin. How can I accomplish this?
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<SearchBar Grid.Row="0" x:Name="searchBar" Placeholder="Search" SearchCommand="{Binding SearchCommand}" Text="{Binding SearchText}"></SearchBar>
<ListView Grid.Row="3" x:Name="listView" ItemsSource="{Binding LearningItems}" HasUnevenRows="True" IsVisible="{Binding LearningItemListIsVisible}" BackgroundColor="Silver" Footer="{Binding .}">
<ListView.ItemTemplate>
<DataTemplate>
<ImageCell Text="{Binding LearningItem.Name}" TextColor="Black" ImageSource="{Binding LearningItem.ImageUrl}" Command="{Binding LearningItemPressedCommand}"></ImageCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.FooterTemplate>
<DataTemplate>
<StackLayout BackgroundColor="White">
<Label Text="{Binding CopyrightText}" FontSize="8"></Label>
<Image x:Name="creativeCommons" HorizontalOptions="Center" Source="(iOS: ImageSource.FromFile('creative_commons_88x31.png'), Android: ImageSource.FromFile('creative_commons_88x31.png'), WinPhone: ImageSource.FromFile('Images/creative_commons_88x31.png'))" />
<Label Text="{Binding CopyrightFinePrint}" FontSize="9"></Label>
<Image HorizontalOptions="CenterAndExpand" Source="(iOS: ImageSource.FromFile('cowBurst.png'), Android: ImageSource.FromFile('cowBurst.png'), WinPhone: ImageSource.FromFile('Images/cowBurst.png'))" />
</StackLayout>
</DataTemplate>
</ListView.FooterTemplate>
</ListView>

Categories