垂直对齐以使命令栏内容内的文本框居中

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 的设计视图来处理网格、相关面板、堆叠面板等，但我还没有找到解决方案。

P.S: 两者 and 都找到了一种方法，仅在显示应用程序按钮的标签时才显示它，而当它们不是文本框似乎未对齐。 我正在寻找一种方法在它们未显示时调整它和在它们显示时。（因此对齐方式必须改变一些当标签显示或不显示时自动方式）。如果那不可能，我正在寻找至少在未显示标签时将其关闭（不像他们的回答）。

Answer 1

由于 CommandBar 是一个内容控件，因此它支持 HorizontalContentAlignment 和 VerticalContentAlignment 属性。试试这个：

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

Answer 2

您可以尝试为 CommandBar 设置 VerticalContentAlignment="Center"，如下所示：

<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更新]

经过大量测试和咨询同事，我们找到了实现目标的方法。

I am looking for a way to aling it both with label and without label. I'll update my question to explain that explicitly.

为了实现您的目标，让我们先检查一下 CommandBar styles and templates。请定位到 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 会在不同的视觉状态下动态变化。所以，我们需要定义一个转换器来计算这个值。

转换器 class 如下所示：

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>

目前，我们已经实现了您的目标。请尝试一下。

垂直对齐以使命令栏内容内的文本框居中

Vertical alignment to center a text box inside a Command bar Content

c#

xaml

uwp

uwp-xaml