XAML 将元素拉伸到页面底部

nr9pn0ug 于 2022-12-07 发布在其他

关注(0)|答案(1)|浏览(151)

我正在开发一个. 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。

xaml

来源：https://stackoverflow.com/questions/73271044/stretch-element-to-bottom-of-page

1条答案

按热度按时间

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);
    };

赞(0）回复(0）举报 2022-12-07

我来回答

XAML 将元素拉伸到页面底部

1条答案

相关问题

热门标签

最新问答