Currently, I've got a ListView implementation that looks something like this:
{Alert1}
{Alert2}
{Alert3}
{Alert4}
{Alert5}
{Alert6]
{Alert7}
xaml:
<ListView Grid.Row="4"
ItemsSource="{Binding Alerts}"
HasUnevenRows="True"
VerticalOptions="Start"
SeparatorVisibility="None" Margin="10,0"
x:Name="AlertsList">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame BackgroundColor="#333333" Margin="0,5" Padding="5">
<StackLayout Margin="0" Padding="0">
<Label
Text="{Binding Name, Mode=OneWay}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
Margin="0" />
<Label
Text="{Binding Value, Mode=OneWay}"
HorizontalOptions="Center"
FontSize="Medium"
Margin="0" />
</StackLayout>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Any suggestion on how to modify this so that the output is displayed in a 2 column grid instead with equal width columns such as?
{Alert1}{Alert2}
{Alert3}{Alert4}
{Alert5}{Alert6]
{Alert7}
I'm using Xamarin Forms v2.3.3
As Jason said,you could upgrade your XF version and use CollectionView with its ItemsLayout property.
<CollectionView ItemsSource="{Binding Alerts}"
ItemsLayout="VerticalGrid, 2">
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame BackgroundColor="#333333" Margin="0,5" Padding="5">
<StackLayout Margin="0" Padding="0">
<Label
Text="{Binding Name, Mode=OneWay}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
Margin="0" />
<Label
Text="{Binding Value, Mode=OneWay}"
HorizontalOptions="Center"
FontSize="Medium"
Margin="0" />
</StackLayout>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
The more you could refer to the doc.
I am using a stack layout as its the easiest with responsive but I am trying to get to items side by side I am trying to mimic running apps with speed and distance.
My Main question is how would one get the speed and distance to look similar to the design I can't get the spacing right in a stack layout
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="WellbeingNinja.Views.BmiInfo">
<ContentPage.Content>
<StackLayout Orientation="Horizontal" Spacing="0" Padding="0" VerticalOptions="StartAndExpand">
<Frame x:Name="frameTotalSpeed" CornerRadius="7" >
<StackLayout>
<Label x:Name="lblSpeedText" Text="Distance"></Label>
<Label x:Name="lblSpeed" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
</StackLayout>
</Frame>
<Frame x:Name="frameTotalDistance" CornerRadius="7">
<StackLayout>
<Label x:Name="lbldistanceText" Text="Distance"></Label>
<Label x:Name="lblDistance" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
</StackLayout>
</Frame>
I am trying to mimic this style here
use a Grid
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="50*" />
</Grid.ColumnDefinitions>
<Frame Grid.Column="0" x:Name="frameTotalSpeed" CornerRadius="7" >
<StackLayout>
<Label x:Name="lblSpeedText" Text="Distance"></Label>
<Label x:Name="lblSpeed" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
</StackLayout>
</Frame>
<Frame Grid.Column="1" x:Name="frameTotalSpeed" CornerRadius="7" >
<StackLayout>
<Label x:Name="lbldistanceText" Text="Distance"></Label>
<Label x:Name="lblDistance" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
</StackLayout>
</Frame>
</Grid>
In my Xamarin Forms app, I have a CarouselView to swipe through messages. Some messages have attachments. I would like to hide the StackLayout attachmentsLayout when the Attachments list has no items.
I tried to play with DataTriggers but it did not work.
<?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:local="clr-namespace:MyApp.Helpers" x:Class="MyApp.MailboxConversationPage" Title="Messages">
<ContentPage.Content>
<AbsoluteLayout x:Name="absLayout" VerticalOptions="FillAndExpand">
<StackLayout HorizontalOptions="Fill" HeightRequest="{Binding Path=Height, Source={x:Reference absLayout}}" WidthRequest="{Binding Path=Width, Source={x:Reference absLayout}}">
<StackLayout VerticalOptions="Start" Padding="10,10,10,5">
<Label x:Name="Subject" Text="Subject" FontSize="Large" FontAttributes="Bold" />
</StackLayout>
<StackLayout x:Name="carouselViewLayout" VerticalOptions="FillAndExpand">
<ContentView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" HeightRequest="{Binding Path=Height, Source={x:Reference carouselViewLayout}}" WidthRequest="{Binding Path=Width, Source={x:Reference carouselViewLayout}}">
<CarouselView x:Name="CarouselMessages" PositionChanged="OnPositionChanged">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout HorizontalOptions="Fill" BackgroundColor="#f5f5f5">
<StackLayout VerticalOptions="Start" Padding="10,10,10,5">
<Label Text="{Binding Sender}" FontAttributes="Bold" />
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand" Padding="10,10,10,10" BackgroundColor="White">
<ScrollView>
<Label Text="{Binding Body}" />
</ScrollView>
</StackLayout>
<StackLayout x:Name="attachmentsLayout" BindableLayout.ItemsSource="{Binding Attachments}" VerticalOptions="End" Padding="10,10,10,10" BackgroundColor="White">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label>
<Label.FormattedText>
<FormattedString>
<local:HyperlinkSpan Text="{Binding Filename}" Url="{Binding Url}" />
</FormattedString>
</Label.FormattedText>
</Label>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
<StackLayout VerticalOptions="End" Padding="10,5,10,10">
<Label Text="{Binding Created_At}" BackgroundColor="#f5f5f5" />
</StackLayout>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</ContentView>
</StackLayout>
<StackLayout x:Name="editorLayout" VerticalOptions="FillAndExpand" IsVisible="false" Padding="10,0,10,0">
<Frame x:Name="replyFrame" HeightRequest="{Binding Path=Height, Source={x:Reference editorLayout}}" HasShadow="false" OutlineColor="Gray" Padding="2,0,2,0">
<Editor x:Name="replyEditor">
<Editor.BackgroundColor>
<OnPlatform x:TypeArguments="Color"
iOS="White"
Android="Transparent"
WinPhone="#2c3e50" />
</Editor.BackgroundColor>
</Editor>
</Frame>
</StackLayout>
<StackLayout VerticalOptions="End" Padding="10,3,10,10">
<Button x:Name="replyButton" Text="Reply" Clicked="OnReplyActivated" BorderRadius="5" BackgroundColor="#337ab7" TextColor="White" FontAttributes="Bold" />
<Button x:Name="sendButton" Text="Send Message" Clicked="OnSendMessageActivated" BorderRadius="5" BackgroundColor="#337ab7" TextColor="White" FontAttributes="Bold" IsVisible="false"/>
</StackLayout>
</StackLayout>
<ContentView x:Name="overlay" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" IsVisible="True" BackgroundColor="#C0808080" Padding="10, 0">
<ActivityIndicator WidthRequest="110" HeightRequest="70" IsRunning="True" IsVisible="True" Color="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</ContentView>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
Why don't you simply add another property to your ViewModel that indicates whether there are any items in your Attachments collection. Then bind IsVisible of the layout to this property
View
<StackLayout x:Name="attachmentsLayout"
IsVisible="{Binding HasItems}"
BindableLayout.ItemsSource="{Binding Attachments}"
VerticalOptions="End" Padding="10,10,10,10" BackgroundColor="White">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label>
<Label.FormattedText>
<FormattedString>
<local:HyperlinkSpan Text="{Binding Filename}" Url="{Binding Url}" />
</FormattedString>
</Label.FormattedText>
</Label>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
ViewModel
public bool HasItems => Attachments.Any();
I have a view in Xaml and I am trying to use collection view as following
<CollectionView
x:Name="ColorCollectionView"
Margin="5"
HeightRequest="250"
WidthRequest="250"
ItemSizingStrategy="MeasureFirstItem"
ItemsSource="{Binding Categories}"
SelectedItem="{Binding SelectedCategory, Mode=OneWayToSource}"
SelectionChangedCommand="{Binding SelectedItemChangedCommand}"
SelectionChangedCommandParameter="{Binding Source={x:Reference ColorCollectionView}, Path=SelectedItem}"
SelectionMode="Single"
VerticalOptions="Center">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Horizontal" Span="2"
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="20,0" Spacing="0">
<Frame Padding="10"
BackgroundColor="White"
BorderColor="{Binding
BackgroundSelectedColor}"
CornerRadius="100"
HasShadow="False">
<Image HeightRequest="60" Source="{Binding Image}"WidthRequest="60"/>
</Frame>
<Label FontFamily="{x:Static constants:Fonts.Medium}" FontSize="12" HorizontalOptions="Center" Text="{Binding Name}" TextColor="Black" /
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
and it works fine in android but I got this exception in iOSd
Managed Stacktrace:
at <unknown> <0xffffffff>
at ObjCRuntime.Messaging:nint_objc_msgSend_nint <0x0011f>
at UIKit.UICollectionView:NumberOfItemsInSection <0x0017a>
at Xamarin.Forms.Platform.iOS.GridViewLayout:NeedsPartialColumnAdjustment <0x00282> at
Xamarin.Forms.Platform.iOS.GridViewLayout:get_CollectionViewContentSize
I have Xamarin Forms Cross Platform project with a ListView whose ViewCell contains a StackLayout. I hide and show the StackLayout when the user clicks on an image. There is a known issue with the ViewCell not resizing correctly on iOS and solution I found was to use ForceUpdateSize method on the ViewCell in order to for the app on iOS to resize the cell. This is working from the aspect of resizing the ViewCell - however after calling the method, I loose the three buttons at the bottom of ViewCell. The buttons are in a grid and all the code, xaml and screen shots are below. Any help with resolving this would be greatly appreciated.
Page XAML:
<ViewCell x:Name="vcDetails" >
<StackLayout Orientation="Vertical" HorizontalOptions="Fill" VerticalOptions="Start">
<BoxView x:Name="bvLine" VerticalOptions="Center" BackgroundColor="Black"
HorizontalOptions="FillAndExpand" HeightRequest="4" />
<StackLayout Orientation="Vertical" HorizontalOptions="Fill" VerticalOptions="Start">
<!-- Info Button and title-->
<StackLayout x:Name="slPlaceName" HorizontalOptions="Fill" VerticalOptions="Start" Orientation="Horizontal" Margin="0,0,0,0">
<Image x:Name="btnDropDown" HorizontalOptions="Start" VerticalOptions="Center" Source="circledropdown.png" Margin="0,4,4,0" IsVisible="{Binding ShowDropDown}"/>
<Image x:Name="btnDropUp" HorizontalOptions="Start" VerticalOptions="Center" Source="circledropup.png" Margin="0,4,4,0" IsVisible="{Binding ShowDropUp}"/>
<Label x:Name="lblPlaceName" TextColor="Gray" FontAttributes="Bold" Text="{Binding Title}" FontSize="Medium" Margin="0,0,0,0" VerticalOptions="Center"
HorizontalOptions="FillAndExpand" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="btnDetails_Clicked" CommandParameter="{Binding ID}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
<StackLayout x:Name="slDetails" Orientation="Vertical" HorizontalOptions="Fill" VerticalOptions="StartAndExpand" Margin="8,4,8,4"
IsVisible="{Binding ShowDetails}" BackgroundColor="LightGray">
<BoxView VerticalOptions="Start" HorizontalOptions="Fill" BackgroundColor="DarkCyan" HeightRequest="2" Margin="0,0,0,0" />
<Label x:Name="lblStreetAddress" VerticalOptions="Start" HorizontalOptions="Start" HorizontalTextAlignment="Start"
TextColor="Black" FontSize="Small" Text="{Binding AddressLine1}" />
<Label x:Name="lblCityStateZip" VerticalOptions="Start" HorizontalOptions="Start" HorizontalTextAlignment="Start" TextColor="Black" FontSize="Small"
Text="{Binding CityStateZip}" />
<Label x:Name="lblHours" VerticalOptions="Start" HorizontalOptions="Start" TextColor="Black" FontSize="Small" Text="{Binding Hours}" HorizontalTextAlignment="Center" />
<Grid x:Name="gvDetailButtons" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" Margin="8,4,8,4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<StackLayout x:Name="btnGoToInfoPage" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="8,0,4,0"
Grid.Column="0" Grid.Row="0" BackgroundColor="DarkGray" Padding="0,2,0,2">
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
<Image x:Name="btnInfo" HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Source="infosmall.png" Margin="0,0,4,0" />
<Label x:Name="lblbntInfo" Text="{ext:Translate MoreInfo}" TextColor="Black" FontAttributes="Bold"
HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" FontSize="Small"/>
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="btnGoToInfoPage" CommandParameter="{Binding ID}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
<StackLayout x:Name="slGoToEditPage" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="4,0,8,0"
Grid.Column="1" Grid.Row="0" BackgroundColor="DarkGray" Padding="0,2,0,2">
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
<Image x:Name="btnedit" Source="editsmall.png" Margin="8,0,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
<Label x:Name="lblbntEdit" Text="{ext:Translate Edit}" TextColor="Black" FontAttributes="Bold"
HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" FontSize="Small"/>
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="btnedit_Tapped" CommandParameter="{Binding ID}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
</Grid>
<BoxView VerticalOptions="Start" HorizontalOptions="Fill" BackgroundColor="DarkCyan" HeightRequest="2" Margin="0,0,0,0"
Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="1"/>
</StackLayout>
<StackLayout x:Name="slRatingandDistance" Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="StartAndExpand">
<Label x:Name="lblRatingHeader" Text="{ext:Translate RatingText}" TextColor="Black" FontSize="Small" FontAttributes="Bold"
Margin="4,0,0,0" HorizontalOptions="Start" VerticalOptions="Center"/>
<Label x:Name="lblRatingValue" Text="{Binding Rating}" TextColor="Black" FontSize="Small"
HorizontalOptions="Start" VerticalOptions="Center"/>
<Label x:Name="lblDistanceHeader" Text="{ext:Translate DistanceText}" TextColor="Black" FontSize="Small" FontAttributes="Bold"
Margin="4,0,0,0" HorizontalOptions="Start" VerticalOptions="Center"/>
<Label x:Name="lblDistanceValue" Text="{Binding Distance}" TextColor="Black" FontSize="Small"
HorizontalOptions="Start" VerticalOptions="Center" />
</StackLayout>
<Label x:Name="lblAttributes" Text="{Binding AttributesTexts}"
TextColor="Black" FontSize="Small" LineBreakMode="WordWrap" Margin="0,0,0,0" HorizontalOptions="Start"
VerticalOptions="Start"/>
</StackLayout>
<Grid x:Name="gvButtons" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" Margin="4,4,4,4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout x:Name="btnRate" Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="DarkGray"
Margin="2,0,2,0" Grid.Column="0" Padding="0,2,0,2">
<StackLayout x:Name="slLayoutRate" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<Image x:Name="imgRate" Source="smallstar.png" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,4,0" />
<Label x:Name="lblRate" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Text="{ext:Translate Rate}"
TextColor="Black" FontAttributes="Bold" FontSize="Small" Margin="0,0,0,0" />
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="btnRate_Clicked" CommandParameter="{Binding ID}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
<StackLayout x:Name="btnMap" Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="DarkGray"
Margin="2,0,2,0" Grid.Column="1" Padding="0,2,0,2">
<StackLayout x:Name="slLayoutMap" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<Image x:Name="imgMap" Source="mapblue.png" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,4,0" />
<Label x:Name="lblMap" HorizontalOptions="Center" VerticalOptions="Center" Text="{ext:Translate Map}"
TextColor="Black" FontAttributes="Bold" FontSize="Small" Margin="0,0,0,0" />
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="btnMap_Clicked" CommandParameter="{Binding ID}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
<StackLayout x:Name="btnClosed" Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="DarkGray"
Margin="2,0,2,0" Grid.Column="2" Padding="0,2,0,2">
<StackLayout x:Name="slLayoutClosed" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<Image x:Name="imgClosed" Source="closed.png" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Margin="0,0,4,0" />
<Label x:Name="lblClosed" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{ext:Translate Closed}"
TextColor="Black" FontAttributes="Bold" FontSize="Small" Margin="0,0,0,0" />
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="btnClosed_Clicked" CommandParameter="{Binding ID}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
</Grid>
</StackLayout>
</ViewCell>
Code the hides/shows the stack layout.
private void btnDetails_Clicked(object sender, EventArgs e)
{
long ll_PlaceID = -1;
try
{
ll_PlaceID = Convert.ToInt64(((TappedEventArgs)e).Parameter);
ViewModelObjects.NearbyPlaces.ShowDetailText(ll_PlaceID);
if (Device.RuntimePlatform == Device.iOS)
{
((ViewCell)((Element)sender).Parent.Parent.Parent).ForceUpdateSize();
}
}
catch (Exception ex)
{
App.ProcessException(ex);
}
}
Show Details code from the View Model
public void ShowDetailText(long pl_PlaceID)
{
GBSPlaceDetail lobj_Place = null;
try
{
lobj_Place = (GBSPlaceDetail)(from lobj_Work in GBSPlaceDetails
where lobj_Work.ID == pl_PlaceID
select lobj_Work).ToList()[0];
if (lobj_Place != null)
lobj_Place.ShowDetails = !lobj_Place.ShowDetails;
}
catch (Exception ex)
{
App.ProcessException(ex);
}
}
Any suggestions would be greatly appreciated.
No one every really responded to my post so I started looking for other controls to use. I found SyncFusion had a ListView control also. It seemed to be a pretty easy drop in for the Xamarin Forms ListView control (add the needed namespace and prefix all the controls with the SyncFusion ListView namespace). On iOS you still needed to call extra code when the size of the list item entry expanded but the SyncFusion code seems to work cleaner than the Xamarin code as the problem did not manifest when using the SyncFusion ListViewcontrol.
Here is the code I had to include in the code behind for the page in my PCL project. (lvPlaces is the name of my ListView control in the XAML)
if (Device.RuntimePlatform == Device.iOS)
{
lvPlaces.ForceUpdateItemSize();
}