时间戳

首页 > 解决方案 > 将 StackLayout 与 Grid 一起使用会将我的按钮推到屏幕外

c# - 将 StackLayout 与 Grid 一起使用会将我的按钮推到屏幕外

问题描述

我试图让我的按钮在我的页面右下方显示“我正在引起问题”，但它被推出了我的模拟器的屏幕。

我已经阅读了有关 StackOverflow 的文档StackLayout并在 StackOverflow 上查找了类似的问题，这是我最接近的......不幸的是没有成功。

我没有使用任何 CSS，如果不需要，我宁愿不使用它。

在此处输入图像描述

<ContentPage>//STANDARD CONTENTPAGE STUFF SUCH AS XMLS TAKEN OUT

<ContentPage.ToolbarItems>
    <ToolbarItem Priority="0" Order="Primary" Text="{Binding Inter}" />
</ContentPage.ToolbarItems>

<ContentPage.Content>
    <StackLayout FlexLayout.Grow="1" Margin="10">
        <CollectionView ItemsSource="{Binding Cb}">
            <CollectionView.ItemsLayout>
                <GridItemsLayout
                    Orientation="Vertical"
                    Span="2"
                    VerticalItemSpacing="5" 
                    HorizontalItemSpacing="5"/>
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Button Text="{Binding Text}" CommandParameter="{Binding CommandParameter}" Command="{Binding Command}" HeightRequest="75" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
        <CollectionView ItemsSource="{Binding Msg}">
            <CollectionView.ItemsLayout>
                <GridItemsLayout
                    Orientation="Vertical"
                    Span="2"
                    VerticalItemSpacing="5" 
                    HorizontalItemSpacing="5"/>
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding .}" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="80*"></ColumnDefinition>
                <ColumnDefinition Width="20*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <StackLayout Grid.Row="0" Grid.Column="1" HorizontalOptions="Center">
                <ButtonText="I am causing problems!"></Button>
            </StackLayout>
        </Grid>
    </StackLayout>
</ContentPage.Content>

标签： c#xamarinxamarin.forms

解决方案

欢迎多姆。问题源于您的 xaml/ui 过于复杂。如果您要删除包含按钮的 Grid 并用普通按钮替换它。您可以根据需要设置该按钮的样式以适合您的 UI。

如果您只用一个按钮替换 Grid-with-button，那么它会自动成为 StackLayout 的直接子级。现在给按钮一个高度为 100 和一个 End 的 Horizo​​ntalOptions，你可能会用你的按钮得到你正在寻找的东西。

我添加了图像和代码，因此您可以轻松复制。感谢您的提问，祝您编程工作顺利。

屏幕右下角的定位按钮

这是你的代码。

<StackLayout FlexLayout.Grow="1" Margin="10">
        <CollectionView ItemsSource="{Binding Cb}">
            <CollectionView.ItemsLayout>
                <GridItemsLayout
                    Orientation="Vertical"
                    Span="2"
                    VerticalItemSpacing="5" 
                    HorizontalItemSpacing="5"/>
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Button Text="{Binding Text}" 
                            CommandParameter="{Binding CommandParameter}" 
                            Command="{Binding Command}" 
                            HeightRequest="75" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
        <CollectionView ItemsSource="{Binding Msg}">
            <CollectionView.ItemsLayout>
                <GridItemsLayout
                    Orientation="Vertical"
                    Span="2"
                    VerticalItemSpacing="5" 
                    HorizontalItemSpacing="5"/>
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding .}" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
        <Button Text="test knop met text" HeightRequest="100" 
                HorizontalOptions="End"/>
</StackLayout>

推荐阅读