Question

我想创建一个透明的TextBox，聚焦时没有背景色（默认为白色，或SystemControlBackgroundChromeWhiteBrush）。我知道我可以像这样覆盖App.xaml中使用的颜色：

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

（或使用多个ThemeDictionaries）

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

Answer 1

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

获取TextBox的样式，将其作为资源插入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}"/>

以下是Transparent TextBox（WinRT / Universal Apps）的示例样式：

<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>

此外，您可以使用 Blend （与Visual Studio一起安装的工具）来更轻松地修改控件。 HERE是Microsoft Virtual Academy的示例教程与VS2013一起使用。

Answer 2

您可以像CSS一样使用样式，并仅将它们应用于特定控件：

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

然后在控件参考上使用您想要使用的样式：

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

希望这有帮助。

覆盖特定控件的ThemeResource

2 个答案: