添加Reveal Higlight以旋转标题

时间:2018-02-04 12:43:41

标签: xaml uwp

我想在我的应用中向我的数据透视表标题添加一些显示突出显示。但是我没有到达那里

以下是我的Pivot风格

<Style x:Key="PivotStyle1" TargetType="Pivot">
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Background" Value="{ThemeResource PivotBackground}"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <Grid/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Pivot">
                    <Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <Grid.Resources>
                            <Style x:Key="BaseContentControlStyle" TargetType="ContentControl">
                                <Setter Property="FontFamily" Value="Segoe UI"/>
                                <Setter Property="FontWeight" Value="SemiBold"/>
                                <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}"/>
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="ContentControl">
                                            <ContentPresenter Content="{TemplateBinding Content}"
                                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                                            Margin="{TemplateBinding Padding}"
                                                            ContentTransitions="{TemplateBinding ContentTransitions}"
                                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                            OpticalMarginAlignment="TrimSideBearings"/>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                            <Style x:Key="TitleContentControlStyle" TargetType="ContentControl" >
                                <Setter Property="FontWeight" Value="SemiLight"/>
                                <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}"/>
                            </Style>
                            <Style TargetType="PivotHeaderItem">
                                <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" />
                                <Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" />
                                <Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}" />
                                <Setter Property="Background" Value="Transparent" />
                                <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" />
                                <Setter Property="Margin" Value="{ThemeResource PivotHeaderItemMargin}" />
                                <Setter Property="Height" Value="32" />
                                <Setter Property="VerticalContentAlignment" Value="Center" />
                                <Setter Property="IsTabStop" Value="False" />
                                <Setter Property="BorderBrush" Value="PaleGreen" />
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="PivotHeaderItem">
                                            <Border x:Name="Grid"
                                                Background="{TemplateBinding Background}"
                                                BorderBrush="{TemplateBinding BorderBrush}"
                                                BorderThickness="2,2,2,2"
                                                Padding="16,0,16,0"

                                                Margin="0"
                                                >
                                                <Border.Resources>
                                                    <Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter">
                                                        <Setter Property="FontFamily" Value="Segoe UI"/>
                                                        <Setter Property="FontWeight" Value="SemiBold"/>
                                                        <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}"/>
                                                        <Setter Property="TextWrapping" Value="Wrap"/>
                                                        <Setter Property="LineStackingStrategy" Value="MaxHeight"/>
                                                        <Setter Property="TextLineBounds" Value="Full"/>
                                                        <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
                                                    </Style>
                                                    <Style x:Key="BodyContentPresenterStyle" TargetType="ContentPresenter" BasedOn="{StaticResource BaseContentPresenterStyle}">
                                                        <Setter Property="FontWeight" Value="SemiLight"/>
                                                        <Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}"/>
                                                    </Style>
                                                </Border.Resources>
                                                <VisualStateManager.VisualStateGroups>
                                                    <VisualStateGroup x:Name="SelectionStates">
                                                        <VisualStateGroup.Transitions>
                                                            <VisualTransition From="Unselected" To="UnselectedLocked" GeneratedDuration="0:0:0.33" />
                                                            <VisualTransition From="UnselectedLocked" To="Unselected" GeneratedDuration="0:0:0.33" />
                                                        </VisualStateGroup.Transitions>
                                                        <VisualState x:Name="Disabled">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                                           Storyboard.TargetProperty="Foreground" >
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        </VisualState>
                                                        <VisualState x:Name="Unselected" />
                                                        <VisualState x:Name="UnselectedLocked">
                                                        </VisualState>
                                                        <VisualState x:Name="Selected">
                                                        </VisualState>
                                                        <VisualState x:Name="UnselectedPointerOver">
                                                        </VisualState>
                                                        <VisualState x:Name="SelectedPointerOver">
                                                            <VisualState.Setters>
                                                                <Setter Target="Grid.(RevealBrush.State)" Value="PointerOver" />
                                                                <Setter Target="Grid.Background" Value="{ThemeResource ButtonRevealBackgroundPointerOver}" />
                                                                <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ButtonRevealBorderBrush}"/>
                                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPointerOver}" />
                                                            </VisualState.Setters>
                                                        </VisualState>
                                                        <VisualState x:Name="UnselectedPressed">
                                                        </VisualState>
                                                        <VisualState x:Name="SelectedPressed">

                                                        </VisualState>
                                                    </VisualStateGroup>
                                                </VisualStateManager.VisualStateGroups>
                                                <ContentPresenter
                                                x:Name="ContentPresenter"
                                                Content="{TemplateBinding Content}"
                                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                Style="{StaticResource BodyContentPresenterStyle}">
                                                    <ContentPresenter.RenderTransform>
                                                        <TranslateTransform x:Name="ContentPresenterTranslateTransform" />
                                                    </ContentPresenter.RenderTransform>
                                                </ContentPresenter>
                                            </Border>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Grid.Resources>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
{... add here stuff from the standard template ... }
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

如果我将鼠标悬停在选定的页眉上,则背景会发生变化,但它会变为平面颜色,就像在NavigationView / Listview中一样。 BorderBrush也改变了颜色,但没有阴影。

P.S。:我怎样才能将Style修改为API识别。如果用户使FCU用户显示高亮显示,如果不使用平面颜色......

更新

  1. 效果非常明显,几乎看不到。是否有可能使效果更强?
  2. 如何展开效果,以便包含所有标题。要知道效果仅限于一个标题...在导航视图中,效果也会扩展到其他行
  3. 非常感谢你的帮助

1 个答案:

答案 0 :(得分:1)

Reveal是一种灯光效果,有助于为应用的互动元素带来深度和焦点。您似乎已经实现了PivotItem的显示效果,您可以设置具有高对比度背景的数据透视来查看它,例如LightGray

如果你想让BorderBrush用阴影改变颜色,你应该改变代码中SelectedPointerOver VisualState的Xaml,如下所示改变Grid边框画笔而不是{{1 }},

ContentPresenter

您还可以使用x:Key,Color,Opacity(可选)和FallbackColor创建一个新的<VisualState x:Name="SelectedPointerOver"> <VisualState.Setters> <Setter Target="Grid.(RevealBrush.State)" Value="PointerOver" /> <Setter Target="Grid.Background" Value="{ThemeResource ButtonRevealBackgroundPointerOver}" /> <Setter Target="Grid.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushPointerOver}"/> <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPointerOver}" /> </VisualState.Setters> </VisualState> ,以便在Xaml中使用它。

MyRevealBorderBrush

然后你可以在VisualState中使用它,

<RevealBackgroundBrush x:Key="MyRevealBorderBrush" Color="PaleGreen" Opacity= "0.5" FallbackColor="PaleGreen"/>

至于修改要识别API的样式,您可以查看以下文档: https://docs.microsoft.com/en-us/windows/uwp/debug-test-perf/conditional-xaml#use-ifelse-conditions

- - - - 的更新 ----

要实现类似的效果,您应该在<VisualState.Setters> <Setter Target="Grid.(RevealBrush.State)" Value="PointerOver" /> <Setter Target="Grid.Background" Value="{ThemeResource ButtonRevealBackgroundPointerOver}" /> <Setter Target="Grid.BorderBrush" Value="{StaticResource MyRevealBorderBrush}"/> <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonRevealBackgroundPointerOver}" /> </VisualState.Setters> 样式的UnselectedPointerOver VisualState中添加setter,

PivotHeaderItem

至于颜色,你应该尝试你想要的。对于<VisualState x:Name="UnselectedPointerOver"> <VisualState.Setters> <Setter Target="Grid.(RevealBrush.State)" Value="PointerOver" /> <Setter Target="Grid.Background" Value="{ThemeResource ButtonRevealBackgroundPointerOver}" /> <Setter Target="Grid.BorderBrush" Value="{StaticResource MyRevealBorderBrush}"/> <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPointerOver}" /> </VisualState.Setters> </VisualState> ,它应该使用NavigationView ThemeResource。您也可以尝试查看效果。

NavigationViewItemBorderBrushPointerOver