XAML 将元素拉伸到页面底部

nr9pn0ug  于 2022-12-07  发布在  其他
关注(0)|答案(1)|浏览(148)

我正在开发一个. NET MAUI应用程序。其中一个页面是聊天屏幕。我正在使用TableView记录消息,在它下面有一个条目元素,供用户发送消息。
问题是当发送了太多的聊天消息时,条目不再可见,因为TableView已经超出了页面边界。我想做的是让tablearea继续扩展,直到它和条目到达底部,允许用户滚动聊天消息,并使条目位于屏幕底部。
这是我当前的XAML。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.ChatView"
             Title="ChatView">
    <VerticalStackLayout>
        <TableView Intent="Data" VerticalOptions="Fill">
            <TableRoot>
                <TableSection x:Name="chatTable"/>
            </TableRoot>
        </TableView>
        <Entry Placeholder="Chat" x:Name="chatInput" VerticalOptions="End" Keyboard="Chat"/>
    </VerticalStackLayout>
</ContentPage>

然后使用C#将聊天消息动态插入chatTable。

wfauudbj

wfauudbj1#

一开始你可以尝试使用Grid和ScrollView,例如:

<Grid >
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>
        <ScrollView x:Name="scrollview" Grid.Row="0">
        <TableView Intent="Data" VerticalOptions="Fill">
        <TableRoot>
            <TableSection x:Name="chatTable"/>
        </TableRoot>
        </TableView>
        </ScrollView>
        <Entry Grid.Row="1" Placeholder="Chat" x:Name="chatInput" VerticalOptions="End" Keyboard="Chat"/>
</Grid>

另外,还可以尝试使用滚动视图来包含TableView.如:

<VerticalStackLayout >
        <ScrollView x:Name="scrollview">
        <TableView Intent="Data" VerticalOptions="Fill">
        <TableRoot>
            <TableSection x:Name="chatTable"/>
        </TableRoot>
        </TableView>
        </ScrollView>
        <Entry Placeholder="Chat" x:Name="chatInput" VerticalOptions="End" Keyboard="Chat"/>
       
    </VerticalStackLayout>

最后,您可以尝试使用scrollview来包含VerticalStackLayout,并在scrollview的大小改变时滚动到底部。

<ScrollView x:Name="scrollview">
    <VerticalStackLayout >
        <TableView Intent="Data" VerticalOptions="Fill">
        <TableRoot>
            <TableSection x:Name="chatTable"/>
        </TableRoot>
        </TableView>
        <Entry Placeholder="Chat" x:Name="chatInput" VerticalOptions="End" Keyboard="Chat"/>
    </VerticalStackLayout>
</ScrollView>

Page.cs:

scrollview.SizeChanged += (s, e) =>
    {
        scrollview.ScrollToAsync(chatInput, ScrollToPosition.End, true);
    };

相关问题