TextBox를 UWP의 텍스트 블록처럼 보이게 사용자 정의

Question

저는 XAML과 Blend를 처음 사용하지만 여기에 내가하려는 일이 있습니다. 내가 TextBox (또는 입력 컨트롤)을 배치해야하지만, TextBox의 속성을 가져서는 안되는 애플리케이션을 개발 중입니다. 아래 이미지를 참조하십시오.

아래에 언급 된 기능을 구현하는 데 도움이 필요합니다.

TAP에

1. - 내가 외부에서 편집을 중지하고 탭하면 내가 어떤 경계
2. 필요하지 않습니다 일반적으로 TextBoxes
3. 할 것은 - 그것은 나를 배경 영역을 강조하지 않고, 값을 편집 할 수 있도록해야한다 제어, 당신이 일반적으로

Answer 1

기본 스타일 TextBox을 수정해야 here을 찾을 수 있습니다.

이 같은 끝낼 수 :

<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과 같아야 두 (쉬운) OPTIO이 NS : 당신은 Grid 요소를 생성하고 내부 TextBlock 및 TextBox을 넣어, 그래서 그들은 겹칠 수

1. . 그런 다음
2. 당신은 그냥 밖으로 모두 Transparent에 Background를 설정으로 VisualStudio에서 TextBox 요소의 속성을 수정할 수 있습니다 (그 다음 작동하지 않습니다으로, 완전히 숨길 수없는)이 TextBox 0.01의 Opacity 설정 초점. 또한 속성에서 Border을 Transparent으로 설정할 수 있습니다.