Выравнивание по вертикали для центрирования текстового поля внутри панели команд. Содержимое

Question

У меня проблема с попыткой центрировать (вертикально) текстовое поле внутри содержимого панели команд.

На самом деле у меня есть это (посмотрите на последнюю третью строку):

<CommandBar Grid.Row="0" FlowDirection="LeftToRight">
    <AppBarButton x:Name="Back" Icon="Back" Label="Back" Click="Back_Click"/>
    <AppBarButton x:Name="Forward" Icon="Forward" Label="Forward" Click="Forward_Click"/>
    <AppBarButton x:Name="Refresh" Icon="Refresh" Label="Refresh" Click="Refresh_Click"/>
    <AppBarButton x:Name="Cancel" Icon="Cancel" Label="Cancel" Click="Refresh_Click"/>
    <AppBarButton x:Name="Home" Icon="Home" Label="Home" Click="Home_Click"/>
    <CommandBar.Content>
        <TextBox x:Name="Value"  VerticalAlignment="Center" KeyDown="Value_KeyDown" HorizontalAlignment="Center" Margin="0,0,0,0" Width="880"/>
    </CommandBar.Content>
</CommandBar>

Проблема в том, что я видел некоторые руководства, где люди пишут именно то, что это работает для них ... но для меня нет.Я не уверен, что делать, я пробовал с сеткой, относительными панелями, панелями стека и т. Д., Используя конструкторское представление Visual Studio 2017, но я не нашел решения.

PS: Обе @ Ксавье Кси - MSFT и @ Джефф Р. нашли способ с этим справитьсятолько когда метки кнопок приложения отображаются, когда они не отображаются, текстовое поле кажется не выровненным. Я ищу способ связать его, когда они не показаны и , когда они показаны. (Таким образом, выравнивание должно каким-то образом автоматически изменяться, когда метка отображается илине).Если это невозможно, я ищу хотя бы что-то подобное, когда ярлыки не отображаются (не так, как они).

Answer 1

Вы можете попробовать установить VerticalContentAlignment="Center" для CommandBar следующим образом:

<Page.BottomAppBar>
    <CommandBar Grid.Row="0" FlowDirection="LeftToRight" VerticalContentAlignment="Center">
        <AppBarButton x:Name="Back" Icon="Back" Label="Back" VerticalAlignment="Center" VerticalContentAlignment="Center"/>
        <AppBarButton x:Name="Forward" Icon="Forward" Label="Forward" VerticalAlignment="Bottom" VerticalContentAlignment="Center"/>
        <AppBarButton x:Name="Refresh" Icon="Refresh" Label="Refresh" VerticalContentAlignment="Center"/>
        <AppBarButton x:Name="Cancel" Icon="Cancel" Label="Cancel" VerticalContentAlignment="Center"/>
        <AppBarButton x:Name="Home" Icon="Home" Label="Home" VerticalContentAlignment="Center"/>
        <CommandBar.Content>
            <TextBox x:Name="Value"  Width="880"/>
        </CommandBar.Content>
    </CommandBar>
</Page.BottomAppBar>

[Обновлено 2018/6/8]

[Обновлено 2018/6/14]

После многих испытаний и консультаций с моими коллегами мы нашли способ достичь вашей цели.

Я ищу способ объединить ее как с меткой, так и без метки.Я обновлю свой вопрос, чтобы объяснить это явно.

Чтобы достичь цели, давайте сначала проверим Стили и шаблоны CommandBar .Пожалуйста, найдите CompactOpenUp VisualState.Вы можете видеть, что он применяет анимацию к ContentTransform и меняет положение Y на оси.Вот почему текстовое поле будет выровнено по вертикали при открытии CommandBar.

<VisualState x:Name="CompactOpenUp">
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentTransform" Storyboard.TargetProperty="Y">
                                <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding TemplateSettings.CompactVerticalDelta, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                            </DoubleAnimationUsingKeyFrames>
......

Вдохновленный этим, мы также можем динамически изменить положение оси Y текстового поля, чтобы сделать его выровненным по вертикали при закрытии CommandBar.Затем давайте перейдем к ContentControl в стиле.Этот элемент управления фактически используется для размещения вашего TextBox.Таким образом, мы можем определить для него TranslateTransform следующим образом:

<ContentControl x:Name="ContentControl" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                        <ContentControl.RenderTransform>
                            <TranslateTransform x:Name="ContentControlTransform"></TranslateTransform>
                        </ContentControl.RenderTransform>
</ContentControl>

После этого, я полагаю, вы знаете, что нам нужно определить анимацию в визуальном состоянии CompactClosed.Но вам нужно подумать о том, подходит ли значение оси Y.Как рассчитать это значение?Давайте проверим визуальное состояние CompactOpenUp.Он связывает TemplateSettings.CompactVerticalDelta как свою Y позицию оси.CompactVerticalDelta будет изменяться динамически в другом визуальном состоянии.Итак, нам нужно определить преобразователь для вычисления значения.

Класс преобразователя, подобный следующему:

public class CompactVerticalDeltaConverter:IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {

        return (double)value/2;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

Затем визуальное состояние CompactClosed наконец должно выглядеть следующим образом:

<VisualState x:Name="CompactClosed">
        <Storyboard>
             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentControlTransform" Storyboard.TargetProperty="Y">
                  <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding TemplateSettings.CompactVerticalDelta, RelativeSource={RelativeSource Mode=TemplatedParent},Converter={StaticResource CompactVerticalDeltaConverter}}"/>
             </DoubleAnimationUsingKeyFrames>
         </Storyboard>
</VisualState>

На данный момент мы достигли вашей цели.Пожалуйста, попробуйте.

Answer 2

Поскольку CommandBar является элементом управления содержимым, он поддерживает свойства HorizontalContentAlignment и VerticalContentAlignment.Попробуйте это:

<CommandBar Grid.Row="0" FlowDirection="LeftToRight" VerticalContentAlignment="Center">