Personnalisation d'un TextBox pour qu'il ressemble à un bloc de texte dans UWP

Question

Je suis nouveau dans XAML et Blend mais voici ce que j'essaie de faire. Je développe une application où je dois placer un TextBox (ou n'importe quel contrôle d'entrée) mais ne devrait pas avoir les propriétés d'un TextBox. S'il vous plaît se référer à l'image ci-dessous.

Je veux de l'aide pour implémenter les fonctionnalités mentionnées ci-dessous.

1. Sur TAP - Il devrait me permettre de modifier les valeurs, sans mettre en évidence la zone d'arrière-plan - la chose qui habituellement TextBoxes faire
2. Je ne ai pas besoin frontière
3. Une fois que j'arrête l'édition et appuyez en dehors de la le contrôle, il devrait ressembler à un TextBlock, tapotant laissez à nouveau vous modifiez normalement

Answer 1

Vous devez modifier le style par défaut TextBox que vous pouvez trouver here.

Vous pourriez finir avec quelque chose comme ceci:

<Style x:Key="TransparentTextBox" TargetType="TextBox"> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="BorderBrush" Value="Transparent"/> 
    <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.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground"> 
                   <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}"/> 
                  </ObjectAnimationUsingKeyFrames> 
                 </Storyboard> 
                </VisualState> 
                <VisualState x:Name="Pressed"> 
                 <Storyboard> 
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background"> 
                   <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}"/> 
                  </ObjectAnimationUsingKeyFrames> 
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground"> 
                   <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltChromeWhiteBrush}"/> 
                  </ObjectAnimationUsingKeyFrames> 
                 </Storyboard> 
                </VisualState> 
                <VisualState x:Name="Disabled"> 
                 <Storyboard> 
                  <DoubleAnimation Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/> 
                 </Storyboard> 
                </VisualState> 
               </VisualStateGroup> 
              </VisualStateManager.VisualStateGroups> 

              <TextBlock x:Name="GlyphElement" 
                 Foreground="{ThemeResource SystemControlForegroundChromeBlackMediumBrush}" 
                 VerticalAlignment="Center" 
                 HorizontalAlignment="Center" 
                 FontStyle="Normal" 
                 FontSize="12" 
                 Text="&#xE10A;" 
                 FontFamily="{ThemeResource SymbolThemeFontFamily}" 
                 AutomationProperties.AccessibilityView="Raw" 
                 /> 
             </Grid> 
            </ControlTemplate> 
           </Setter.Value> 
          </Setter> 
         </Style> 
        </Grid.Resources> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"/> 
          <VisualState x:Name="PointerOver"/> 
          <VisualState x:Name="Focused"/> 
          <VisualState x:Name="Disabled"/> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="ButtonStates"> 
          <VisualState x:Name="ButtonVisible"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DeleteButton" Storyboard.TargetProperty="Visibility"> 
             <DiscreteObjectKeyFrame KeyTime="0"> 
              <DiscreteObjectKeyFrame.Value> 
               <Visibility>Visible</Visibility> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="ButtonCollapsed"/> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 

        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="*"/> 
         <ColumnDefinition Width="Auto"/> 
        </Grid.ColumnDefinitions> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto"/> 
         <RowDefinition Height="*"/> 
        </Grid.RowDefinitions> 

        <Border x:Name="BackgroundElement" 
          Grid.Row="1" 
          Background="{TemplateBinding Background}" 
          Margin="{TemplateBinding BorderThickness}" 
          Opacity="{ThemeResource TextControlBackgroundRestOpacity}" 
          Grid.ColumnSpan="2" 
          Grid.RowSpan="1" 
          /> 
        <Border x:Name="BorderElement" 
          Grid.Row="1" 
          BorderBrush="{TemplateBinding BorderBrush}" 
          BorderThickness="{TemplateBinding BorderThickness}" 
          Grid.ColumnSpan="2" 
          Grid.RowSpan="1" 
          /> 
        <ContentPresenter x:Name="HeaderContentPresenter" 
             x:DeferLoadStrategy="Lazy" 
             Visibility="Collapsed" 
             Grid.Row="0" 
             Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}" 
             Margin="0,0,0,8" 
             Grid.ColumnSpan="2" 
             Content="{TemplateBinding Header}" 
             ContentTemplate="{TemplateBinding HeaderTemplate}" 
             FontWeight="Normal" 
             /> 
        <ScrollViewer x:Name="ContentElement" 
            Grid.Row="1" 
            HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" 
            HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" 
            VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" 
            VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" 
            IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" 
            IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" 
            IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" 
            Margin="{TemplateBinding BorderThickness}" 
            Padding="{TemplateBinding Padding}" 
            IsTabStop="False" 
            AutomationProperties.AccessibilityView="Raw" 
            ZoomMode="Disabled" 
            /> 
        <ContentControl x:Name="PlaceholderTextContentPresenter" 
            Grid.Row="1" 
            Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}" 
            Margin="{TemplateBinding BorderThickness}" 
            Padding="{TemplateBinding Padding}" 
            IsTabStop="False" 
            Grid.ColumnSpan="2" 
            Content="{TemplateBinding PlaceholderText}" 
            IsHitTestVisible="False" 
            /> 
        <Button x:Name="DeleteButton" 
          Grid.Row="1" 
          Style="{StaticResource DeleteButtonStyle}" 
          BorderThickness="{TemplateBinding BorderThickness}" 
          Margin="{ThemeResource HelperButtonThemePadding}" 
          IsTabStop="False" 
          Grid.Column="1" 
          Visibility="Collapsed" 
          FontSize="{TemplateBinding FontSize}" 
          MinWidth="34" 
          VerticalAlignment="Stretch" 
          /> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Answer 2

vous avez deux (facile) optio ns:

1. Vous pouvez créer un élément Grid et mettre un TextBlock et TextBox l'intérieur, de sorte qu'ils se chevauchent. Vous définissez ensuite la Opacity du TextBox à 0,01 (ne pas cacher complètement, car il ne fonctionne pas alors)
2. Vous pouvez modifier les propriétés de l'élément TextBox dans VisualStudio en réglant simplement le Background-Transparent pour les deux dans et hors de mise au point. Vous pouvez également définir le Border comme étant Transparent dans les propriétés.