2015-10-26 98 views
1

我想集中的时候建立一个透明的文本框,没有背景的颜色(默认是白色,或SystemControlBackgroundChromeWhiteBrush)。 我明白,我可以覆盖使用的颜色在App.xaml中像这样:(使用多个ThemeDictionaries或)覆盖ThemeResource特定控制

<Application.Resources> 
    <SolidColorBrush x:Key="SystemControlBackgroundChromeWhiteBrush">Transparent</SolidColorBrush> 
</Application.Resources> 

但是我不想修改所有的TextBlocks,但只有特定的人。我的第一个猜测是将更改后的画笔包含在TextBlock的资源中,但这不起作用。

回答

1

您可以修改默认样式的控制。 HERE是文章如何找到它。文本框的

获取样式,将它插入在XAML资源和修改,如:

<!-- Default style for Windows.UI.Xaml.Controls.TextBox --> 
<Style TargetType="TextBox"> 
<Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" /> 
<Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" /> 
<Setter Property="Foreground" Value="{ThemeResource TextBoxForegroundThemeBrush}" /> 
<Setter Property="SelectionHighlightColor" Value="{ThemeResource TextSelectionHighlightColorThemeBrush}" /> 
<Setter Property="Background" Value="{ThemeResource TextBoxBackgroundThemeBrush}" /> 
<Setter Property="BorderBrush" Value="{ThemeResource TextBoxBorderThemeBrush}" /> 
<Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" /> 
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}" /> 
<Setter Property="FontSize" Value="{ThemeResource ContentControlFontSize}" /> 
<Setter Property="TextWrapping" Value="NoWrap" /> 
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" /> 
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" /> 
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" /> 
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" /> 
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" /> 
<Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}" /> 
<Setter Property="Margin" Value="{ThemeResource TextControlMarginThemeThickness}" /> 
<Setter Property="VerticalAlignment" Value="Top" /> 
<Setter Property="Template"> 
    <Setter.Value> 
    <ControlTemplate TargetType="TextBox"> 
     <Grid Background="Transparent"> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="CommonStates"> 
      <VisualState x:Name="Disabled"> 
       <Storyboard> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledBackgroundThemeBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledBorderThemeBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledForegroundThemeBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledForegroundThemeBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledHeaderForegroundThemeBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Normal"> 
       <Storyboard> 
       <DoubleAnimation Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Opacity" Duration="0" 
           To="{ThemeResource TextControlBorderThemeOpacity}" /> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Focused"> 
       <Storyboard> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextSelectionHighlightColorThemeBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <DoubleAnimation Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To="0" /> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxFocusedBackgroundThemeBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="*"/> 
     </Grid.RowDefinitions> 
     <Border x:Name="BorderElement" Grid.Row="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" /> 
     <ContentPresenter x:Name="HeaderContentPresenter" Grid.Row="0" Style="{StaticResource HeaderContentPresenterStyle}" Margin="{ThemeResource TextControlHeaderMarginThemeThickness}" 
          Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" /> 
     <ScrollViewer x:Name="ContentElement" Grid.Row="1" MinHeight="{ThemeResource TextControlThemeMinHeight}" 
         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" ZoomMode="Disabled" 
         AutomationProperties.AccessibilityView="Raw"/> 
     <ContentControl x:Name="PlaceholderTextContentPresenter" Grid.Row="1" Foreground="{ThemeResource TextBoxPlaceholderTextThemeBrush}" 
         FontSize="{ThemeResource ContentControlFontSize}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" 
         IsTabStop="False" Content="{TemplateBinding PlaceholderText}" /> 
     </Grid> 
    </ControlTemplate> 
    </Setter.Value> 
</Setter> 

接下来,添加名字改装风格:

<Style x:Name="CustomTextBlock" TargetType="TextBox"> 

并申请它的控制,如:

<TextBlock Style="{StaticResource CustomTextBlock}"/> 

下面是透明的文本框(WinRT的/通用应用程序)的样本样式:

<Style x:Key="TransparentTextBox" 
      TargetType="TextBox"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="TextBox"> 
        <Grid Background="Transparent"> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto" /> 
          <RowDefinition Height="*" /> 
         </Grid.RowDefinitions> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" 
                     Storyboard.TargetName="BorderElement"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource TextBoxDisabledBorderThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" 
                     Storyboard.TargetName="ContentElement"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource TextBoxDisabledForegroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" 
                     Storyboard.TargetName="PlaceholderTextContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource TextBoxDisabledForegroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" 
                     Storyboard.TargetName="HeaderContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource TextBoxDisabledHeaderForegroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Normal"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" 
                 To="{ThemeResource TextControlBorderThemeOpacity}" 
                 Storyboard.TargetProperty="Opacity" 
                 Storyboard.TargetName="BorderElement" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Focused"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" 
                     Storyboard.TargetName="BorderElement"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource TextSelectionHighlightColorThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <DoubleAnimation Duration="0" 
                 To="0" 
                 Storyboard.TargetProperty="Opacity" 
                 Storyboard.TargetName="PlaceholderTextContentPresenter" /> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Border x:Name="BorderElement" 
           BorderBrush="{TemplateBinding BorderBrush}" 
           BorderThickness="{TemplateBinding BorderThickness}" 
           Grid.Row="1" /> 
         <ContentPresenter x:Name="HeaderContentPresenter" 
              ContentTemplate="{TemplateBinding HeaderTemplate}" 
              Content="{TemplateBinding Header}" 
              Margin="{ThemeResource TextControlHeaderMarginThemeThickness}" 
              Grid.Row="0" 
              Style="{StaticResource HeaderContentPresenterStyle}" /> 
         <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}" 
             MinHeight="{ThemeResource TextControlThemeMinHeight}" 
             Padding="{TemplateBinding Padding}" 
             Grid.Row="1" 
             VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" 
             VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" 
             ZoomMode="Disabled" /> 
         <ContentControl x:Name="PlaceholderTextContentPresenter" 
             Content="{TemplateBinding PlaceholderText}" 
             Foreground="{ThemeResource TextBoxPlaceholderTextThemeBrush}" 
             FontSize="{ThemeResource ContentControlFontSize}" 
             IsTabStop="False" 
             Margin="{TemplateBinding BorderThickness}" 
             Padding="{TemplateBinding Padding}" 
             Grid.Row="1" /> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

此外,还可以使用混合(工具与Visual Studio安装),修改的控制更容易。HERE是微软虚拟学院样品教程如何在VS2013中使用它。

+0

感谢您的答复,我希望我没有复制整个默认样式只是改变这种轻微的财产:/ –

+0

恐怕是不可能的,以改变单一的财产集中控制的背景下,因为文本框有很多州(如你所见)。在_Focused_状态下设置透明度的最简单方法是修改默认样式。你可以把它放到不同的文件_Resource Dictionary_中并随时使用。 我与透明度,你可以申请所需文本框添加文本框编辑我的答案。 – marcinax

0

您可以使用样式很像CSS,并将它们只适用于相关的控制:

<Style x:Key="TransparentTextBox" TargetType="{x:Type TextBox}"> 
     <Setter Property="Background" Value="Transparent" /> 
</Style> 

,然后在控制引用您要使用的样式:

<TextBox Style="{StaticResource TransparentTextBox}" /> 

希望这有助于。

+0

我想,如果有需要改变,只有当控制集中的背景是不够的。可能有必要修改特定的控制状态(正如我在下面以更长的回答描述的那样)。 – marcinax

+0

这不起作用。我使用的背景取其值与白色覆盖的情况下控制获得焦点。 –