2016-03-31 33 views
3

Aşağıdaki sorunla karşı karşıya kaldım: İçeriği TextBox içinde dikey olarak hizalayamıyorum. Yanında kullanıcı girişi için resim simgesi ve TextBox var, ancak TextBox'taki metinler varsayılan olarak Üst Hizalama'ya sahip. VerticalAlignment="Center"'u ayarlayarak bunu değiştirebilirim, ancak TextBox'un yüksekliği ihtiyaç duyduğumdan daha az olur (43px yüksekliğe sahip olmalıdır). VerticalContentAlignment="Center'u denedim, ancak çalışmaz. Tek bir çözüm biliyorum: TextBox'ta padding'u ayarlayın, ancak bu fikri sevmiyorum. Belki bilmediğim başka çözümler var mı?UWP TextBox VerticalContentAlignment

Şimdiden teşekkürler!

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

Ve örnek resim::

enter image description here

+0

Düzenleme metin kutusu stili ve düzenleme bağlantısını varsayılan metin kutusu stilleri demek – Archana

+0

deneyin? –

cevap

3

Kolayca şöyle bir stil oluşturarak yapılabilir ayarlayın:

  • sağ TextBox tıklayın Düzen Şablon => Bir Kopyasını oluşturun. için oluşturulan stil görünüm altında
  • (ScrollViewer x: Name = " ContentElement ") içeriği ve (ContentControl x: Name =" PlaceholderTextContentPresenter") için metin yer tutucu için. Her ikisine de ( VerticalAlignment = "Merkez") ekleyin.

Örnek:

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

Metin ve PlaceholderText olursa olsun her zaman yükseklik veya TextBox yazı ne merkezde kalmak Bu şekilde.

1

Senden hoşlanıyorum sorun var ve biliyorum ki Yazı boyutu error.And İşte

benim kod parçasıdır TextBox, Yazı tipi boyutunun yüksekliğinden emin olabilirsiniz, ancak VerticalContentAlignment="Center" 'u ayarladınız Ve bir çözümüm var, bu da bir Sınır

<Border Grid.Column="1"> 
     <TextBox/> 
    </Border> 

ve TextBox'un BorderThickness'ı olarak BorderThickness ve TextBox'ın fırçası olarak fırçalıyor. Ve TextBox VerticalAlignment="Center" ve BorderThickness ="0"

0

Bu işi yapmak için varsayılan şablonu düzenlemelisiniz, orada bir ScrollViewer olduğunu fark edeceksiniz, VerticalAlignment="True"'u ayarladıysanız, o zaman hile yapmalısınız, ama BUT, metin kutularımın birinde gerçekten garip davranışı fark ettim. içerik bazı nedenlerle çılgın gibi yanıp sönüyordu.

Zaten ScrollViewer'a gereksinim duymadığımdan ve siz de öyle değil gibi görünüyor, ben sadece bir ContentPresenter ile değiştirdim ve daha sonra VerticalContentAlignment="True" değerini ayarlayın.

Sen, bir ContentPresenter ile ScrollViewer yerine, al, varsayılan Stil neye benzediğini görmek kırık XAML silin ve VerticalContentAlignment="True" eklemek için Sapan's answer bakabilirsiniz.Bunun gibi bir şey olmazdı

:

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

Bunu gerçekleştirmek için daha kolay olacağını düşünmek istiyorum ...