TextBox with ControlTemplate - 文本显示问题VS 2017

Question

我正在尝试在XAML中为我的应用程序创建一个文本框控件模板。我使用：

 <ControlTemplate x:Key="TextBoxBoarded" TargetType="TextBox"> 
      <Grid Background="#FFE4E4E4" CornerRadius="5"> 
       <Grid HorizontalAlignment="Left" Width="139"> 
        <TextBlock HorizontalAlignment="Left" Margin="10,0,0,0" TextWrapping="Wrap" Text="{TemplateBinding PlaceholderText}" VerticalAlignment="Center" FontWeight="{TemplateBinding FontWeight}" Foreground="#FF4B4B4B"/> 
       </Grid> 
       <TextBox x:Name="PART_ContentHost" Margin="144,5,5,5" TextWrapping="Wrap" BorderBrush="{x:Null}" BorderThickness="0" PlaceholderText="{TemplateBinding PlaceholderText}" TextReadingOrder="DetectFromContent" Text="{TemplateBinding Text}"/> 
      </Grid> 
     </ControlTemplate> 

的问题是，在那里我有文本=“{TemplateBinding文字}”当我运行应用程序的检查（闪动的竖线，显示你在哪里，在文本编辑）只是停留在文本框的开头，并且文本显示后就会显示出来，以至于无法从文本框中删除任何内容。

有人知道为什么吗？这只是我错过了什么吗？

Answer 1

此处使用绑定会破坏TextBox的现有输入行为。如果您仍然想要TextBox的原始体验，则可以使用TextBox的默认模板而不是ControlTemplate中的TextBox元素。

对于默认模板，您可以在TextBox styles and templates处找到。但请注意，这些样式和资源基于Windows SDK版本10.0.10586.0。对于其他版本，它们可从Windows SDK安装中的\(Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\{SDK version}\Generic\generic.xaml 文件中获得。利用建立14393例如，默认的样式和模板通常是

C：\ Program Files文件（x86）的\的Windows套件\ 10 \设计时\ CommonConfiguration \中性\ UAP \ 10.0.14393.0 \通用\通用。 XAML

一旦你的默认模板，你可以复制它（Grid<ControlTemplate TargetType="TextBox">下），然后把它放到你的ControlTemplate像下面这样。

注意：对于TextBox的视觉状态，我们需要将原始VisualStateManager.VisualStateGroups放在控件模板的根元素下。

<ControlTemplate x:Key="TextBoxBoarded" TargetType="TextBox"> 
    <Grid Background="#FFE4E4E4" CornerRadius="5"> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="CommonStates"> 
       <VisualState x:Name="Disabled"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="HeaderContentPresenter"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlHeaderForegroundDisabled}" /> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BorderElement"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundDisabled}" /> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushDisabled}" /> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundDisabled}" /> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundDisabled}" /> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="Normal" /> 
       <VisualState x:Name="PointerOver"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}" /> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BorderElement"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundPointerOver}" /> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundPointerOver}" /> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}" /> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="Focused"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundFocused}" /> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BorderElement"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundFocused}" /> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushFocused}" /> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundFocused}" /> 
         </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> 

     <Grid HorizontalAlignment="Left" Width="139"> 
      <TextBlock HorizontalAlignment="Left" Margin="10,0,0,0" TextWrapping="Wrap" Text="{TemplateBinding PlaceholderText}" VerticalAlignment="Center" FontWeight="{TemplateBinding FontWeight}" Foreground="#FF4B4B4B" /> 
     </Grid> 
     <Grid Margin="144,5,5,5"> 
      <Grid.Resources> 
       <Style x:Name="DeleteButtonStyle" TargetType="Button"> 
        <Setter Property="Template"> 
         <Setter.Value> 
          <ControlTemplate TargetType="Button"> 
           <Grid x:Name="ButtonLayoutGrid" BorderBrush="{ThemeResource TextControlButtonBorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{ThemeResource TextControlButtonBackground}"> 
            <VisualStateManager.VisualStateGroups> 
             <VisualStateGroup x:Name="CommonStates"> 
              <VisualState x:Name="Normal" /> 
              <VisualState x:Name="PointerOver"> 
               <Storyboard> 
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonLayoutGrid"> 
                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPointerOver}" /> 
                </ObjectAnimationUsingKeyFrames> 
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonLayoutGrid"> 
                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPointerOver}" /> 
                </ObjectAnimationUsingKeyFrames> 
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="GlyphElement"> 
                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPointerOver}" /> 
                </ObjectAnimationUsingKeyFrames> 
               </Storyboard> 
              </VisualState> 
              <VisualState x:Name="Pressed"> 
               <Storyboard> 
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonLayoutGrid"> 
                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPressed}" /> 
                </ObjectAnimationUsingKeyFrames> 
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonLayoutGrid"> 
                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPressed}" /> 
                </ObjectAnimationUsingKeyFrames> 
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="GlyphElement"> 
                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPressed}" /> 
                </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 TextControlButtonForeground}" 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> 
      <Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1" /> 
      <ContentPresenter x:Name="HeaderContentPresenter" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource TextControlHeaderForeground}" FontWeight="Normal" Margin="0,0,0,8" Grid.Row="0" Visibility="Collapsed" x:DeferLoadStrategy="Lazy" /> 
      <ScrollViewer x:Name="ContentElement" 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" Grid.ColumnSpan="2" Content="{TemplateBinding PlaceholderText}" Foreground="{ThemeResource TextControlPlaceholderForeground}" IsHitTestVisible="False" IsTabStop="False" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" /> 
      <Button x:Name="DeleteButton" AutomationProperties.AccessibilityView="Raw" 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> 
    </Grid> 
</ControlTemplate> 

之后，你应该可以像平常一样使用你的ControlTemplate。

<TextBox Height="100" Width="400" PlaceholderText="Hi Test!" Template="{StaticResource TextBoxBoarded}" /> 

为简单起见，我只是将Margin添加到默认模板中。如果您想要更改其他属性，如BorderThickness或BorderBrush，则可以更改默认模板中的相应元素和属性。