在ListView上放置按钮会扩展到页面之外

时间:2017-03-29 12:08:40

标签: xamarin xamarin.forms

我有Xamarin Forms项目。在xaml中,我希望ListView和它上面有一个可点击和透明的按钮(Opacity = 0.9)。 ListView上方有一个标签,下面有一个标签。我使用RelativeLayout放置ListView和透明按钮,并将其包含在StackLayout中,并带有两个标签。问题是ListView扩展到页面以外。

这是我的xaml文件代码:

<StackLayout VerticalOptions="FillAndExpand" BackgroundColor="#4d4d4d" HorizontalOptions="FillAndExpand">
  <Label Text="2600 Michelson" HorizontalOptions="Center" />
  <RelativeLayout VerticalOptions="FillAndExpand">
    <ListView ItemsSource ="{Binding Meters}" HasUnevenRows="True" 
      RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
      RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}" >
    ...
    </ListView>
    <Button Text="Green button" BackgroundColor="#299164" Opacity="0.9"
        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5, Constant=-50}"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-100}">
    </Button>
  </RelativeLayout>
  <Label Text="This label is not visible" TextColor="#0000ff"></Label>
<StackLayout>

以下是截图:

enter image description here

我还远离最终设计,但这应该是这样的:

enter image description here

1 个答案:

答案 0 :(得分:5)

我认为你可以使用网格。试试这段代码

XAML

<?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="TestRelativeLayout.MyPage1"
             Title="TabbedPage">
             <StackLayout VerticalOptions="FillAndExpand">
                <Button Clicked="Handle_Clicked" Text = "Press">
            </Button>
                    <Grid VerticalOptions = "FillAndExpand">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="4*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="3*" />
                        <ColumnDefinition Width="2*" />
                        <ColumnDefinition Width="3*" />
                    </Grid.ColumnDefinitions>

                    <ListView ItemsSource="{Binding Lista}" Grid.Row = "0" Grid.Column = "0" Grid.RowSpan = "2" Grid.ColumnSpan = "3" VerticalOptions = "FillAndExpand" HorizontalOptions="FillAndExpand">
                        <ListView.ItemTemplate>
                        <DataTemplate>
                            <TextCell Text="{Binding .}" />
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                <Button Text = "ButtonOver" Opacity="0.5" BackgroundColor = "Fuchsia" Grid.Row="1" Grid.Column = "1"/>

            </Grid>
    </StackLayout>
</ContentPage>

这是结果

The button is "OVER"