时间戳

首页 > 解决方案 > Xamarin，带有按钮的居中标题的xaml titleview

xaml - Xamarin，带有按钮的居中标题的xaml titleview

问题描述

我正在尝试创建一个 TitleView，其中导航标题位于屏幕中间。但在一侧或两侧都有按钮。

（我最近发现帖子说最好将按钮添加到 TitleView 而不是 ContentPage.ToolbarItem 因为我们无法更改文本的颜色。）

相反，我们选择了固定宽度的按钮/间隔，因此我们可以为标题设置一个居中的中间标签。您可以在下面看到结果，不幸的是我将不得不增加按钮的大小以获得更长的文本。我们还支持多种语言，因此文本可能会更长。

在此处输入图像描述

这是xml

    <NavigationPage.TitleView>
        <StackLayout Style="{StaticResource TitleViewStackLayout}">
            <Label Style="{StaticResource TitleViewSpacer}"
                   HorizontalOptions="Start" />
            <Label Text="{tran:Translate Contact_ConfirmEmail}"
                   Style="{StaticResource TitleViewLabel}" />
            <Button Style="{StaticResource TitleViewButton}"
                    HorizontalOptions="End"
                    Text="{tran:Translate Common_Restart}"
                    Command="{Binding ToolbarItemRestartCommand}"/>
        </StackLayout>
    </NavigationPage.TitleView>

这是我们的风格...

            <Style x:Key="TitleViewStackLayout" TargetType="StackLayout">
                <Setter Property="BackgroundColor" Value="{DynamicResource DarkBlue}" />
                <Setter Property="HorizontalOptions" Value="Center" />
                <Setter Property="VerticalOptions" Value="Center" />
                <Setter Property="HorizontalOptions" Value="FillAndExpand" />
                <Setter Property="Orientation" Value="Horizontal" />
                <Setter Property="Margin" Value="0" />
                <Setter Property="Padding" Value="0" />

                <Setter Property="Spacing" Value="0" />
            </Style>
            <Style x:Key="TitleViewLabel" TargetType="Label">
                <Setter Property="TextColor" Value="{DynamicResource White}" />
                <Setter Property="VerticalOptions" Value="Center" />
                <Setter Property="HorizontalOptions" Value="CenterAndExpand" />
                <Setter Property="FontSize" Value="{DynamicResource Title}" />
            </Style>
            <OnPlatform x:Key="TitleViewItemMargin" x:TypeArguments="Thickness" Android="10,0,10,0" iOS="0" />
            <OnPlatform x:Key="TitleViewItemWidth" x:TypeArguments="x:Double" Android="60" iOS="50" />
            <Style x:Key="TitleViewButton" TargetType="Button">
                <Setter Property="BackgroundColor" Value="{DynamicResource DarkBlue}" />
                <Setter Property="TextColor" Value="{DynamicResource White}" />
                <Setter Property="VerticalOptions" Value="Center" />
                <Setter Property="Margin" Value="{DynamicResource TitleViewItemMargin}" />
                <Setter Property="WidthRequest" Value="{DynamicResource TitleViewItemWidth}" />
                <Setter Property="FontSize" Value="16" />
            </Style>
            <Style x:Key="TitleViewSpacer" TargetType="Label">
                <Setter Property="BackgroundColor" Value="{DynamicResource DarkBlue}" />
                <Setter Property="TextColor" Value="{DynamicResource White}" />
                <Setter Property="VerticalOptions" Value="Center" />
                <Setter Property="Margin" Value="{DynamicResource TitleViewItemMargin}" />
                <Setter Property="WidthRequest" Value="{DynamicResource TitleViewItemWidth}" />
                <Setter Property="FontSize" Value="16" />
            </Style>

我确实考虑过使用网格，我知道也可以添加三列全部使用 Grid.Column="0".. 但我可能会有一个与按钮重叠的长标题。我们确实有一些长标题。我想我需要能够设置最大宽度并添加LineBreakMode="TailTruncation"

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

我确实考虑过重复文本但透明以实现相等的宽度，但这不能满足 2 个不同的按钮。

标签： xamlxamarinxamarin.forms

解决方案

正如您所说，使用Grid而不是StackLayout可能会更好。

在您的情况下，您可以将三列的宽度设置为固定百分比值。这样，由于Label的Text是一个long值，它永远不会覆盖右边的Button。

<NavigationPage.TitleView>
    <Grid >

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="0.2*"/>
            <ColumnDefinition Width="0.6*"/>
            <ColumnDefinition Width="0.2*"/>

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Label Grid.Column="0"
               Text="Back"
               MaxLines="1"
               Style="{StaticResource TitleViewSpacer}"
               HorizontalOptions="Start" />
        <Label Grid.Column="1" Text="Email Confirm Email Confirm Email Confirm Email Confirm Email Confirm"
               MaxLines="1"
               LineBreakMode="TailTruncation"  // you could set it or not , both are OK ,it's up to you
               Style="{StaticResource TitleViewLabel}" />
        <Button Grid.Column="2" Style="{StaticResource TitleViewButton}"
                HorizontalOptions="EndAndExpand"
                Text="Restart"
                WidthRequest="80"
                Command="{Binding ToolbarItemRestartCommand}"/>
    </Grid>
</NavigationPage.TitleView>

推荐阅读