定製一個文本框看起來像UWP中的文本塊

-1

我是XAML和Blend的新手，但這裏是我正在嘗試做的。我正在開發一個應用程序，我需要放置一個TextBox（或任何輸入控件），但不應具有TextBox的屬性。請參考下面的圖片。定製一個文本框看起來像UWP中的文本塊

我想幫助實現下面提到的功能。

自來水 - 這應該讓我編輯的價值觀，沒有突出的背景區域 - 的東西，通常TextBoxes做
一旦我停止編輯並挖掘外，我不需要任何邊界
控制，它應該看起來像一個TextBlock，點擊它再次讓你編輯正常

來源

2017-04-01 Apoorv

編輯* TextBox的風格*。 – Romasz

@Romasz你是這裏的怪人。我很喜歡混合。你需要幫我在那個 – Apoorv

您必須修改默認樣式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>

來源

2017-04-01 11:39:06

爲什麼我們需要在這裏有一個按鈕的代碼，以及一個ScrollViewer中 – Apoorv

這只是其中按鈕是在'TextBox'和'ScrollViewer'的右側的「明文」按鈕的編輯默認模板包含「TextBox」的內容。 –

似乎是我的問題的正確解決方案。非常感謝：） – Apoorv

你有兩個（容易）OPTIO NS：

您可以創建一個Grid元素，把一個TextBlock和TextBox裏面，讓他們重疊。然後設置TextBox 0.01的Opacity（不完全隱藏，因爲它不會再工作）
可以僅由Background設置爲Transparent的進出都修改VisualStudio中的TextBox元素的屬性的焦點。您還可以在屬性中將Border設置爲Transparent。

來源

2017-04-01 10:12:50 user3079834

任何XAML和混合解決方案？ – Apoorv

定製一個文本框看起來像UWP中的文本塊

回答

相關問題