简体   繁体   中英

How to add buttons underneath a Xamarin.Forms list view

Hello I have an app i'm doing in xamrian forms and I have a card styled list view. I want to be able to add 3 buttons underneath the listview one on the left one in the center and one on the right here's my 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="App.HomePage">
  <ListView x:Name="listView" HasUnevenRows="true"  ItemSelected="OnItemSelected">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <Frame Padding="0,0,0,8" BackgroundColor="#d2d5d7">
            <Frame.Content>
              <Frame Padding="15,15,15,15"   OutlineColor="Gray" BackgroundColor="White">
                <Frame.Content>
                  <StackLayout Padding="20,0,0,0"  Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
                    <Image
                          HorizontalOptions="StartAndExpand"
                          Source="{Binding Image}" />
                    <Label Text="{Binding Name}"
                           TextColor="#69add1"
                           FontFamily="OpenSans-Light"
                           FontSize="24"/>
                  </StackLayout>
                </Frame.Content>
              </Frame>
            </Frame.Content>
          </Frame>  

          </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
  </ContentPage>

How would I go about doing this in xaml?

Thank's in advance! :)

Try 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"
             xmlns:local="clr-namespace:Sandbox_Forms"
             x:Class="Sandbox_Forms.MainPage">

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="*"/>
      <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <ListView Grid.Row="0" BackgroundColor="Aqua">
      <!-- Add bindings and data template -->
    </ListView>
    <StackLayout Orientation="Horizontal" Grid.Row="1">
      <Button Text="Button1" HorizontalOptions="FillAndExpand"/>
      <Button Text="Button2" HorizontalOptions="FillAndExpand"/>
      <Button Text="Button3" HorizontalOptions="FillAndExpand"/>
    </StackLayout>
  </Grid>

</ContentPage>

This will limit your ListView to only fill the space that your buttons do not occupy. The output should look something like this: UWP Desktop示例

<StackLayout>
  <ListView>
    ...
  </ListView>
  <StackLayout Orientation="Horizontal">
    <Button ... />
    <Button ... />
    <Button ... />
  </StackLayout>
</StackLayout>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM