Apply-Effekt auf eine InkToolbar anwenden [UWP]

Question

Ich versuche, den Reveal-Effekt auf die Schaltflächen einer InkToolbar anzuwenden, aber der Code, den die Dokumentation für benutzerdefinierte Steuerelemente empfiehlt, funktioniert nicht, hier ist, was ich dem XAML-Code hinzugefügt habe der 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

können Sie nicht einfach gelten die Wirkung Reveal auf der gesamten InkToolbar. Stattdessen sollten Sie es auf jeder der Symbolleistenschaltflächen tun.

Da jeder Knopf einen anderen Stil verwendet, macht dies die Anwendung sehr schwierig, als ich dachte. Ich hatte eine Menge von Ressourcen greifen von

C: \ Program Files (x86) \ Windows- Kits \ 10 \ Designtime \ CommonConfiguration \ Neutral \ UAP \ 10.0.16xxx.0 \ Generisches \ generic.xaml

und manuell in meine App.xaml. Der folgende Stil wird beispielsweise nur auf die erste Schaltfläche unter InkToolbar angewendet.

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

Bitte beachten Sie, dass ich RevealBrushHelper mit RevealBrush zu ersetzen hatte. Die Microsoft doc verwendet jedoch die ehemalige. Möglicherweise verwende ich eine ältere Version von Windows 10 SDK() oder das Dokument ist nicht auf dem neuesten Stand. Also wähle was immer nicht bricht. :)

Auch, damit das Licht zu zeigen, müssen Sie Ihre InkToolbar auf einen dunkleren Hintergrund setzen.

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

Ich habe eine Probe erstellt here mit allen offenbaren Beleuchtung Knopfarten aktiviert und unten ist eine Arbeits Demo. Genießen! :)