2017-03-08 36 views
3

我是UWP的新手,并且一直在试图找出在WPF中非常容易的东西。基本上,我希望风格触发器的等价物允许我定义不同状态下的控制外观。我的愿望:在UWP中使用VisualStates的App-Wide样式(因为不支持样式触发器)

  • 我希望应用程序中的所有文本框在聚焦时都有一个AliceBlue BorderBrush。

所有文本框。横跨整个应用程序。在WPF中,我可以在我的App.xaml中使用带触发器的样式定位所有文本框来定义此内容。很容易。但我正在努力使用VisualState来做同样的事情。我看到的所有示例都根据Page定义了VisualState,而不是在应用程序级别。我发现要做到这一点的唯一方法是将整个UWP TextBox style复制到我的应用程序中,并在“聚焦”状态下更改我想要的属性。

有没有更好的方法?谢谢。

+0

恕我直言,改变*聚焦*状态是最好的办法。 – Romasz

回答

1

如果你是针对Windows 10,版本1607(编译14393)及以上的,也有一些资源值您可以为此更改(完整列表为here)。

如果您在Application.Resources重写此如下:

<SolidColorBrush x:Key="TextControlBorderBrushFocused" Color="Fuchsia" /> 

应采取的影响无处不在。

0

我希望应用程序中的所有文本框在聚焦时都具有AliceBlue BorderBrush。

对于你的情况,你也可以创建文本框styleApplication.Resources,它位于App.xaml文件。有一件事你需要注意的是,你不能设置x:Key="XXXXStyle"的风格。它会修改默认的系统风格。以下是示例代码。

<Application.Resources> 
     <Style TargetType="TextBox"> 
      <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" /> 
      <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" /> 
      <Setter Property="Foreground" Value="{ThemeResource TextControlForeground}" /> 
      <Setter Property="Background" Value="{ThemeResource TextControlBackground}" /> 
      <Setter Property="BorderBrush" Value="{ThemeResource TextControlBorderBrush}" /> 
      <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextControlSelectionHighlightColor}" /> 
      <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" /> 
      <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /> 
      <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" /> 
      <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="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 TextControlButtonBorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{ThemeResource TextControlButtonBackground}"> 
                <VisualStateManager.VisualStateGroups> 
                 <VisualStateGroup x:Name="CommonStates"> 
                  <VisualState x:Name="Normal" /> 
                  <VisualState x:Name="PointerOver"> 
                   <Storyboard> 
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonLayoutGrid"> 
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPointerOver}" /> 
                    </ObjectAnimationUsingKeyFrames> 
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonLayoutGrid"> 
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPointerOver}" /> 
                    </ObjectAnimationUsingKeyFrames> 
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="GlyphElement"> 
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPointerOver}" /> 
                    </ObjectAnimationUsingKeyFrames> 
                   </Storyboard> 
                  </VisualState> 
                  <VisualState x:Name="Pressed"> 
                   <Storyboard> 
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonLayoutGrid"> 
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPressed}" /> 
                    </ObjectAnimationUsingKeyFrames> 
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonLayoutGrid"> 
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPressed}" /> 
                    </ObjectAnimationUsingKeyFrames> 
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="GlyphElement"> 
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPressed}" /> 
                    </ObjectAnimationUsingKeyFrames> 
                   </Storyboard> 
                  </VisualState> 
                  <VisualState x:Name="Disabled"> 
                   <Storyboard> 
                    <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonLayoutGrid" /> 
                   </Storyboard> 
                  </VisualState> 
                 </VisualStateGroup> 
                </VisualStateManager.VisualStateGroups> 
                <TextBlock x:Name="GlyphElement" AutomationProperties.AccessibilityView="Raw" Foreground="{ThemeResource TextControlButtonForeground}" FontStyle="Normal" FontSize="12" FontFamily="{ThemeResource SymbolThemeFontFamily}" HorizontalAlignment="Center" Text="&#xE10A;" VerticalAlignment="Center" /> 
               </Grid> 
              </ControlTemplate> 
             </Setter.Value> 
            </Setter> 
           </Style> 
          </Grid.Resources> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="*" /> 
           <ColumnDefinition Width="Auto" /> 
          </Grid.ColumnDefinitions> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="Auto" /> 
           <RowDefinition Height="*" /> 
          </Grid.RowDefinitions> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="HeaderContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlHeaderForegroundDisabled}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BorderElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundDisabled}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushDisabled}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundDisabled}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundDisabled}" /> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Normal" /> 
            <VisualState x:Name="PointerOver"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BorderElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundPointerOver}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundPointerOver}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}" /> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Focused"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundFocused}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BorderElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundFocused}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="Red" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundFocused}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RequestedTheme" Storyboard.TargetName="ContentElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="Light" /> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
           <VisualStateGroup x:Name="ButtonStates"> 
            <VisualState x:Name="ButtonVisible"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DeleteButton"> 
               <DiscreteObjectKeyFrame KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <Visibility>Visible</Visibility> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="ButtonCollapsed" /> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1" /> 
          <ContentPresenter x:Name="HeaderContentPresenter" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource TextControlHeaderForeground}" FontWeight="Normal" Margin="0,0,0,8" Grid.Row="0" Visibility="Collapsed" x:DeferLoadStrategy="Lazy" /> 
          <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}" Padding="{TemplateBinding Padding}" Grid.Row="1" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="Disabled" /> 
          <ContentControl x:Name="PlaceholderTextContentPresenter" Grid.ColumnSpan="2" Content="{TemplateBinding PlaceholderText}" Foreground="{ThemeResource TextControlPlaceholderForeground}" IsHitTestVisible="False" IsTabStop="False" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" /> 
          <Button x:Name="DeleteButton" AutomationProperties.AccessibilityView="Raw" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="1" FontSize="{TemplateBinding FontSize}" IsTabStop="False" Margin="{ThemeResource HelperButtonThemePadding}" MinWidth="34" Grid.Row="1" Style="{StaticResource DeleteButtonStyle}" Visibility="Collapsed" VerticalAlignment="Stretch" /> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Application.Resources> 

如果希望要在应用中的所有文本框有一个艾莉斯蓝BorderBrush时,他们都集中刚才设置的BorderElementBorderBrush为您想要的颜色。

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="Red" /> 

使用

<TextBox x:Name="MyTextBox" Width="100" Height="44" /> 

影响

enter image description here

+0

谢谢你的回答,满足我的要求。但是,我已经意识到这个选项,并希望能够在元素焦点上改变这些属性,而不必将整个'TextBox'样式复制到我的'App.xaml'中。我宁愿能够覆盖我需要的几个属性(就像我以前用Triggers做的那样),而将剩下的属性留给系统。 – NSouth

+0

@NSouth Darshan的答案是完美的。从Windows 10,1607(Windows软件开发工具包(SDK)版本10.0.14393.0)开始,是通用的。xaml包含的资源可用于在不修改控件模板的情况下在不同视觉状态下修改控件的颜色。在针对此软件开发工具包(SDK)或更高版本的应用程序中,修改这些资源优先于设置背景和前景等属性。有关更多信息,请参阅样式控件文章的轻量级样式部分。 –

相关问题