UWP TextBox VerticalContentAlignment

Question

Ich habe das folgende Problem gestellt: Ich kann Inhalte in TextBox nicht vertikal ausrichten. Ich habe Bild-Symbol und TextBox für Benutzereingabe neben, aber Text in TextBox hat standardmäßig oben Ausrichtung. Ich kann es ändern, indem ich setze, aber dann wird die Höhe des TextBox weniger als ich brauche (es sollte 43px Höhe haben). Ich habe versucht VerticalContentAlignment="Center, aber es funktioniert auch nicht. Ich kenne nur eine mögliche Lösung: Setzen Sie padding in TextBox, aber ich mag diese Idee nicht. Vielleicht gibt es andere Lösungen, die ich nicht kenne?

Vielen Dank im Voraus!

Hier ist ein Teil meiner Code:

<Grid Margin="15,0,15,10"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="Auto" /> 
        <ColumnDefinition Width="*" /> 
       </Grid.ColumnDefinitions> 
       <Image Grid.Column="0" 
         Source="/Assets/TextInputIcons/Money.png" 
         Style="{StaticResource InputFieldIconsStyle}" /> 
       <TextBox Grid.Column="1" 
         PlaceholderText="Sum" 
         Style="{StaticResource NumberedTextBox}" /> 
      </Grid> 

Und Beispielbild:

Answer 1

Es ist leicht wie folgt durch die Schaffung einer Art getan werden kann:

• Rechtsklick auf das Textfeld, Vorlage bearbeiten => Kopie erstellen.
• Am unteren Rand des erzeugten Artblick für (Scroll x: Name = "Content ") für den Inhalt und (Content x: Name =" PlaceholderTextContentPresenter") für den Text Platzhalter. Fügen Sie (VerticalAlignment = "Center") zu beiden hinzu.

Beispiel:

<Page.Resources> 
     <Style x:Key="CenterTextBoxStyle" TargetType="TextBox"> 
      <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}"/> 
      <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}"/> 
      <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> 
      <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltHighBrush}"/> 
      <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeDisabledLowBrush}"/> 
      <Setter Property="SelectionHighlightColor" Value="{ThemeResource SystemControlHighlightAccentBrush}"/> 
      <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}"/> 
      <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/> 
      <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/> 
      <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto"/> 
      <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/> 
      <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/> 
      <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/> 
      <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/> 
      <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="TextBox"> 
         <Grid> 
          <Grid.Resources> 
           <Style x:Name="DeleteButtonStyle" TargetType="Button"> 
            <Setter Property="Template"> 
             <Setter.Value> 
              <ControlTemplate TargetType="Button"> 
               <Grid x:Name="ButtonLayoutGrid" BorderBrush="{ThemeResource TextBoxButtonBorderThemeBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{ThemeResource TextBoxButtonBackgroundThemeBrush}"> 
                <VisualStateManager.VisualStateGroups> 
                 <VisualStateGroup x:Name="CommonStates"> 
                  <VisualState x:Name="Normal"/> 
                  <VisualState x:Name="PointerOver"> 
                   <Storyboard> 
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="GlyphElement"> 
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}"/> 
                    </ObjectAnimationUsingKeyFrames> 
                   </Storyboard> 
                  </VisualState> 
                  <VisualState x:Name="Pressed"> 
                   <Storyboard> 
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonLayoutGrid"> 
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}"/> 
                    </ObjectAnimationUsingKeyFrames> 
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="GlyphElement"> 
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltChromeWhiteBrush}"/> 
                    </ObjectAnimationUsingKeyFrames> 
                   </Storyboard> 
                  </VisualState> 
                  <VisualState x:Name="Disabled"> 
                   <Storyboard> 
                    <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonLayoutGrid"/> 
                   </Storyboard> 
                  </VisualState> 
                 </VisualStateGroup> 
                </VisualStateManager.VisualStateGroups> 
                <TextBlock x:Name="GlyphElement" AutomationProperties.AccessibilityView="Raw" Foreground="{ThemeResource SystemControlForegroundChromeBlackMediumBrush}" FontStyle="Normal" FontSize="12" FontFamily="{ThemeResource SymbolThemeFontFamily}" HorizontalAlignment="Center" Text="&#xE10A;" VerticalAlignment="Center"/> 
               </Grid> 
              </ControlTemplate> 
             </Setter.Value> 
            </Setter> 
           </Style> 
          </Grid.Resources> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="*"/> 
           <ColumnDefinition Width="Auto"/> 
          </Grid.ColumnDefinitions> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="Auto"/> 
           <RowDefinition Height="*"/> 
          </Grid.RowDefinitions> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="HeaderContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BorderElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledLowBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledLowBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Normal"/> 
            <VisualState x:Name="PointerOver"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightChromeAltLowBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundHoverOpacity}"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Focused"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlPageTextChromeBlackMediumLowBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundChromeWhiteBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundFocusedOpacity}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundChromeBlackHighBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RequestedTheme" Storyboard.TargetName="ContentElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="Light"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
           <VisualStateGroup x:Name="ButtonStates"> 
            <VisualState x:Name="ButtonVisible"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DeleteButton"> 
               <DiscreteObjectKeyFrame KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <Visibility>Visible</Visibility> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="ButtonCollapsed"/> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Border x:Name="BackgroundElement" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Margin="{TemplateBinding BorderThickness}" Opacity="{ThemeResource TextControlBackgroundRestOpacity}" Grid.Row="1" Grid.RowSpan="1"/> 
          <Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1"/> 
          <ContentPresenter x:Name="HeaderContentPresenter" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}" FontWeight="Normal" Margin="0,0,0,8" Grid.Row="0" Visibility="Collapsed" x:DeferLoadStrategy="Lazy"/> 
          <ScrollViewer x:Name="ContentElement" VerticalAlignment="Center" AutomationProperties.AccessibilityView="Raw" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="Disabled"/> 
          <ContentControl x:Name="PlaceholderTextContentPresenter" VerticalAlignment="Center" Grid.ColumnSpan="2" Content="{TemplateBinding PlaceholderText}" Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}" IsHitTestVisible="False" IsTabStop="False" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1"/> 
          <Button x:Name="DeleteButton" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="1" FontSize="{TemplateBinding FontSize}" IsTabStop="False" Margin="{ThemeResource HelperButtonThemePadding}" MinWidth="34" Grid.Row="1" Style="{StaticResource DeleteButtonStyle}" Visibility="Collapsed" VerticalAlignment="Stretch"/> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Page.Resources> 

Auf diese Weise den Text und der PlaceholderText immer im Mittelpunkt bleiben, egal, was die Höhe oder die Schriftart des TextBox ist.

Answer 2

ich das Problem, dass Sie mögen, und ich weiß, dass die Schriftgröße error.And TextBox kann es Höhe sicher machen die Schriftgröße, aber Sie setzen VerticalContentAlignment="Center" Und ich habe eine Lösung, die ein Border

machen

und es ist BorderThickness als BorderThickness der TextBox und es ist Pinsel wie der Pinsel der TextBox. Und stellen Sie die TextBox VerticalAlignment="Center" und BorderThickness ="0"

Answer 3

Sie müssen die Standardvorlage bearbeiten diese Arbeit zu machen, werden Sie feststellen, es gibt eine ScrollViewer es in, wenn Sie setzen VerticalAlignment="True" dann sollte es den Trick tun, aber bemerkte ich wirklich seltsame Verhalten in einer meiner area per wo die Der Inhalt blitzte aus irgendeinem Grund wie verrückt auf.

Da ich die ScrollViewer sowieso nicht gebraucht habe, und es scheint, dass Sie auch nicht, ich ersetzte es nur mit einem ContentPresenter und stellen Sie dann VerticalContentAlignment="True".

können Sie bei Sapan's answer schauen, um zu sehen, was der Standard-Stil aussieht, das nehmen, ersetzen Sie die ScrollViewer mit einem ContentPresenter, die kaputten XAML löschen und VerticalContentAlignment="True" hinzuzufügen.

Es würde wie folgt aussehen:

<ContentPresenter x:Name="ContentElement" Grid.Column="1" Grid.Row="1" 
        AutomationProperties.AccessibilityView="Raw" 
        Margin="{TemplateBinding BorderThickness}" 
        Padding="{TemplateBinding Padding}" 
        VerticalContentAlignment="Center"/> 

Man sollte meinen, dies wäre einfacher zu erreichen ...