c# - 垂直对齐以使文本框位于命令栏内容的中心

我在尝试将命令栏内容中的文本框居中（垂直）时遇到问题。

其实我有这个（看最后三行）：

<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的设计视图尝试处理网格，相对面板，堆栈面板等，但是我没有找到解决方案。



附言：@Xavier Xie - MSFT和@Jeff R.都找到了一种仅在显示应用程序按钮的标签时，而不是文本框似乎未对齐的情况下对其进行提示的方法。我正在寻找一种方法，可以在未显示和显示它们时发出警报。 （因此，无论是否显示标签，对齐方式都必须以某种方式自动更改）。如果这不可能，那么我正在寻找至少在未显示标签时将其收起的标签（不像标签那样）。

最佳答案

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

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

关于c# - 垂直对齐以使文本框位于命令栏内容的中心，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50669125/