Выровнять BoxView по вертикали в ячейке сетки

Question

При использовании следующего макета и стилей BoxView не центрируется по вертикали, поэтому он выравнивается по метке.Как мне этого добиться?

<Grid Grid.Column="1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="10" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <BoxView Grid.Column="0" BackgroundColor="Red"></BoxView>
    <Label Grid.Column="1" x:Name="lbl1"/>
</Grid>

<Style TargetType="BoxView">
    <Setter Property="WidthRequest" Value="10" />
    <Setter Property="HeightRequest" Value="10" />
    <Setter Property="VerticalOptions" Value="Center" />
    <Setter Property="HorizontalOptions" Value="Center" />
</Style>
<Style TargetType="Label">
    <Setter Property="FontSize" Value="12" />
    <Setter Property="YAlign" Value="Center" />
</Style>

При настройке VerticalOptions на Start или End коробка должна располагаться вплотную к верхней части илидно соответственно.Так что, похоже, он неправильно выполняет центральное выравнивание.

Answer 1

При борьбе с текстом, не выровненным по вертикали:

1. Попробуйте выполнить следующее: установите для метки

VerticalOptions="Fill"

VerticalTextAlignment="Center"

Рассмотрим случай, когда ваши элементы выровнены по вертикали, но не выглядят так из-за настроек создателя шрифта, когда шрифт добавляет больше места для нижнего или верхнего ломаного выравнивания.Это может быть решено с помощью пользовательской системы рендеринга или с помощью глупой

TranslationY="1"

или "-0.5" независимо от того ...

Answer 2

1) Попробуйте добавить явное RowDefinition и его высоту;

2) Попробуйте настроить FontSize метки на размер BoxView;

Или пакостный хак :Вы можете добавить верхнее поле в BoxView.

Answer 3

Вам также необходимо использовать это на этикетке:

<Setter Property="VerticalOptions" Value="Center" />

Ваш код просто выравнивает текстовую позицию внутри этикетки, а не позицию самой этикетки.

Answer 4

Используйте CenterAndExpand вместо

<Style TargetType="BoxView">
    <Setter Property="WidthRequest" Value="10" />
    <Setter Property="HeightRequest" Value="10" />
    <Setter Property="VerticalOptions" Value="CenterAndExpand" />
    <Setter Property="HorizontalOptions" Value="Center" />
</Style>

Обновление: Вот очень хорошее объяснение разницы.

Надеюсь, это поможет .-