Is there anyway to set one menu item at the bottom of shell like the image?
so you will have all normal menus:
and then at the bottom of it a:
<MenuItem Text="Logout" IconImageSource="logout"
Command="{Binding SignOutCommand}">
</MenuItem>
You could try to define the MenuItemTemplate as a workaround to achieve this:
<MenuItem Text="Logout" IconImageSource="logout"
Command="{Binding SignOutCommand}">
<Shell.MenuItemTemplate>
<DataTemplate>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding Icon}"
Margin="0,300,0,0" //You need to adjust the margin value yourself
HeightRequest="30" />
<Label Grid.Column="1"
Margin="0,300,0,0" //You need to adjust the margin value yourself
Text="{Binding Text}"
FontAttributes="Italic"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
</Shell.MenuItemTemplate>
</MenuItem>
Related
I have the following Xamarin forms grid.
<ListView x:Name="liewViewData" ItemsSource="{Binding InfoList}" ItemAppearing="OnItemApprearing" ItemSelected="OnItemSelected" RowHeight="{Binding ListViewRowHeight}">
<ListView.Header>
<StackLayout Padding="10,5,0,5" BackgroundColor="#cccccc">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="" VerticalTextAlignment="Center" HorizontalTextAlignment="Start" FontSize="Small" />
<Label Grid.Column="1" Text="Demo" VerticalTextAlignment="Center" FontSize="Small" />
</Grid>
</StackLayout>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<Image Source="danger.png" Grid.Column="0" BackgroundColor="Transparent" HorizontalOptions="Center" VerticalOptions="Center"></Image>
<Label Grid.Column="1" Text="{Binding Name}" VerticalTextAlignment="Center" FontSize="Small" />
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
What I need is that on the ItemAppearing event for each grid row added I call an API and update the row data such as the image etc.
Any clue on how to do this?
You need to data bind the image, implement OnPropertyChanged for that field and assign value to it in the event that you mention. Not sure which part you were missing, but as simple as that.
I create a pop-up menu via pancakeview and then the expander.
The procedure I see that works, but the menu, due to the borders of the grid, is not displayed at all.
Solutions?`
<pv:PancakeView HorizontalOptions="Center" VerticalOptions="Center" Grid.Row="1" Grid.Column="7">
<pv:PancakeView.BackgroundGradientStops>
<pv:GradientStopCollection>
</pv:GradientStopCollection>
</pv:PancakeView.BackgroundGradientStops>
<behaviors:Expander HorizontalOptions="Start" VerticalOptions="End" Rotation="180" BackgroundColor="White">
<behaviors:Expander.Header>
<Image Source="altro.png" x:Name="imgAltro" HeightRequest="30" VerticalOptions="Center" HorizontalOptions="Center">
<Image.Triggers>
<DataTrigger TargetType="Image" Binding="{Binding Source={RelativeSource AncestorType={x:Type behaviors:Expander}}, Path=IsExpanded}"
Value="True">
<Setter Property="Source" Value="altroArancione.png" />
</DataTrigger>
</Image.Triggers>
</Image>
</behaviors:Expander.Header>
<StackLayout>
<ImageButton Source="dashboard.png" WidthRequest="30" HeightRequest="30" Rotation="180" BackgroundColor="Transparent" />
<ImageButton Source="anagrafica.png" WidthRequest="30" HeightRequest="30" Rotation="180" BackgroundColor="Transparent" />
</StackLayout>
</behaviors:Expander>
</pv:PancakeView>
this is the table setting:
<Grid Margin="0" RowSpacing="0" ColumnSpacing="0" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="1" />
<RowDefinition Height="40" />
<RowDefinition Height="20" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1" />
<ColumnDefinition />
<ColumnDefinition Width="1" />
<ColumnDefinition />
<ColumnDefinition Width="1" />
<ColumnDefinition />
<ColumnDefinition Width="1" />
<ColumnDefinition />
<ColumnDefinition Width="1" />
</Grid.ColumnDefinitions>
To position two items, but let one overlay the other, put them both inside another grid:
Approach #1: A "single cell" outer grid.
<Grid>
<Grid ...your-grid-options... >
<Label Text="Your grid contents" FontSize="40"/>
</Grid>
<Label VerticalOptions="End" Text="This is the menu at bottom" FontAttributes="Bold"/>
</Grid>
VerticalOptions="End" forces the menu to the bottom. In other situations, Margin or Padding values might be helpful.
(When layouts are nested, "outer" (aka "topmost"; "outside") means the first one in the XAML, "inner" is the nested (inside; indented) one.)
Approach #2: A two-row outer grid. Overkill for this use, but showing how RowSpan can help in more complex overlay cases:
<Grid RowDefinitions="*,40" RowSpacing="0">
<!-- Use RowSpan 2 if inner grid should extend under menu area. -->
<Grid Grid.Row="0" Grid.RowSpan="2" ...your-grid-options... >
<Label Text="Your grid contents" FontSize="40"/>
</Grid>
<Label Grid.Row="1" VerticalOptions="End" Text="This is the menu at bottom" FontAttributes="Bold"/>
</Grid>
Force menu to bottom by putting it in second row of outer grid and/or using VerticalOptions="End". Here, I've done BOTH techniques.
Row 0's height is "*"; it is given all space not used by Row 1.
I show Row 1's height as "40"; change value as needed. Depending on what you put in that row, "Auto" might also work.
If want to leave a gap at bottom of grid, where menu will appear, remove Grid.RowSpan="2".
I am working with a collectionview using GridItemsLayout orientation=“Vertical” Span=“2”.
When I click on a button that expands the lower part of my grid item. Currently only by using ItemSizingStrategy.MeasureAllItems I am able to get the lower part to expand. I was wondering if there is a way of controlling the item positioning on the image so the images always align and only the lower half expands evenly.
I am aware each item has its own layout, but this looks messy. I’ve read the documentation mention this type of sizing.
<ContentPage.Content>
<StackLayout>
<CollectionView x:Name="CollectionList"
VerticalOptions="FillAndExpand"
ItemsSource="{Binding Shares}"
IsGrouped="True"
ItemSizingStrategy="MeasureAllItems">
<!--HEADER-->
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal"
Padding="5"
BackgroundColor="#f7f7fb">
<Label x:Name="labelname"
Text="{Binding GroupKey}"
/>
<Button Text=" More"
FontSize="16"
Clicked="OpenButton_Clicked"/>
</StackLayout>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
<!--TEMPLATING-->
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="2" />
</CollectionView.ItemsLayout>
<!--BODY-->
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="viewmodels:ShareViewModel">
<Grid Padding="5" Margin="1,0,1,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ImageButton x:Name="image"
Source="{Binding ImageLink}"
WidthRequest="150"
Clicked="FullImageView"
Grid.ColumnSpan="2"
Aspect="AspectFill"
Grid.Row="0"
Grid.Column="0"/>
<Label FontSize="16"
Text="{Binding Name}"
Grid.Row="1"
Grid.Column="0"/>
<Label x:Name="label_more"
Text="More"
Grid.Row="1"
Grid.Column="1"
HorizontalTextAlignment="End"/>
<Label
Text="{Binding CreateDate}"
Grid.Row="2"
Grid.Column="0"/>
<ImageButton IsVisible="{Binding TVNImageSet}"
Command="{Binding BindingContext.ToggleTVNCommand, Source={x:Reference Name=sharepage}}"
CommandParameter="{Binding .}"
Source="addresscard.png"
Grid.Row="2"
Grid.Column="1">
</ImageButton>
<!--Lower Section if the card is tapped (EXPAND)-->
<StackLayout
IsVisible="{Binding TVNVisible}"
Grid.Row="3"
Grid.ColumnSpan="2">
<StackLayout Orientation="Horizontal"
IsVisible="{Binding PhoneVisible}"
ClassId="{Binding Phone}">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"
NumberOfTapsRequired="1"
/>
</StackLayout.GestureRecognizers>
<Image Source="call.png"
WidthRequest="15"/>
<Label
FontSize="12"
Text="{Binding Phone}" />
</StackLayout>
<Label
FontSize="12"
Text="{Binding Address}"
IsVisible="{Binding AddressVisible}">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1" NumberOfTapsRequired="1"/>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
All BindingContext.ToggleTVNCommand does is set TVNVisible to true which shows the lower half the "expanding potion". I don't need to use collection view if there is an easier way fo displaying this data, but CollectionVView seemed like the best choice for the layout and item source I wanted.
After digging around GitHub forums on bugs and updates for Xamarin, someone mentioned to just work with SyncFusion's sfListview the membership is not that bad and my company is willing to pay for it if it makes working with Xamarin easier.
That wasn't the solution I was hoping for, but it works and their customer support is great.
below is the reference
https://help.syncfusion.com/xamarin/listview/working-with-sflistview
Has anyone implanted something like the following, that could be of relevance to me? How can I put a frame that encompasses both the group and the items in the photo:
click to enlarge
I have a dirty but simple way:
When I make same forms I use ListView without grouping and ViewCell with RepeaterView. You need remember that it is not the best perfomance way.
If you want to design the UI like the screenshot your provided, using frame to crop image, you can take a look:
<CollectionView IsGrouped="true" ItemsSource="{Binding Animals}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Frame Padding="0"
Grid.RowSpan="2"
BorderColor="Black"
CornerRadius="50"
HeightRequest="40"
HorizontalOptions="Center"
IsClippedToBounds="True"
WidthRequest="40">
<Image
Aspect="AspectFill"
HeightRequest="100"
Source="{Binding ImageUrl}"
WidthRequest="100" />
</Frame>
<Label
Grid.Column="1"
FontAttributes="Bold"
Text="{Binding Name}" />
<Label
Grid.Row="1"
Grid.Column="1"
FontAttributes="Italic"
Text="{Binding Location}"
VerticalOptions="End" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<Label
BackgroundColor="LightGray"
FontAttributes="Bold"
FontSize="Large"
Text="{Binding Name}" />
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
</CollectionView>
About viewmodel class, you can take a look Xamarin.Forms CollectionView Grouping
I have tried to make all the items in the itemtemplate into a single view as like in the below image, how to achieve this by using Xamarin CarouselView, i am using like this
carousel = new CarouselView();
carousel.BindingContext = this;
carousel.ItemTemplate = itemTemplate;
carousel.SetBinding(CarouselView.ItemsSourceProperty, new Binding(nameof(this.Items), mode: BindingMode.OneWay));
LinearItemsLayout linearItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal);
linearItemsLayout.SnapPointsAlignment = SnapPointsAlignment.Start;
linearItemsLayout.SnapPointsType = SnapPointsType.Mandatory;
carousel.ItemsLayout = linearItemsLayout;
this.Children.Add(carousel,0,1);
Expected UI
The easiest way of doing something like that would be to use the Horizontal CollectionView
CollectionView can display its items in a horizontal list by setting its ItemsLayout property to HorizontalList:
When you check the documents it gives a similar example
<CollectionView ItemsSource="{Binding Monkeys}"
ItemsLayout="HorizontalList">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="140" />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label Grid.Column="1"
Text="{Binding Name}"
FontAttributes="Bold"
LineBreakMode="TailTruncation" />
<Label Grid.Row="1"
Grid.Column="1"
Text="{Binding Location}"
LineBreakMode="TailTruncation"
FontAttributes="Italic"
VerticalOptions="End" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
Alternatively, this layout can also be accomplished by setting the ItemsLayout property to a LinearItemsLayout object, specifying the Horizontal ItemsLayoutOrientation enumeration member as the Orientation property value:
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" />
</CollectionView.ItemsLayout>
...
</CollectionView>
This results in a single row list, which grows horizontally as new items are added: