TextBoxをUWPのテキストブロックのようにカスタマイズする

Question

XAMLとBlendの新機能ですが、ここでは何をしようとしています。私はTextBox（または任意の入力コントロール）を配置する必要があるアプリケーションを開発していますが、TextBoxのプロパティを持つべきではありません。下の画像を参考にしてください。

下記の機能を実装するのに手伝ってください。

TAPオン

1. - 私は外の編集を停止し、タップしたら、私は任意の国境
2. を必要としない通常TextBoxes
3. を行うもの - それは私が背景領域を強調せずに、値を編集させてくださいコントロールは、それはあなたが正常に

Answer 1

のデフォルトスタイルTextBoxを変更する必要があります。

あなたはこのようなもので終わる可能性：

<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

を編集してみましょうそれを再度タップ、TextBlockのようになります。次の2つの（簡単な）OPTIOを持っていますNS：

1. あなたはGrid要素を作成し、内部TextBlockとTextBoxを置くので、彼らは重複することができます。その後、
2. は、あなただけでアウトの両方のためにTransparentにBackgroundを設定することにより、VisualStudioをでTextBox要素のプロパティを変更することができます（それはその後、動作しませんように、完全に非表示にしないでください）TextBox 0.01へのOpacityを設定しましたフォーカスの。また、プロパティでBorderをTransparentに設定することもできます。