如何在Windows Phone中創建帶下劃線的輸入文本字段？

Question

什麼是最簡單和正確的方式來創建一個TextBox，它看起來像一個帶下劃線的輸入文本字段？您可以在Messaging Hub屏幕頂部和諾基亞傳輸中查看我的意思的例子。

我應該用什麼技術來實現它？

Answer 1

可能這是一個簡單的方法：

• 首先，文本框和邊框透明的設置默認背景。

• 那麼你可以使用肖恩Kendrot的回答得到一個下劃線（因爲你需要的文本內的標籤）

• 而且最終，使聚焦文本框背景透明的，你必須按照這個Change focused textbox background/foreground in WP7

或者您可以創建一個自定義文本框模板以透明背景並插入下劃線。

在我看來，最好的方法是嘗試創建一個UserControl具有Label屬性，您可以在需要時動態設置文本框標籤。

我只是創造這一個：

namespace Test 
{ 
    public partial class CustomTextbox : UserControl 
    { 
     public readonly DependencyProperty LabelProperty = DependencyProperty.Register("Label", typeof(string), typeof(CustomTextbox), null); 
     public readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(CustomTextbox), null); 

     /// <summary> 
     /// Get/set label 
     /// </summary> 
     public string Label 
     { 
      get 
      { 
       return (string)GetValue(LabelProperty); 
      } 
      set 
      { 
       SetValue(LabelProperty, value); 
      } 
     } 

     /// <summary> 
     /// Get/set text property 
     /// </summary> 
     public string Text 
     { 
      get 
      { 
       return (string)GetValue(TextProperty); 
      } 
      set 
      { 
       SetValue(TextProperty, value); 
      } 
     } 

     public CustomTextbox() 
     { 
      InitializeComponent(); 

      DataContext = this; 
     } 
    } 
} 

XAML：

<Border BorderBrush="White" BorderThickness="0,0,0,1"> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="auto" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 
      <TextBlock Text="{Binding Path=Label}" VerticalAlignment="Bottom" Margin="0,0,0,2" /> 
      <TextBox Text="{Binding Path=Text}" FontSize="22" Grid.Column="1" Background="Transparent" BorderThickness="1" Foreground="White" Margin="0" Padding="10,0" VerticalAlignment="Bottom"> 
       <TextBox.Template> 
        <ControlTemplate TargetType="TextBox"> 
         <Grid Background="Transparent"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Normal" /> 
            <VisualState x:Name="MouseOver" /> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="Visibility"> 
               <DiscreteObjectKeyFrame KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <Visibility>Collapsed</Visibility> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="Visibility"> 
               <DiscreteObjectKeyFrame KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <Visibility>Visible</Visibility> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="ReadOnly"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="Visibility"> 
               <DiscreteObjectKeyFrame KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <Visibility>Collapsed</Visibility> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="Visibility"> 
               <DiscreteObjectKeyFrame KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <Visibility>Visible</Visibility> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="Background"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="BorderBrush"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyContent" Storyboard.TargetProperty="Foreground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxReadOnlyBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
           <VisualStateGroup x:Name="FocusStates"> 
            <VisualState x:Name="Focused"> 
             <Storyboard> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Unfocused" /> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 

          <ContentControl x:Name="ContentElement" 
               Margin="{StaticResource PhoneTextBoxInnerMargin}" 
               HorizontalContentAlignment="Stretch" 
               VerticalContentAlignment="Stretch" 
               BorderThickness="0" 
               Padding="{TemplateBinding Padding}" /> 

          <Border x:Name="DisabledOrReadonlyBorder" 
            Margin="{StaticResource PhoneTouchTargetOverhang}" 
            Background="Transparent" 
            BorderBrush="{StaticResource PhoneDisabledBrush}" 
            BorderThickness="{TemplateBinding BorderThickness}" 
            Visibility="Collapsed"> 
           <TextBox x:Name="DisabledOrReadonlyContent" 
             Background="Transparent" 
             FontFamily="{TemplateBinding FontFamily}" 
             FontSize="{TemplateBinding FontSize}" 
             FontStyle="{TemplateBinding FontStyle}" 
             FontWeight="{TemplateBinding FontWeight}" 
             Foreground="{StaticResource PhoneDisabledBrush}" 
             IsReadOnly="True" 
             SelectionBackground="{TemplateBinding SelectionBackground}" 
             SelectionForeground="{TemplateBinding SelectionForeground}" 
             Text="{TemplateBinding Text}" 
             TextAlignment="{TemplateBinding TextAlignment}" 
             TextWrapping="{TemplateBinding TextWrapping}" 
           BorderThickness="0"/> 
          </Border> 
         </Grid> 
        </ControlTemplate> 
       </TextBox.Template> 
      </TextBox> 
     </Grid> 
    </Border> 
</UserControl> 

使用：

<local:CustomTextbox Label="label:" Text="text"></local:CustomTextbox> 

Answer 2

覆蓋文本框的Template到沒有背景或邊框，然後把標籤周圍邊框與BorderThickness="0 0 0 1"

Answer 3

的文本框模仿那些頁面，你會想包裝一個文本塊和邊框中的文本框。這應該讓你開始。

<Border BorderBrush="White" BorderThickness="0,0,0,2"> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <TextBlock Text="To:" Style="{StaticResource PhoneTextTitle2Style}" Margin="12,5" VerticalAlignment="Bottom"/> 
      <TextBox Grid.Column="1" Background="Transparent" BorderThickness="0" Foreground="{StaticResource PhoneSubtleBrush}" Text="This is a test" 
        VerticalAlignment="Bottom" /> 
     </Grid> 
    </Border>