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

时间:2019-05-09 15:05:58

标签: xamarin xamarin.forms

下面的屏幕快照显示了一个标题,其中包含一个汉堡菜单和一个标题。注意标题如何在其边界区域(红色框)上居中。如何使标题以手机的宽度为中心,但如何保留汉堡菜单呢?

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

<?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>

enter image description here

1 个答案:

答案 0 :(得分:1)

@Jason建议使用网格而不是StackLayout。这是我想出的方法。谢谢@杰森!

enter image description here

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?