问题
The screenshot below shows a header that includes a hamburger menu and a title. Notice how the title is centered on it's bounding area (the red box). How can I get the title to center on the width of the phone, but leave the hamburger menu where it is?
Here is the code that creates the header area...
<?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:
@Jason suggested a Grid instead of the StackLayout. Here is what I came up with that works. Thanks @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>
来源:https://stackoverflow.com/questions/56062421/xamarin-forms-center-title-in-a-stacklayout