The code works with the normal but not with FFImageLoading. The ActivityIndicator is not displaying... What am I doing wrong?
<ContentPage.Content>
<StackLayout>
<local:PinchPanContainer>
<local:PinchPanContainer.Content HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<ffimageloading:CachedImage RetryCount="5" RetryDelay="1" CacheDuration="1" x:Name="MyImage" HorizontalOptions="Fill" VerticalOptions="CenterAndExpand" DownsampleToViewSize="False"></ffimageloading:CachedImage>
</local:PinchPanContainer.Content>
</local:PinchPanContainer>
<ActivityIndicator BindingContext="{x:Reference MyImage}" IsRunning="{Binding CachedImage.IsLoading}" IsVisible="{Binding CachedImage.IsLoading}"/>
</StackLayout>
</ContentPage.Content>
The binding path you use is not correct, it should be IsLoading instead of CachedImage.IsLoading:
<StackLayout>
<ffimageloading:CachedImage Source="http://img1.wikia.nocookie.net/__cb20101219155130/uncyclopedia/images/7/70/Facebooklogin.png" LoadingDelay="2000" RetryCount="5" RetryDelay="1" CacheDuration="1" x:Name="MyImage" HorizontalOptions="Fill" VerticalOptions="CenterAndExpand" DownsampleToViewSize="False"></ffimageloading:CachedImage>
<ActivityIndicator BindingContext="{x:Reference MyImage}" Color="Red" IsRunning="{Binding IsLoading}" IsVisible="{Binding IsLoading}"/>
</StackLayout>
Refer: data-binding-basics
Related
I need to display a list with about 30 to 40 items that the user has to choose from, and I don't wont to use a combobox, so a Listview seems the way to go.
However, once I put a listview on the page, the listview grows so much in height that it goes off the screen, how can I prevent that ?
I need something like this
<gttCompound:PageBase xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:gttCompound="clr-namespace:gttCompound.Pages"
x:Class="gttCompound.Pages.PageDamageSelectFromList">
<gttCompound:PageBase.ChildStackLayoutContent>
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" Margin="5, 5">
<StackLayout VerticalOptions="Start" Orientation="Horizontal" HorizontalOptions="Center">
<Label Text="SELECT THE DAMAGE LOCATION" FontAttributes="Bold" FontSize="{StaticResource FontSizeLabelSmall}" TextColor="{StaticResource TextColor}" ></Label>
</StackLayout>
<StackLayout x:Name="entirePage" BackgroundColor="Yellow">
<ListView x:Name="listView" ItemsSource="{Binding Items}" Margin="0" BackgroundColor="Red">
<!-- ListView Stuff -->
</ListView>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal" VerticalOptions="EndAndExpand">
<Button x:Name="ButtonDamageBack" WidthRequest="150" FontAttributes="Bold" HorizontalOptions="Start" TextTransform="Uppercase" Text="{Binding Back}" BackgroundColor="{StaticResource ElementBackgroundColor}" TextColor="{StaticResource ElementTextColor}" FontSize="{StaticResource FontSizeButtonLittle}" />
<Button x:Name="ButtonDamageNext" WidthRequest="150" FontAttributes="Bold" HorizontalOptions="EndAndExpand" TextTransform="Uppercase" IsEnabled="False" Text="{Binding Next}" BackgroundColor="{StaticResource ElementDisabledBackgroundColor}" TextColor="{StaticResource ElementTextColor}" FontSize="{StaticResource FontSizeButtonLittle}" />
</StackLayout>
</StackLayout>
</gttCompound:PageBase.ChildStackLayoutContent>
I gave some elements a noticable background color so I can see how much space they take
The listview takes way to much space.
Might it be because the page is an inherited page ?
The base page looks like this
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="gttCompound.Pages.PageBase"
xmlns:helpers="clr-namespace:gttCompound.Pages.Helpers">
<ContentPage.Resources>
<ResourceDictionary>
<helpers:StringNewLineConverter x:Key="StringNewLineConverter"/>
<helpers:StringToTitleCaseConverter x:Key="StringToTitleCaseConverter"/>
<helpers:StringSubstringConverter x:Key="StringSubstringConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<!-- All the stuff about the AbsoluteLayout is to get a WaitCursor that can show in the center of the screen, see this url
https://stackoverflow.com/questions/48295792/xamarin-forms-how-to-fix-activity-indicator-in-centre-of-screen-in-scrollview
-->
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<ScrollView AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<StackLayout>
<StackLayout x:Name="TopStackLayout" VerticalOptions="Start" BackgroundColor="{StaticResource HeaderColor}" Orientation="Horizontal">
<Frame VerticalOptions="Center" Padding="0" BackgroundColor="{StaticResource HeaderColor}" BorderColor="Transparent" WidthRequest="40">
<Button x:Name="ButtonBack" VerticalOptions="Start" Text="" Image="Back.png" BackgroundColor="{StaticResource HeaderColor}" TextColor="{StaticResource TextColor}" FontSize="8" HeightRequest="14" />
</Frame>
<Frame VerticalOptions="CenterAndExpand" Padding="0" BackgroundColor="{StaticResource HeaderColor}" BorderColor="Transparent">
<Label Text="{Binding AppName}" HorizontalOptions="Start" HorizontalTextAlignment="Center" TextColor="White" FontSize="{StaticResource FontSizeLabelBig}" Padding="0" x:Name="Page_Title" />
</Frame>
</StackLayout>
<StackLayout x:Name="ChildStackLayout" VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="0,-6">
</StackLayout>
<StackLayout x:Name="BottomStackLayout" VerticalOptions="End" Orientation="Horizontal" BackgroundColor="{StaticResource HeaderColor}">
<Label x:Name="LabelUser" Text="" TextColor="White" FontSize="{StaticResource FontSizeLabelTiny}" BackgroundColor="{StaticResource HeaderColor}" Margin="0,0,0,-6" HorizontalTextAlignment="Start" IsVisible= "True" />
<Label x:Name="LabelVersion" Text="" HorizontalOptions="CenterAndExpand" TextColor="White" FontSize="{StaticResource FontSizeLabelTiny}" BackgroundColor="{StaticResource HeaderColor}" Margin="0,0,0,-6" HorizontalTextAlignment="Center" IsVisible= "True" />
<Label Text="{Binding CopyRight}" HorizontalOptions="EndAndExpand" BackgroundColor="{StaticResource HeaderColor}" HorizontalTextAlignment="End" TextColor="White" FontSize="{StaticResource FontSizeLabelTiny}" />
</StackLayout>
</StackLayout>
</ScrollView>
<AbsoluteLayout x:Name="LayoutWaitCursor" BackgroundColor="#22000000" AbsoluteLayout.LayoutBounds="0.5,0.5,1,1" AbsoluteLayout.LayoutFlags="All" IsVisible="false">
<ActivityIndicator IsVisible="true" IsRunning="True" Color="{StaticResource TextColor}" AbsoluteLayout.LayoutBounds="0.5,0.5,0.1,0.1" AbsoluteLayout.LayoutFlags="All" />
</AbsoluteLayout>
</AbsoluteLayout>
</ContentPage>
Here is how the form looks like at runtime
And without the listview it looks like this
I changed just this
<StackLayout x:Name="entirePage" BackgroundColor="Yellow">
<!--
<ListView x:Name="listView" ItemsSource="{Binding Items}" Margin="0" BackgroundColor="Red">
</ListView>
-->
</StackLayout>
What I want is that the listview is visible and scrollable, but the 2 buttons should always stay visible. The listview must only occupy the space between the label on top of the page and the 2 buttons on the bottom of the page.
How can I do that ?
1) REMOVE ScrollView.
2) <StackLayout x:Name="ChildStackLayout" VerticalOptions="FillAndExpand" .... Try different VerticalOptions. Try Center. Also try CenterAndExpand..
3) If still wrong, change the outer StackLayout to Grid, and use RowDefinitions="Auto,*,Auto", with the 3 sections marked Grid.Row="0" / "1" / "2".
ChildStackLayout is "1" (numbered from 0), so gets the * in RowDefinitions.
How can i put the indicatorview below and center of the image?
https://imgur.com/Wa3Ur48
I tried position and other stuff but i can't seem to move the indicatorview below the image.
<StackLayout Grid.Row="0" Orientation="Horizontal" VerticalOptions="Start" HorizontalOptions="FillAndExpand">
<!--<ffimageloading:CachedImage HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Margin="10"
Style="{StaticResource RetailHeaderImage}"
Source="{Binding ImageSource}">
</ffimageloading:CachedImage>-->
<CarouselView ItemsSource="{Binding ImageUrls}" IndicatorView="indicatorView" HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Margin="10" HeightRequest="150" WidthRequest="150" >
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<ffimageloading:CachedImage
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
LoadingPlaceholder="loading.gif"
Aspect="AspectFill"
BackgroundColor="Black"
Source="{Binding}">
</ffimageloading:CachedImage>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="indicatorView"
IndicatorColor="LightGray"
SelectedIndicatorColor="DarkGray"
HorizontalOptions="StartAndExpand"
VerticalOptions="End"/>
<Label Text="{Binding ReferenceSku.Name}" Style="{StaticResource RetailHeaderText}" HorizontalOptions="FillAndExpand" LineBreakMode="WordWrap"/>
</StackLayout>
Set the Orientation of the StackLayout to Vertical. And then set the IndicatorView in the center of the StackLayout.
Refer to the xaml below:
<StackLayout Orientation="Vertical" VerticalOptions="Start" HorizontalOptions="FillAndExpand">
<!--<ffimageloading:CachedImage HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Margin="10"
Style="{StaticResource RetailHeaderImage}"
Source="{Binding ImageSource}">
</ffimageloading:CachedImage>-->
<CarouselView ItemsSource="{Binding ImageUrls}" IndicatorView="indicatorView" HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Margin="10" HeightRequest="150" WidthRequest="150" >
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<Image Source="{Binding image}"></Image>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="indicatorView"
IndicatorColor="LightGray"
SelectedIndicatorColor="DarkGray"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"/>
<Label Text="Name" LineBreakMode="WordWrap"/>
</StackLayout>
I am working with Xamarin's CollectionView and Stacklayout and I'm trying to display item lists from different sources in the form of collection views. However, the output of the code shown below is something I didn't expect it. The result of the first collection view is getting displayed in a small window and all the remaining items can be read by scrolling. However, I want to display them all without using a scroll and the same should work if more collectionviews are added in the code. Is there anything I'm missing here?
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="Arhoo"
x:Class="Arhoo.Pages.MainFeedPage">
<StackLayout>
<StackLayout VerticalOptions="FillAndExpand">
<CollectionView x:Name="ItemsListView"
ItemsSource="{Binding Hotels}"
VerticalOptions="FillAndExpand" Margin="10" Visual="Material">
<CollectionView.Header>
<StackLayout BackgroundColor="LightGray" HeightRequest="50" >
<Label Visual="Material" Text="Hotels" FontSize="Medium" FontAttributes="Bold" />
</StackLayout>
</CollectionView.Header>
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="2"/>
</CollectionView.ItemsLayout>
<CollectionView.EmptyView>
<StackLayout>
<Label HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="Loading Hotels"/>
</StackLayout>
</CollectionView.EmptyView>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Visual="Material">
<ContentView Padding="10">
<Frame HasShadow="false" OutlineColor="#2f2f2f" Padding="0" CornerRadius="2">
<Grid BackgroundColor="#f2f2f2" MinimumHeightRequest="400">
<Image Source="{Binding Image}" Aspect="AspectFill"/>
<BoxView BackgroundColor="#000000" Opacity="0.4"/>
<Label Text="{Binding Text}" Margin="15" TextColor="White" VerticalOptions="End"
VerticalTextAlignment="End" LineBreakMode="NoWrap" FontSize="18" />
</Grid>
</Frame>
</ContentView>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand">
<CollectionView x:Name="TOsListView"
ItemsSource="{Binding TourOperators}"
VerticalOptions="FillAndExpand" >
<CollectionView.Header>
<StackLayout BackgroundColor="LightGray" HeightRequest="20" >
<Label Margin="10,0,0,0" Text="Tour Operators" FontSize="Medium" FontAttributes="Bold" />
</StackLayout>
</CollectionView.Header>
<CollectionView.ItemsLayout>
<GridItemsLayout
Orientation="Vertical"
Span="2"/>
</CollectionView.ItemsLayout>
<CollectionView.EmptyView>
<StackLayout>
<Label
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Text="Loading TOs"/>
</StackLayout>
</CollectionView.EmptyView>
<CollectionView.ItemTemplate>
<DataTemplate>
<ContentView Padding="10" >
<Frame HasShadow="false"
OutlineColor="#2f2f2f"
Padding="0"
CornerRadius="2">
<Grid BackgroundColor="#f2f2f2">
<Image Source="{Binding Image}"
Aspect="AspectFill"/>
<BoxView BackgroundColor="#000000"
Opacity="0.4"/>
<Label Text="{Binding Text}"
Margin="15"
TextColor="White"
VerticalOptions="End"
VerticalTextAlignment="End"
LineBreakMode="NoWrap"
FontSize="18" />
</Grid>
</Frame>
</ContentView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</StackLayout>
</ContentPage>
I have added a <ScrollView> at my code and the collectionview items displayed as I wanted it. Here is the modified code that is working for me.
?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="Arhoo"
x:Class="Arhoo.Pages.MainFeedPage">
<ScrollView>
<StackLayout>
<CollectionView x:Name="HotelsListView" ... </CollcetionView>
</StackLayout>
<StackLayout>
<CollectionView x:Name="HotelsListView" ... </CollcetionView>
</StackLayout>
<StackLayout>
<CollectionView x:Name="HotelsListView" ... </CollcetionView>
</StackLayout>
</StackLayout>
</ScrollView>
</ContentPage>
I have a Xamarin PCL Android/iOS/UWP project. Im using Iconize FontAwsome icons for the application. Problem is that UWP dosent display any icons, but Android does
Like this:
My form:
<?xml version="1.0" encoding="utf-8" ?>
<controls:BasePage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:Volaapp.Controls;assembly:Volaapp"
xmlns:converters="clr-namespace:Volaapp.Converters;assembly:Volaapp"
xmlns:icons="clr-namespace:FormsPlugin.Iconize;assembly=FormsPlugin.Iconize"
xmlns:xlabs="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"
x:Class="Volaapp.Pages.CreateTodoPage"
BackgroundColor="{StaticResource GrayColor}"
Title="Lisa uus võlg">
<ScrollView BackgroundColor="{StaticResource WhiteColor}">
<StackLayout Margin="10"
BackgroundColor="{StaticResource WhiteColor}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="65"/>
<RowDefinition Height="65"/>
<RowDefinition Height="65"/>
<RowDefinition Height="65"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--Nimi ja Summa-->
<StackLayout Grid.Column="0" Grid.Row="0"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<icons:IconImage VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Icon="fa-gg"
IconColor="{StaticResource MetroBlackColor}"
HeightRequest="30"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="0"
Orientation="Vertical"
BackgroundColor="{StaticResource MetroWhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
BackgroundColor="{StaticResource WhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,1,1,1">
<Entry Text="{Binding Title}"
Placeholder="Sisesta pealkiri"
VerticalOptions="EndAndExpand"
Keyboard="Text"
Margin="15,0,15,2"/>
<Entry
VerticalOptions="EndAndExpand"
Placeholder="Sisesta Summa!"
Text="{Binding Loan}"
Keyboard="Numeric"
Margin="15,2,15,10"
/>
</StackLayout>
</StackLayout>
<!--Inimesed-->
<StackLayout Grid.Column="0" Grid.Row="1"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<icons:IconImage VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Icon="fa-user"
IconColor="{StaticResource MetroBlackColor}"
HeightRequest="30"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="1"
Orientation="Vertical"
BackgroundColor="{StaticResource MetroWhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
BackgroundColor="{StaticResource WhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,1,1,1">
<controls:BindablePicker Margin="20,5"
ItemsSource="{Binding Tags}"
SelectedItem="{Binding SelectedTag, Mode=TwoWay}"
DisplayMemberPath="Title"
Title="Vali inimene"
VerticalOptions="EndAndExpand"/>
</StackLayout>
</StackLayout>
<!--Rahatäht-->
<StackLayout Grid.Column="0" Grid.Row="2"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<icons:IconImage VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Icon="fa-money"
IconColor="{StaticResource MetroBlackColor}"
HeightRequest="30"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="2"
Orientation="Vertical"
BackgroundColor="{StaticResource MetroWhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
BackgroundColor="{StaticResource WhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,1,1,1">
<controls:BindablePicker Margin="20,5"
ItemsSource="{Binding CurrencyList}"
SelectedItem="{Binding Currency, Mode=TwoWay}"
Title="Vali Rahatäht"
VerticalOptions="EndAndExpand"/>
</StackLayout>
</StackLayout>
<!--Due date-->
<StackLayout Grid.Column="0" Grid.Row="3"
Orientation="Vertical"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<xlabs:ImageButton Image="_duedate.png"
ImageHeightRequest="35"
ImageWidthRequest="35"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
BorderRadius="0"
Command="{Binding SelectDueDateCommand}"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="3"
BackgroundColor="{StaticResource MetroWhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout BackgroundColor="{StaticResource WhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,1,1,1">
<Label Text="{Binding DueTime, StringFormat='Kuupäev {0:dd.MM.yyyy HH:mm}'}"
FontSize="17"
Margin="25,0"
TextColor="{StaticResource BlackColor}"
VerticalTextAlignment="Start"
VerticalOptions="CenterAndExpand"
HorizontalOptions="StartAndExpand">
</Label>
</StackLayout>
</StackLayout>
<!--Meeldetuletus-->
<StackLayout Grid.Column="0" Grid.Row="4"
Orientation="Vertical"
BackgroundColor="{StaticResource MetroWhiteColor}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<Image HeightRequest="35"
WidthRequest="35"
Source="{Binding ReminderIcon}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand">
</Image>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="4"
BackgroundColor="{StaticResource MetroWhiteColor}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout BackgroundColor="{StaticResource WhiteColor}"
Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="0,1,1,1">
<Label Text="Meeldetuletus"
FontSize="17"
Margin="25,0,0,0"
TextColor="{StaticResource BlackColor}"
VerticalTextAlignment="Start"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Start"/>
<Switch IsToggled="{Binding EnableReminder, Mode=TwoWay}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Start"
Margin="20,0"/>
</StackLayout>
</StackLayout>
<!--Button-->
<StackLayout Grid.Column="1" Grid.Row="5"
Orientation="Horizontal" Margin="0,30"
HorizontalOptions="EndAndExpand"
VerticalOptions="CenterAndExpand">
<xlabs:ImageButton
BackgroundColor="{StaticResource MetroWhiteColor}"
Text="SAVE" FontSize="12"
IsEnabled="{Binding IsValid}"
HorizontalOptions="StartAndExpand"
HeightRequest="40"
WidthRequest="100"
BorderRadius="0"
Command="{Binding SaveCommand}"/>
<xlabs:ImageButton
BackgroundColor="{StaticResource MetroWhiteColor}"
Text="CANCEL"
HorizontalOptions="StartAndExpand"
BorderRadius="0"
HeightRequest="40"
WidthRequest="100"
FontSize="12"
Command="{Binding CancelCommand}"/>
</StackLayout>
</Grid>
</StackLayout>
</ScrollView>
</controls:BasePage>
Am I missing a nugget or UWP dosent support iconize?
The nuggets that are installed in UWP for iconize:
Xam.Plugin.Iconize.FontAwsome
Xam.Plugin.Iconize
Xam.FormsPlugin.Iconize
FontAwsome.UWP
This is a known but no acknowledged issue and doesn't seem to be fixed in the current version. GitHub Issue #13. I also experience the same issue.
The workaround, is to do this:
Create a folder Plugin.Iconize.Material.UWP\Assets\Fonts\ in the root
of your project.
Copy fontawesome.ttf to the new directory and set
to Copy if newer as its output.
I'm working on a Xamarin Forms project where I need to have a drop down list like html drop down as in image.
I have taken a StackLayout for button and Listview (initially hidden) and when clicked on button will change the visibility to true. The list should open above other buttons but when the list get open, all other stackLayout moved below as in image.
I want the list view to be open above other views. The code for the screen is as below. Could any one help what changed do I need to make in the below code.
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Horizontal" WidthRequest="400">
<Label Text="Label 1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> </Label>
<StackLayout x:Name="addList" WidthRequest="200" HorizontalOptions="Start">
<Button Clicked="onBtnClicked" Text="Button 1" WidthRequest="200"></Button>
<ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" WidthRequest="400">
<Label Text="Label 2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>
<StackLayout x:Name="addList" WidthRequest="200" HorizontalOptions="Start">
<Button Clicked="onBtnClicked" Text="Button 2" WidthRequest="200"></Button>
<ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" WidthRequest="400">
<Label Text="Label 3" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>
<StackLayout x:Name="addList" WidthRequest="200" HorizontalOptions="Start">
<Button Clicked="onBtnClicked" Text="Button 3" WidthRequest="200"></Button>
<ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
</StackLayout>
</StackLayout>
</StackLayout>
Edited:
This is my actual XAML
<StackLayout BackgroundColor="#FFFFFF" Padding="20,20,200,20" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout x:Name="PreferencesBodyLayout" Padding="10,10,10,10" Orientation="Vertical">
<StackLayout x:Name="LanguageLayout" Orientation="Horizontal" HeightRequest="50" HorizontalOptions="FillAndExpand" >
<Label Text="Change Language" Font="Large" TextColor="Black" HorizontalOptions="StartAndExpand" />
<RelativeLayout x:Name="LanguageSelectionRelativeLayout" HorizontalOptions="EndAndExpand">
<StackLayout Padding="2" Spacing="0" BackgroundColor="#EFEFEF" WidthRequest="150" >
<StackLayout x:Name="LanguageDropDown" Padding="0" Spacing="0" Orientation="Horizontal" BackgroundColor="White" VerticalOptions="FillAndExpand">
<StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
<Label x:Name="SelectedLanguageLabel" StyleId="Settings_ChangeLanguage_Label" Margin="5" Text="{Binding SelectedLanguageLabelText}" TextColor="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Font="Medium"/>
</StackLayout>
<StackLayout HorizontalOptions="End">
<Image Source="ge_arrow_down.png" HeightRequest="20" WidthRequest="20" VerticalOptions="CenterAndExpand" >
</Image>
</StackLayout>
</StackLayout>
<ListView x:Name="LanguageList" IsVisible="{Binding ShowLanguagePopup}" BackgroundColor="Gray" VerticalOptions = "FillAndExpand"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=LanguageDropDown, Property=Y,Factor=1,Constant=40}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=LanguageDropDown,Property=X,Factor=1,Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=LanguageDropDown,Property=Width,Factor=1,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToView,
ElementName=LanguageDropDown,Property=Height,Factor=1,Constant=10}"
/>
</StackLayout>
</RelativeLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding ChangeLanguageCommand}" />
</StackLayout.GestureRecognizers>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
</StackLayout>
</StackLayout>
I have never used it but I think you can try with a RelativeLayout. This is a little demo: 2 buttons and a ListView. ListView has some Constraints to RedButton. You can try to show / hide it and take a look if Green Button (that has Constraints to RedButton too) does not move
<StackLayout VerticalOptions = "FillAndExpand">
<RelativeLayout>
<Button BackgroundColor="Red" x:Name="button" Text = "Button"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,Factor=.15,Constant=0}" />
<Button BackgroundColor="Green" x:Name="buttonGreen" Text = "Button"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,Factor=.15,Constant=100}" />
<ListView BackgroundColor="Blue" VerticalOptions = "FillAndExpand"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=button,Property=Y,Factor=1,Constant=60}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=button,Property=X,Factor=1,Constant=20}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Height,Factor=.5,Constant=0}"
/>
</RelativeLayout>
</StackLayout>