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： @Xavier Xie - MSFT和@Jeff R.只有在显示应用按钮的标签时才会找到方法，当它们不是文本框时似乎没有对齐。 我正在寻找一种方法，当它们显示时没有显示和。（所以对齐必须以某种方式自动改变当标签显示或不显示时）。如果那是不可能的，那么当标签没有显示时，我至少要寻找它（不像它们那样）。

Answer 1

您可以尝试为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更新]

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

我正在寻找一种方法来使用标签和无标签对它进行梳理。我将更新我的问题以明确解释。

要实现目标，请先检查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将在不同的视觉状态下动态更改。因此，我们需要定义一个转换器来计算值。

转换器类如下：

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">

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

2 个答案: