I am struggling with the design of a UI that has three distinct groupings:
Top 3
Friends
All contacts
Subscribed and All contacts are going to be big lists. My first pass at this is as follows:
<Expander>
<Expander.Header>
<Label
FontAttributes="Bold"
FontSize="Medium"
Text="Top 3" />
</Expander.Header>
<Expander.Content>
<CollectionView ItemsSource="{Binding MyContacts}">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<SwipeView>
<SwipeView.LeftItems>
<SwipeItem BackgroundColor="Aquamarine" Text="Un Favorite" />
</SwipeView.LeftItems>
<SwipeView.Content>
<Label Text="{Binding DisplayName}" />
</SwipeView.Content>
</SwipeView>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Expander.Content>
</Expander>
<Expander>
<Expander.Header>
<Label
FontAttributes="Bold"
FontSize="Medium"
Text="Friends" />
</Expander.Header>
<Expander.Content>
<CollectionView ItemsSource="{Binding UppContacts}">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<SwipeView>
<SwipeView.LeftItems>
<SwipeItem BackgroundColor="Brown" Text="Fav" />
</SwipeView.LeftItems>
<SwipeView.Content>
<Label Text="{Binding DisplayName}" />
</SwipeView.Content>
</SwipeView>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Expander.Content>
</Expander>
But I can't seem to put more than one expander in a page. When I do one at a time - all works as expected.
When you say you cannot have more than one expander on the page, do you mean that you are getting an error message, saying something along the lines of "The property "Content" has been set more than once"?
If that's the case then you can resolve this simply, by wrapping all of the expanders inside a container.
For example:
<StackLayout>
<Expander>
<Expander.Header>
<Label
FontAttributes="Bold"
FontSize="Medium"
Text="Top 3" />
</Expander.Header>
<Expander.Content>
<CollectionView ItemsSource="{Binding MyContacts}">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<SwipeView>
<SwipeView.LeftItems>
<SwipeItem BackgroundColor="Aquamarine" Text="Unfavorite" />
</SwipeView.LeftItems>
<SwipeView.Content>
<Label Text="{Binding DisplayName}" />
</SwipeView.Content>
</SwipeView>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Expander.Content>
</Expander>
<Expander>
<Expander.Header>
<Label
FontAttributes="Bold"
FontSize="Medium"
Text="Friends" />
</Expander.Header>
<Expander.Content>
<CollectionView ItemsSource="{Binding UppContacts}">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<SwipeView>
<SwipeView.LeftItems>
<SwipeItem BackgroundColor="Brown" Text="Fav" />
</SwipeView.LeftItems>
<SwipeView.Content>
<Label Text="{Binding DisplayName}" />
</SwipeView.Content>
</SwipeView>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Expander.Content>
</Expander>
</StackLayout>
Related
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'm trying to make a payment method page. The functionality i'm trying to do is - click on the radio button and the expander body should show the text boxes to add the corresponding details. So I tried this code:
<Grid Grid.Row="2">
<StackLayout Orientation="Vertical" >
<Frame BorderColor="Gray"
CornerRadius="5"
Padding="8">
<StackLayout >
<Expander>
<Expander.Header>
<StackLayout>
<Label Text="COD"/>
<RadioButton GroupName="PaymentMethod"
Text="{lang:Translate COD}"
IsChecked="False"/>
</StackLayout>
</Expander.Header>
</Expander>
</StackLayout>
</Frame>
<Frame BorderColor="Gray"
CornerRadius="5"
Padding="8">
<StackLayout>
<Expander>
<Expander.Header>
<StackLayout>
<Label Text="Card Payment"/>
<RadioButton GroupName="PaymentMethod"
Text="{lang:Translate Card}"
IsChecked="False"/>
</StackLayout>
</Expander.Header>
<Expander.Content>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<StackLayout Orientation="Horizontal">
<local:XEntry Style="{StaticResource entry}"
Placeholder="Card Number"
PlaceholderColor="LightGray"
MaxLength="100"/>
<!--Text="{Binding CardNumber}"-->
<local:XEntry Style="{StaticResource entry}"
Placeholder="MM"
PlaceholderColor="LightGray"
Text="{Binding Month}"
MaxLength="2"/>
<Label Text="/"/>
<local:XEntry Style="{StaticResource entry}"
Placeholder="YY"
PlaceholderColor="LightGray"
MaxLength="2"/>
<!--Text="{Binding Year}"-->
<local:XEntry Style="{StaticResource entry}"
Placeholder="CVV"
PlaceholderColor="LightGray"
MaxLength="3"/>
<!--Text="{Binding CVV}"-->
</StackLayout>
</Grid>
<Grid Grid.Row="1">
<StackLayout>
<local:XEntry Style="{StaticResource entry}"
Placeholder="Card Holder Name"
PlaceholderColor="LightGray"
MaxLength="100"/>
<!--Text="{Binding CardHolderName}"-->
</StackLayout>
</Grid>
</Grid>
</Expander.Content>
</Expander>
</StackLayout>
</Frame>
<Frame BorderColor="Gray"
CornerRadius="5"
Padding="8">
<StackLayout>
<Expander>
<Expander.Header>
<StackLayout>
<Label Text="Net Banking"/>
<RadioButton GroupName="PaymentMethod"
Text="{lang:Translate Card}"
IsChecked="False" />
<!--{Binding NetBank}-->
</StackLayout>
</Expander.Header>
<Expander.Content>
<StackLayout>
<Label Text="Net Banking"/>
</StackLayout>
</Expander.Content>
</Expander>
</StackLayout>
</Frame>
</StackLayout>
</Grid>
The Expander is working only if the header contains a Lable likw thw code i pasted above. When i add just the RadioButton in the header, it doesn't expand. I don't want the label in my header. Instead I want the expander to expand when the radio button is active. I'm using the Xamarin.Forms 4.6 Release RadioButton and Expander . Please suggest a solution. Thanks in advance.
Thanks for your time. Here is the answer:
<Expander x:Name="MyExpander">
<Expander.Header>
<StackLayout>
<RadioButton HorizontalOptions="StartAndExpand" WidthRequest="200" GroupName="PaymentMethod"
Text="Credit/Debit Card"
IsChecked="False"
Clicked="RadioButton_Clicked"/>
</StackLayout>
</Expander.Header>
</Expander>
and in the cs file:
private void RadioButton_Clicked(object sender, EventArgs e)
{
MyExpander.IsExpanded = !MyExpander.IsExpanded;
}
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();
This is my code
<ListView x:Name="listViewClient" ItemsSource="{Binding Client}" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell >
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<BoxView Grid.Column="0" Color="#84DCC6"/>
<StackLayout Grid.Column="1" Padding="20, 10">
<Frame BorderColor="WhiteSmoke">
<StackLayout>
<Label Text="Name:" FontSize="16" />
<Label FontSize="Medium" Text="{Binding Name}" FontAttributes="Bold" />
</StackLayout>
</Frame>
<Frame BorderColor="WhiteSmoke">
<StackLayout>
<Label Text="Adress:" FontSize="16"/>
<Label FontSize="Medium" Text="{Binding Adress}" FontAttributes="Bold"/>
</StackLayout>
</Frame>
<Frame BorderColor="WhiteSmoke">
<StackLayout>
<Label Text="Place:" FontSize="16"/>
<Label FontSize="Medium" Text="{Binding Place}" FontAttributes="Bold" />
</StackLayout>
</Frame>
<Frame BorderColor="WhiteSmoke" >
<Grid >
<StackLayout Grid.Column="0">
<Label Text="Mobile:" FontSize="16"/>
<Label FontSize="Medium" Text="{Binding Mobile}" FontAttributes="Bold" />
</StackLayout>
<Button Grid.Column="1" Text="Call" Clicked="PovikajPartnerClicked" BackgroundColor="#84DCC6"></Button>
</Grid>
</Frame>
<Frame BorderColor="WhiteSmoke">
<StackLayout>
<Label Text="Е-mail:" FontSize="16"/>
<Label FontSize="Medium" Text="{Binding EMAIL}" FontAttributes="Bold" />
</StackLayout>
</Frame>
<Frame BorderColor="WhiteSmoke">
<StackLayout>
<Label Text="LAW:" FontSize="16"/>
<Label FontSize="Medium" Text="{Binding LAW}" FontAttributes="Bold" />
</StackLayout>
</Frame>
<Frame BorderColor="WhiteSmoke
">
<StackLayout>
<Label Text="SECNUM:" FontSize="16"/>
<Label FontSize="Medium" Text="{Binding SECNUM}" FontAttributes="Bold" />
</StackLayout>
</Frame>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I dont know from where get that orange background color when i tap on the listview. From the code you can see that i dont have choosed samo backgroud color . Is there a default tap event to make the color orange? I tried everything but cant find is there anyplace i forgot to add a color.
I know this may be a bit late, but I hope it will help someone, Just go your styles.xml file under AppName.Android/Resources/values and inside your Main Theme add the following:
<item name="android:colorActivatedHighlight">#android:color/transparent</item>
That is the default selection colour of your ListView that comes from the theme of your App that Xamarin by default has set in the template to solve it just add the following to your ListView
<ListView SelectionMode="None" ..../>
I am late to the party, but this solution I found on Grepper might be helpful. It is simple and is unique for each content page.
You can alter the background color of the current cell and the previous cell using the ViewCell Tapped event.
XAML:
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Tapped="ViewCell_Tapped" >
<Label Text="{Binding Name}" TextColor="DarkGoldenrod" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
In your code add:
ViewCell lastCell;
private void ViewCell_Tapped(object sender, System.EventArgs e)
{
if (lastCell != null)
lastCell.View.BackgroundColor = Color.Transparent;
var viewCell = (ViewCell)sender;
if (viewCell.View != null)
{
viewCell.View.BackgroundColor = Color.LightGray;
lastCell = viewCell;
}
}
PFB the code for my list view,
<ListView HasUnevenRows="true" ItemsSource="{Binding UserEmailList}" IsGroupingEnabled="true">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Vertical" Spacing="0" Margin="0" Padding="0">
<BoxView Style="{StaticResource separator}"></BoxView>
<Label Text="{Binding Heading}" Style="{StaticResource labelHeaderTitle}" />
<BoxView Style="{StaticResource separator}"></BoxView>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Horizontal" Spacing="0" >
<StackLayout IsVisible="{Binding UserEmailDetails.HasEmailAddress}" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label Text="{Binding UserEmailDetails.EmailAddress}" Style="{StaticResource labelListItem}" HorizontalOptions="FillAndExpand">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="SelectEmailAddress_Tapped" CommandParameter="{Binding UserEmailDetails}" />
</Label.GestureRecognizers>
</Label>
<Image HeightRequest="16" HorizontalOptions="End" VerticalOptions="Center" Source="arrow.png" Margin="0,0,15,0">
</Image>
</StackLayout>
<StackLayout IsVisible="{Binding UserEmailDetails.HasEmailAddress, Converter={StaticResource NotConverter}}" Padding="15,0,0,0">
<Label Text="Add email" Style="{StaticResource labelLink}">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="SelectEmailAddress_Tapped" CommandParameter="{Binding UserEmailDetails}" />
</Label.GestureRecognizers>
</Label>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Even if there are only two rows, on IOS multiple empty rows are getting populated as in the below snapshot.
Please let me know how to avoid this and hav things working in both Android and IOS
I would hide the Separator by setting SeparatorVisibility="None" on ListView Property. If you still need the Separator I would define in the ViewCell.
<ListView HasUnevenRows="true" SeparatorVisibility="None">
The other way is to put Empty Footer on List View:
<ListView>
<ListView.Footer>
<Label />
</ListView.Footer>
</ListView>
I hope one of these helps you. Let me know if anything.