Xamarin Forms - 堆栈布局中的中心标题

Posted 2023-02-26

【中文标题】Xamarin Forms - 堆栈布局中的中心标题

【英文标题】：Xamarin Forms - center title in a stacklayout

【发布时间】：2019-05-09 15:05:57

【问题描述】：

下面的屏幕截图显示了一个包含汉堡菜单和标题的标题。请注意标题如何以边界区域（红色框）为中心。如何让标题以手机宽度为中心，但将汉堡菜单留在原处？

这是创建标题区域的代码...

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WP.MobileMidstream.Device.Pages.RunSheetHeader">
    <ContentView.Resources>
        <Style x:Key="HeaderStyle" TargetType="StackLayout">
            <Setter Property="BackgroundColor" Value="#00458C" />
        </Style>
    </ContentView.Resources>
    <ContentView.Content>
        <StackLayout Orientation="Horizontal"
                     HorizontalOptions="FillAndExpand"
                     Style="StaticResource HeaderStyle">
            <StackLayout.HeightRequest>
                <OnPlatform x:TypeArguments="x:Double">
                    <On Platform="ios">80</On>
                    <On Platform="android">56</On>
                </OnPlatform>
            </StackLayout.HeightRequest>
            <Image Source="hamburger_icon" 
                   Margin="10" />
            <Label VerticalTextAlignment="Center"
                   HorizontalTextAlignment="Center"
                   HorizontalOptions="FillAndExpand"
                   FontSize="20"
                   BackgroundColor="Red"
                   TextColor="White">Daily Run Sheet</Label>
        </StackLayout>
    </ContentView.Content>
</ContentView>

【问题讨论】：

我会改用网格（1 行 x 2 列）。让标签延伸到两个列，然后将汉堡图标放在标签之后的第一个单元格中

我同意@Jason 的观点，您应该为此应用程序使用网格。一般来说，你应该尽量避免StackLayout，因为放在屏幕上非常昂贵。对于 xamarin 表单 ui，Grid 是一个更有用的工具！

【参考方案1】：

@Jason 建议使用 Grid 而不是 StackLayout。这是我想出的作品。谢谢@Jason！

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WP.MobileMidstream.Device.Pages.RunSheetHeader">
    <ContentView.Resources>
        <Style x:Key="HeaderStyle" TargetType="Grid">
            <Setter Property="BackgroundColor" Value="#00458C" />
        </Style>
    </ContentView.Resources>
    <ContentView.Content>
        <Grid Style="StaticResource HeaderStyle">
            <Grid.RowDefinitions>
                <RowDefinition>
                    <RowDefinition.Height>
                        <OnPlatform x:TypeArguments="GridLength">
                            <On Platform="iOS">80</On>
                            <On Platform="Android">56</On>
                        </OnPlatform>
                    </RowDefinition.Height>
                </RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Label Grid.Row="0"
                   Grid.Column="0"
                   Grid.ColumnSpan="2"
                   VerticalTextAlignment="Center"
                   HorizontalTextAlignment="Center"
                   HorizontalOptions="Fill"
                   FontSize="20"
                   TextColor="White">Daily Run Sheet</Label>
            <Image Source="hamburger_icon" 
                   Grid.Row="0"
                   Grid.Column="0"
                   Margin="10" />
        </Grid>
    </ContentView.Content>
</ContentView>