将揭示效果应用于InkToolbar [UWP]
问题描述:
我试图将揭示效果应用于InkToolbar
的按钮,但文档对自定义控件所建议的代码无效,这是我添加到XAML代码中的内容的InkToolbar
:将揭示效果应用于InkToolbar [UWP]
<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>
答
你不能简单地套用显示对整个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="" />
</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="" />
</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="" />
</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="" />
</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="" />
</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=""
AutomationProperties.AccessibilityView="Raw"
Canvas.ZIndex="1"
Foreground="{ThemeResource InkToolbarButtonForegroundThemeBrush}" />
<TextBlock x:Name="CheckedContent"
Style="{StaticResource InkToolbarGlyphFontStyle}"
Text=""
AutomationProperties.AccessibilityView="Raw"
Canvas.ZIndex="1"
Foreground="{ThemeResource InkToolbarButtonSelectedForegroundThemeBrush}"
Opacity="0" />
<TextBlock x:Name="ContentFillGlyph"
Text=""
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与所有揭示照明启用按钮样式及以下工作演示。请享用! :)