Absolute Layout does not seems to working as it is.

AnthonySarrisAnthonySarris ✭✭AUMember ✭✭
edited March 2017 in Xamarin.Forms

I have the following xaml file.

=============================

<?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="Octagon5App.SpendList" Padding="0" Title="Spend">
    <ContentPage.Content>
        <StackLayout Orientation="Vertical" x:Name="MainLayout" BackgroundColor="White" Margin="0">
            <StackLayout.Padding>
                <OnPlatform x:TypeArguments="Thickness">
                  <OnPlatform.iOS>0,20,0,0</OnPlatform.iOS>
                  <OnPlatform.Android>0,0,0,0</OnPlatform.Android>
                </OnPlatform>
            </StackLayout.Padding>          
            <StackLayout Orientation="Horizontal" Padding="0,0,20,0">
                <SearchBar FontSize="14" HorizontalOptions="StartAndExpand" Placeholder="Search" x:Name="searchBar" BackgroundColor="Transparent" WidthRequest="200"  
                        TextColor = "#8e8e91"
                        PlaceholderColor = "#8e8e91"
                        TextChanged="FilterSpend">
                </SearchBar>
                <Button Text="Dates" Clicked="ShowAdvanced" TextColor="#8e8e91" BackgroundColor="Transparent"></Button>
            </StackLayout>                      
            <StackLayout Orientation="Horizontal" Style="{StaticResource StackRow}" x:Name="AdvancedLayout" IsVisible="false">              
                <StackLayout HorizontalOptions="Start">
                    <Label Text="Sort by Entry Date" />
                    <Switch HorizontalOptions="Center" VerticalOptions="Center" Scale="0.6" x:Name="SortEntryDateToggle" Toggled="SortByEntryDate"></Switch>
                </StackLayout>
                <StackLayout HorizontalOptions="Start">
                    <Label Text="FROM1" />
                    <DatePicker x:Name="FromDate"  Scale="0.9" DateSelected="FilterDates" TextColor="#8e8e91">
                    </DatePicker>
                </StackLayout>
                <StackLayout HorizontalOptions="Start" >
                    <Label Text="TO" />
                    <DatePicker x:Name="ToDate"  Scale="0.9" DateSelected="FilterDates" TextColor="#8e8e91">
                    </DatePicker>
                </StackLayout>
            </StackLayout>

                <AbsoluteLayout Padding="20,0,20,0" >
                    <ListView AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All" ItemsSource="{Binding .}" IsGroupingEnabled="true" IsPullToRefreshEnabled="true" Refreshing="OnListRefresh" ItemTapped="OnItemTapped"
                            >
                        <!-- Group Header -->
                        <ListView.GroupHeaderTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <ViewCell.View>
                                        <StackLayout Orientation="Horizontal" VerticalOptions="Center">
                                            <Label Text="{Binding Date, StringFormat='{0:MMMM dd, yyyy}'}" FontSize="14" VerticalOptions="Center" />
                                            <Label Text="{Binding Total, StringFormat='{0:N2}'}" FontSize="14" VerticalOptions="Center" HorizontalOptions="EndAndExpand" TextColor="#f35e20" />
                                        </StackLayout>
                                    </ViewCell.View>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.GroupHeaderTemplate>
                        <!-- End Group Header -->
                        <ListView.ItemTemplate>
                            <DataTemplate >
                                <ViewCell>
                                    <ViewCell.View>
                                        <StackLayout Orientation="Horizontal" VerticalOptions="Center">
                                            <!-- Icon for the picture. -->
                                            <Image Source="{Binding Icon}" Scale=".5">                                          
                                            </Image>
                                            <ActivityIndicator IsVisible="{Binding ShowBusy}" IsRunning="{Binding ShowBusy}" Color="Black" />
                                            <Label Text="{Binding ContactName}" FontSize="14" VerticalOptions="Center" LineBreakMode="TailTruncation">                                          
                                            </Label>
                                            <Label Text="{Binding TotalAmount, StringFormat='{0:N2}'}" FontSize="14" VerticalOptions="Center" HorizontalOptions="EndAndExpand" TextColor="#f35e20" LineBreakMode="NoWrap">
                                            </Label>
                                        </StackLayout>
                                    </ViewCell.View>
                                    <ViewCell.ContextActions>
                                        <MenuItem Clicked="OnEdit" CommandParameter="{Binding .}" Text="Edit" />
                                        <MenuItem Clicked="OnDelete" CommandParameter="{Binding .}" Text="Delete" IsDestructive="True" />
                                    </ViewCell.ContextActions>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                    <!--<BoxView Color="White" Opacity="0.7" AbsoluteLayout.LayoutBounds="1,1,1,0.1" AbsoluteLayout.LayoutFlags="All" />-->
                    <Image Source="addSpend.png" HorizontalOptions="End" AbsoluteLayout.LayoutBounds="1,1" AbsoluteLayout.LayoutFlags="PositionProportional" HeightRequest="45">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="OnAddSpendTapped" NumberOfTapsRequired="1" />
                        </Image.GestureRecognizers>
                    </Image>
                </AbsoluteLayout>

        </StackLayout>
    </ContentPage.Content>
</ContentPage>

================================

The image comes correctly in IOS but in Android it comes with a box in the end. See the attached picture.

Best Answer

Answers

  • JohnMillerJohnMiller Xamurai USForum Administrator, Xamarin Team Xamurai

    @AnthonySarris,

    The LayoutBounds for the ListView and Image look incorrect to me.

    <ListView AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All"
    

    This means position the ListView at x = 1 and y = 1. That seems odd unless you actually wanted to bump it one unit. I suspect you wanted to make it start at 0,0. Use AbsoluteLayout.LayoutBounds="0,0,1,1" to do that.

    <Image AbsoluteLayout.LayoutBounds="1,1" AbsoluteLayout.LayoutFlags="PositionProportional"
    

    These bounds tell the Image to be position at x = 100% of the parents width and y = 100% of the parents height. Basically, it's going to start the position at the end of the parent. Is that what you wanted?

    Could you highlight the "box" you are talking about, I am not sure exactly what you are trying to correct in the image.

  • AnthonySarrisAnthonySarris ✭✭ AUMember ✭✭

    Hi,
    I have tried your suggestion of AbsoluteLayout.LayoutBounds="0,0,1,1" but no luck.
    The unwanted rectangle is marked in the attached image.
    I am not sure why it works correctly in iOS.

  • AnthonySarrisAnthonySarris ✭✭ AUMember ✭✭

    Image dimensions are correct. It is the Red "+" circle at the bottom right corner.

Sign In or Register to comment.