在文本框 wp8.1 中放置图标

Question

我正在尝试开发如下图所示的设计。我已经设法实现了如图所示的设计。现在的问题是当我点击文本框时它不显示正在键入的字符。虽然通过调试我检查了变量中的值。

代码片段：

 <Page.Resources>

    <ControlTemplate x:Key="TextBoxControlTemplate1" TargetType="TextBox">
        <Grid Background="#FFBAC0E0">
            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Image  Width="50" Margin="0,0,0,0" Source="Assets/call.png" Height="35" />
            <TextBox Name="alpha" Grid.Column="1" BorderThickness="0,0,0,0" Background="#FFBAC0E0"  PlaceholderText="Search here Kindly" Foreground="Aqua" Height="54" Padding="10"  Margin="0" VerticalAlignment="Stretch"   />


        </Grid>
    </ControlTemplate>

</Page.Resources>

<Grid>
    <TextBox Template="{StaticResource TextBoxControlTemplate1}" />
</Grid>

Answer 1

修改控件的默认样式总是比创建自己的模板更好。因此，您可以使用适用于您的场景的这个：

   <TextBox
            Height="54"
            Margin="0"
            VerticalAlignment="Stretch"
            Background="#FFBAC0E0"
            BorderThickness="0"
            Foreground="Aqua"
            Padding="10"
            PlaceholderText="Search here Kindly">
            <TextBox.Style>
                <Style TargetType="TextBox">
                    <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
                    <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
                    <Setter Property="Foreground" Value="{ThemeResource TextBoxForegroundThemeBrush}" />
                    <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextSelectionHighlightColorThemeBrush}" />
                    <Setter Property="Background" Value="{ThemeResource TextBoxBackgroundThemeBrush}" />
                    <Setter Property="BorderBrush" Value="{ThemeResource TextBoxBorderThemeBrush}" />
                    <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" />
                    <Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}" />
                    <Setter Property="FontSize" Value="{ThemeResource ContentControlFontSize}" />
                    <Setter Property="TextWrapping" Value="NoWrap" />
                    <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="Margin" Value="{ThemeResource TextControlMarginThemeThickness}" />
                    <Setter Property="VerticalAlignment" Value="Top" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TextBox">
                                <Grid Background="Transparent">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Disabled">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledBackgroundThemeBrush}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledBorderThemeBrush}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledForegroundThemeBrush}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledForegroundThemeBrush}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledHeaderForegroundThemeBrush}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Normal">
                                                <Storyboard>
                                                    <DoubleAnimation
                                                        Duration="0"
                                                        Storyboard.TargetName="BorderElement"
                                                        Storyboard.TargetProperty="Opacity"
                                                        To="{ThemeResource TextControlBorderThemeOpacity}" />
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Focused">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextSelectionHighlightColorThemeBrush}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <DoubleAnimation
                                                        Duration="0"
                                                        Storyboard.TargetName="PlaceholderTextContentPresenter"
                                                        Storyboard.TargetProperty="Opacity"
                                                        To="0" />
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxFocusedBackgroundThemeBrush}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <Image
                                        Grid.RowSpan="2"
                                        Grid.Column="0"
                                        Width="50"
                                        Height="35"
                                        Margin="0,0,0,0"
                                        Source="Assets/call.png" />
                                    <Border
                                        x:Name="BorderElement"
                                        Grid.Row="1"
                                        Grid.Column="1"
                                        Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}" />
                                    <ContentPresenter
                                        x:Name="HeaderContentPresenter"
                                        Grid.Row="0"
                                        Grid.Column="1"
                                        Margin="{ThemeResource TextControlHeaderMarginThemeThickness}"
                                        Content="{TemplateBinding Header}"
                                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                                        Style="{StaticResource HeaderContentPresenterStyle}" />
                                    <ScrollViewer
                                        x:Name="ContentElement"
                                        Grid.Row="1"
                                        Grid.Column="1"
                                        MinHeight="{ThemeResource TextControlThemeMinHeight}"
                                        Margin="{TemplateBinding BorderThickness}"
                                        AutomationProperties.AccessibilityView="Raw"
                                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                        HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                        IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                        IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                        IsTabStop="False"
                                        IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                        Padding="{TemplateBinding Padding}"
                                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                        VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                        ZoomMode="Disabled" />
                                    <ContentControl
                                        x:Name="PlaceholderTextContentPresenter"
                                        Grid.Row="1"
                                        Grid.Column="1"
                                        Margin="{TemplateBinding BorderThickness}"
                                        Content="{TemplateBinding PlaceholderText}"
                                        FontSize="{ThemeResource ContentControlFontSize}"
                                        Foreground="{ThemeResource TextBoxPlaceholderTextThemeBrush}"
                                        IsTabStop="False"
                                        Padding="{TemplateBinding Padding}" />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TextBox.Style>
        </TextBox>

在文本框 wp8.1 中放置图标

Placing icon in textbox wp8.1

c#

xaml

textbox

windows-phone-8.1