制作一个看起来像带下划线的输入文本字段的 TextBox 的最简单和正确的方法是什么？您可以在 Messaging Hub 和 Nokia Transport 的屏幕顶部看到我的意思的示例。
我应该使用什么技术来实现它？
问问题
1400 次
3 回答
2
覆盖文本框Template没有背景或边框，然后在标签和文本框周围放置一个边框BorderThickness="0 0 0 1"
于 2012-07-20T21:48:47.147 回答
1
为了模仿这些页面，您需要将文本块和文本框包装在边框中。这应该让你开始。
<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>
于 2012-07-20T23:03:13.280 回答
1
可能这是一个简单的方法：
首先，将文本框和边框的默认背景设置为透明。
然后您可以使用 Shawn Kendrot 的答案来获得下划线（因为您需要在文本框中添加标签）
最后，要使焦点文本框背景透明，您必须在 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>
于 2012-07-21T08:32:37.767 回答