將揭示效果應用於InkToolbar [UWP]

Question

我試圖將揭示效果應用於InkToolbar的按鈕，但文檔對自定義控件所建議的代碼無效，這是我添加到XAML代碼中的內容的InkToolbar：

  <VisualStateManager.VisualStateGroups> 
       <VisualStateGroup x:Name="CommonStates"> 
        <VisualState x:Name="PointerOver"> 
         <VisualState.Setters> 
          <Setter Target="RootGrid.(RevealBrushHelper.State)" Value="PointerOver" /> 
          <Setter Target="RootGrid.Background" Value="{ThemeResource ButtonRevealBackgroundPointerOver}"/> 
          <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ButtonRevealBorderBrushPointerOver}"/> 
          <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPointerOver}"/> 
         </VisualState.Setters> 
        </VisualState> 
        <VisualState x:Name="Pressed"> 
         <VisualState.Setters> 
          <Setter Target="RootGrid.(RevealBrushHelper.State)" Value="Pressed" /> 
          <Setter Target="RootGrid.Background" Value="{ThemeResource ButtonRevealBackgroundPressed}"/> 
          <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ButtonRevealBorderBrushPressed}"/> 
          <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPressed}"/> 
         </VisualState.Setters> 
        </VisualState> 
       </VisualStateGroup> 
</VisualStateManager.VisualStateGroups> 

Answer 1

你不能簡單地套用顯示對整個InkToolbar效果。相反，您應該在每個工具欄按鈕上執行此操作。

由於每個按鈕使用不同的風格，這使得應用效果比我想象的要困難得多。我不得不從

Ç搶了不少的資源：\程序文件（x86）\的Windows 套件\ 10 \設計時\ CommonConfiguration \中性\ UAP \ 10.0.16xxx.0 \通用\ generic.xaml

並手動將它們放在我的App.xaml中。例如，以下樣式僅適用於InkToolbar上的第一個按鈕。

<Style x:Key="InkToolbarCommonButtonStyle" 
     TargetType="ToggleButton"> 
    <Setter Property="MinWidth" 
      Value="{ThemeResource InkToolbarButtonWidth}" /> 
    <Setter Property="MinHeight" 
      Value="{ThemeResource InkToolbarButtonHeight}" /> 
    <Setter Property="MaxWidth" 
      Value="{ThemeResource InkToolbarButtonWidth}" /> 
    <Setter Property="MaxHeight" 
      Value="{ThemeResource InkToolbarButtonHeight}" /> 
    <Setter Property="BorderThickness" 
      Value="{ThemeResource ButtonRevealBorderThemeThickness}" /> 
    <Setter Property="Background" 
      Value="Transparent" /> 
    <Setter Property="Foreground" 
      Value="{ThemeResource InkToolbarButtonForegroundThemeBrush}" /> 
    <Setter Property="BorderBrush" 
      Value="{ThemeResource ButtonRevealBorderBrush}"/> 
    <Setter Property="FocusVisualMargin" 
      Value="-3" /> 
</Style> 

<Style TargetType="InkToolbarBallpointPenButton" 
     BasedOn="{StaticResource InkToolbarCommonButtonStyle}"> 
    <Setter Property="AutomationProperties.AutomationId" 
      Value="InkToolbarBallpointPenButton" /> 
    <Setter Property="MinStrokeWidth" 
      Value="1" /> 
    <Setter Property="MaxStrokeWidth" 
      Value="24" /> 
    <Setter Property="SelectedStrokeWidth" 
      Value="4" /> 
    <Setter Property="UseSystemFocusVisuals" 
      Value="True" /> 
    <Setter Property="SelectedBrushIndex" 
      Value="0" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="InkToolbarBallpointPenButton"> 
       <Grid x:Name="RootElement" 
         Background="{TemplateBinding Background}" 
         Width="{ThemeResource InkToolbarButtonWidth}" 
         Height="{ThemeResource InkToolbarButtonHeight}" 
         BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}"> 

        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal" /> 

          <VisualState x:Name="PointerOver"> 
           <VisualState.Setters> 
            <Setter Target="RootElement.(RevealBrush.State)" 
              Value="PointerOver" /> 
            <Setter Target="RootElement.Background" 
              Value="{ThemeResource ButtonRevealBackgroundPointerOver}" /> 
            <Setter Target="RootElement.BorderBrush" 
              Value="{ThemeResource ButtonRevealBorderBrushPointerOver}" /> 
            <Setter Target="Content.Foreground" 
              Value="{ThemeResource ButtonForegroundPointerOver}" /> 
           </VisualState.Setters> 
          </VisualState> 

          <VisualState x:Name="Pressed"> 
           <VisualState.Setters> 
            <Setter Target="RootElement.(RevealBrush.State)" 
              Value="Pressed" /> 
            <Setter Target="RootElement.Background" 
              Value="{ThemeResource ButtonRevealBackgroundPressed}" /> 
            <Setter Target="RootElement.BorderBrush" 
              Value="{ThemeResource ButtonRevealBorderBrushPressed}" /> 
            <Setter Target="Content.Foreground" 
              Value="{ThemeResource ButtonForegroundPressed}" /> 
           </VisualState.Setters> 
          </VisualState> 

          <VisualState x:Name="Disabled"> 
           <VisualState.Setters> 
            <Setter Target="ContentBackground.Fill" 
              Value="{ThemeResource InkToolbarDisabledBackgroundThemeBrush}" /> 
            <Setter Target="Content.Foreground" 
              Value="{ThemeResource InkToolbarDisabledForegroundThemeBrush}" /> 
            <Setter Target="CheckedContent.Foreground" 
              Value="{ThemeResource InkToolbarDisabledForegroundThemeBrush}" /> 
            <Setter Target="ExtensionGlyph.Foreground" 
              Value="{ThemeResource InkToolbarDisabledForegroundThemeBrush}" /> 
           </VisualState.Setters> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="CheckStates"> 
          <VisualState x:Name="Unchecked" /> 
          <VisualState x:Name="Indeterminate" /> 
          <VisualState x:Name="Checked"> 
           <VisualState.Setters> 
            <Setter Target="Content.Opacity" 
              Value="0" /> 
            <Setter Target="CheckedContent.Opacity" 
              Value="1" /> 
            <Setter Target="SelectionAccent.Opacity" 
              Value="1" /> 
           </VisualState.Setters> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="FocusStates"> 
          <VisualState x:Name="Focused" /> 
          <VisualState x:Name="Unfocused" /> 
          <VisualState x:Name="PointerFocused" /> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="GlyphVisualStates"> 
          <VisualState x:Name="ShowExtensionGlyph"> 
           <VisualState.Setters> 
            <Setter Target="ExtensionGlyph.Opacity" 
              Value="1" /> 
           </VisualState.Setters> 
          </VisualState> 
          <VisualState x:Name="HideExtensionGlyph" /> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="FlowDirectionStates"> 
          <VisualState x:Name="LeftToRight" /> 
          <VisualState x:Name="RightToLeft"> 
           <VisualState.Setters> 
            <Setter Target="ContentTransform.ScaleX" 
              Value="-1" /> 
           </VisualState.Setters> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="ButtonFlyoutDirectionStates"> 
          <VisualState x:Name="BottomDirection" /> 
          <VisualState x:Name="TopDirection"> 
           <VisualState.Setters> 
            <Setter Target="SelectionAccent.VerticalAlignment" 
              Value="Bottom" /> 
            <Setter Target="ExtensionGlyph.HorizontalAlignment" 
              Value="Center" /> 
            <Setter Target="ExtensionGlyph.VerticalAlignment" 
              Value="Top" /> 
            <Setter Target="ExtensionGlyph.Margin" 
              Value="0,4,0,0" /> 
            <Setter Target="ExtensionGlyph.Text" 
              Value="&#xE96D;" /> 
           </VisualState.Setters> 
          </VisualState> 
          <VisualState x:Name="RightDirection"> 
           <VisualState.Setters> 
            <Setter Target="SelectionAccent.HorizontalAlignment" 
              Value="Right" /> 
            <Setter Target="SelectionAccent.VerticalAlignment" 
              Value="Stretch" /> 
            <Setter Target="SelectionAccent.Height" 
              Value="auto" /> 
            <Setter Target="SelectionAccent.Width" 
              Value="2" /> 
            <Setter Target="ExtensionGlyph.HorizontalAlignment" 
              Value="Right" /> 
            <Setter Target="ExtensionGlyph.VerticalAlignment" 
              Value="Center" /> 
            <Setter Target="ExtensionGlyph.Margin" 
              Value="0,0,4,0" /> 
            <Setter Target="ExtensionGlyph.Text" 
              Value="&#xE26B;" /> 
           </VisualState.Setters> 
          </VisualState> 
          <VisualState x:Name="LeftDirection"> 
           <VisualState.Setters> 
            <Setter Target="SelectionAccent.HorizontalAlignment" 
              Value="Left" /> 
            <Setter Target="SelectionAccent.VerticalAlignment" 
              Value="Stretch" /> 
            <Setter Target="SelectionAccent.Height" 
              Value="auto" /> 
            <Setter Target="SelectionAccent.Width" 
              Value="2" /> 
            <Setter Target="ExtensionGlyph.HorizontalAlignment" 
              Value="Left" /> 
            <Setter Target="ExtensionGlyph.VerticalAlignment" 
              Value="Center" /> 
            <Setter Target="ExtensionGlyph.Margin" 
              Value="4,0,0,0" /> 
            <Setter Target="ExtensionGlyph.Text" 
              Value="&#xE26C;" /> 
           </VisualState.Setters> 
          </VisualState> 
          <VisualState x:Name="RightDirectionRTL"> 
           <VisualState.Setters> 
            <Setter Target="SelectionAccent.HorizontalAlignment" 
              Value="Right" /> 
            <Setter Target="SelectionAccent.VerticalAlignment" 
              Value="Stretch" /> 
            <Setter Target="SelectionAccent.Height" 
              Value="auto" /> 
            <Setter Target="SelectionAccent.Width" 
              Value="2" /> 
            <Setter Target="ExtensionGlyph.HorizontalAlignment" 
              Value="Right" /> 
            <Setter Target="ExtensionGlyph.VerticalAlignment" 
              Value="Center" /> 
            <Setter Target="ExtensionGlyph.Margin" 
              Value="0,0,4,0" /> 
            <Setter Target="ExtensionGlyph.Text" 
              Value="&#xE26C;" /> 
           </VisualState.Setters> 
          </VisualState> 
          <VisualState x:Name="LeftDirectionRTL"> 
           <VisualState.Setters> 
            <Setter Target="SelectionAccent.HorizontalAlignment" 
              Value="Left" /> 
            <Setter Target="SelectionAccent.VerticalAlignment" 
              Value="Stretch" /> 
            <Setter Target="SelectionAccent.Height" 
              Value="auto" /> 
            <Setter Target="SelectionAccent.Width" 
              Value="2" /> 
            <Setter Target="ExtensionGlyph.HorizontalAlignment" 
              Value="Left" /> 
            <Setter Target="ExtensionGlyph.VerticalAlignment" 
              Value="Center" /> 
            <Setter Target="ExtensionGlyph.Margin" 
              Value="4,0,0,0" /> 
            <Setter Target="ExtensionGlyph.Text" 
              Value="&#xE26B;" /> 
           </VisualState.Setters> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 

        <Rectangle x:Name="ContentBackground" 
           Fill="Transparent" /> 
        <TextBlock x:Name="ExtensionGlyph" 
           Style="{StaticResource InkToolbarExtensionGlyphStyle}" 
           AutomationProperties.AccessibilityView="Raw" /> 
        <Grid RenderTransformOrigin="0.5, 0.5"> 
         <Grid.RenderTransform> 
          <ScaleTransform x:Name="ContentTransform" /> 
         </Grid.RenderTransform> 
         <TextBlock x:Name="Content" 
            Style="{StaticResource InkToolbarGlyphFontStyle}" 
            Text="&#xE76D;" 
            AutomationProperties.AccessibilityView="Raw" 
            Canvas.ZIndex="1" 
            Foreground="{ThemeResource InkToolbarButtonForegroundThemeBrush}" /> 
         <TextBlock x:Name="CheckedContent" 
            Style="{StaticResource InkToolbarGlyphFontStyle}" 
            Text="&#xE76D;" 
            AutomationProperties.AccessibilityView="Raw" 
            Canvas.ZIndex="1" 
            Foreground="{ThemeResource InkToolbarButtonSelectedForegroundThemeBrush}" 
            Opacity="0" /> 
         <TextBlock x:Name="ContentFillGlyph" 
            Text="&#xE88F;" 
            Style="{StaticResource InkToolbarGlyphFillFontStyle}" 
            TextAlignment="Center" 
            AutomationProperties.AccessibilityView="Raw" 
            Opacity="1" 
            Canvas.ZIndex="0" 
            Foreground="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedBrush, Mode=OneWay}" /> 
        </Grid> 
        <Rectangle x:Name="SelectionAccent" 
           Style="{StaticResource InkToolbarSelectionAccentStyle}" /> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

請注意，我有RevealBrush更換RevealBrushHelper。 Microsoft doc正在使用前者。這可能是因爲我使用的是舊版本的Windows 10 SDK（），或者文檔不是最新的。所以選擇一些不會中斷的東西。 :)

此外，爲了讓燈顯示，您將不得不將您的InkToolbar放在較暗的背景上。

<Border Background="{ThemeResource SystemControlBackgroundBaseLowBrush}" Grid.Row="1"> 
    <InkToolbar Margin="24" /> 
</Border> 

我創建了一個樣本here與所有揭示照明啓用按鈕樣式及以下工作演示。請享用！ :)