表示ハイライトReveal Highlight

ヒーロー イメージ

表示ハイライトは、ユーザーがポインターを近付けたときにコマンド バーなどの対話型要素を目立たせるための発光効果です。Reveal Highlight is a lighting effect that highlights interactive elements, such as command bars, when the user moves the pointer near them.

重要な API:RevealBrush クラスRevealBackgroundBrush クラスRevealBorderBrush クラスRevealBrushHelper クラスVisualState クラスImportant APIs: RevealBrush class, RevealBackgroundBrush class, RevealBorderBrush class, RevealBrushHelper class, VisualState class

方法How it works

表示ハイライトでは、対話型要素に注意が向くように、ポインターが近付いたときに要素のコンテナーが明示されます (下図参照)。Reveal Highlight calls attention to interactive elements by revealing the element's container when the pointer is nearby, as shown in this illustration:

表示のビジュアル効果

オブジェクトの周囲にある非表示の境界線を明示すると、表示の動作によって、ユーザーが操作する領域の認識が容易になり、実行できる操作もわかりやすくなります。By exposing the hidden borders around objects, Reveal gives users a better understanding of the space that they are interacting with, and helps them understand the actions available. これは、リスト コントロールやボタンのグループ化では特に重要です。This is especially important in list controls and groupings of buttons.

Examples

XAML コントロール ギャラリーXAML Controls Gallery
XAML controls gallery

XAML コントロール ギャラリー アプリがインストールされている場合、こちらをクリックしてアプリを開き、表示効果の動作を確認してください。If you have the XAML Controls Gallery app installed, click here to open the app and see Reveal in action.

ビデオの概要Video summary

使用方法How to use it

表示は、一部のコントロールでは自動的に動作します。Reveal automatically works for some controls. 他のコントロールでは、コントロールに特別なスタイルを割り当てることにより表示効果を有効にできます。この記事の「他のコントロールで表示効果を有効にする」と「カスタム コントロールで表示効果を有効にする」をご覧ください。For other controls, you can enable Reveal by assigning a special style to the control, as described in the Enabling Reveal on other controls and Enabling Reveal on custom controls sections of this article.

表示を自動的に使用するコントロールControls that automatically use Reveal

これらの図は、いくつかの異なるコントロールでの表示ハイライトを示しています。These illustrations show Reveal Highlight on several different controls:

表示の例

他のコントロールで表示効果を有効にするEnabling Reveal on other controls

表示の適用が必要なシナリオの場合 (シナリオで使用されるコントロールはメイン コンテンツである場合、またはそれらのコントロールがリストやコレクションに対応するために使用される場合)、オプトインのリソース スタイルが用意されているので、これらのスタイルを使用することで、そのような状況で表示を有効にすることができます。If you have a scenario where Reveal should be applied (these controls are main content and/or are used in a list or collection orientation), we've provided opt-in resource styles that allow you to enable Reveal for those types of situations.

以下に示すコントロールは、既定では表示の機能を備えていません。これらのコントロールは小さなコントロールであり、通常は、アプリケーションの重要なコンテンツをサポートするヘルパー コントロールですが、アプリによってはその状況は異なります。これらのコントロールをアプリの多くの部分で使用する場合は、その表示をサポートするスタイルがいくつか用意されているのでご利用ください。These controls do not have Reveal by default as they are smaller controls that are usually helper controls to the main focal points of your application; but every app is different, and if these controls are used the most in your app, we've provided some styles to aid with that:

コントロール名Control Name リソース名Resource Name
ButtonButton ButtonRevealStyleButtonRevealStyle
ToggleButtonToggleButton ToggleButtonRevealStyleToggleButtonRevealStyle
RepeatButtonRepeatButton RepeatButtonRevealStyleRepeatButtonRevealStyle
AppBarButtonAppBarButton AppBarButtonRevealStyleAppBarButtonRevealStyle
AppBarToggleButtonAppBarToggleButton AppBarToggleButtonRevealStyleAppBarToggleButtonRevealStyle
GridViewItem (表示効果がコンテンツより手前)GridViewItem (Reveal overtop of content) GridViewItemRevealBackgroundShowsAboveContentStyleGridViewItemRevealBackgroundShowsAboveContentStyle

これらのスタイルを適用するには、コントロールの Style プロパティを次のように設定します。To apply these styles, simply set the control's Style property:

<Button Content="Button Content" Style="{StaticResource ButtonRevealStyle}"/>

テーマ内の表示効果Reveal in themes

表示効果は、コントロール、アプリ、またはユーザー設定で指定されているテーマによって少し異なります。Reveal changes slightly depending on the requested theme of the control, app or user setting. 黒テーマの表示効果では境界線とホバー ライトが白ですが、白テーマでは境界線が明るい灰色になります。In Dark theme Reveal's Border and Hover light is white, but in Light theme just the Borders darken to a light gray.

黒テーマと白テーマでの表示効果

白テーマのときに白の境界線を有効にするには、コントロールに指定されたテーマを黒に設定します。To enabled white borders while in light theme, simply set the requested theme on the control to Dark.

<Grid RequestedTheme="Dark">
    <Button Content="Button" Click="Button_Click" Style="{ThemeResource ButtonRevealStyle}"/>
</Grid>

または、RevealBorderBrush の TargetTheme を黒に変更します。Or change the TargetTheme on the RevealBorderBrush to Dark. 注意:Remember! TargetTheme が黒に設定されている場合、表示効果は白になりますが、TargetTheme が白に設定されている場合、表示効果の境界線は灰色になります。If the TargetTheme is set to Dark, then Reveal will be white, but if it's set to Light, Reveal's borders will be gray.

 <RevealBorderBrush x:Key="MyLightBorderBrush" TargetTheme="Dark" Color="{ThemeResource SystemAccentColor}" FallbackColor="{ThemeResource SystemAccentColor}" />

カスタム コントロールで表示効果を有効にするEnabling Reveal on custom controls

表示効果は、カスタム コントロールにも追加できます。You can add Reveal to custom controls. その前に、表示効果の動作についてもう少し詳しく知っておくと便利です。Before you do, it's helpful to know a little more about how the Reveal effect works. 表示効果は、2 つの独立した効果 (表示効果の境界線表示効果のホバー) で構成されています。Reveal is made up of two separate effects: Reveal border and Reveal hover.

  • 表示効果の境界線では、ポインターが近付くと、対話型要素の境界線が表示されます。Border shows the borders of interactive elements when a pointer is nearby by. この効果では、現在フォーカスが置かれているオブジェクトと類似したアクションを、近くにある他のオブジェクトでも実行できることが示されます。This effect shows you that those nearby objects can take actions similar to the one currently focused.
  • 表示効果のホバーでは、ホバーされた (フォーカスが置かれた) 項目の周囲に淡く発光する図形が描画され、クリック時には押下操作のアニメーションが再生されます。Hover applies a gentle halo shape around the hovered or focused item and plays a press animation on click.

表示効果のレイヤー

これらの効果は、次の 2 つのブラシによって定義されます。These effects are defined by two brushes:

  • 表示効果の境界線は、RevealBorderBrush で定義されます。Border Reveal is defined by RevealBorderBrush
  • 表示効果のホバーは、RevealBackgroundBrush で定義されます。Hover Reveal is defined by RevealBackgroundBrush
<RevealBorderBrush x:Key="MyRevealBorderBrush" TargetTheme="Light" Color="{ThemeResource SystemAccentColor}" FallbackColor="{ThemeResource SystemAccentColor}"/>
<RevealBackgroundBrush x:Key="MyRevealBackgroundBrush" TargetTheme="Light" Color="{StaticResource SystemAccentColor}" FallbackColor="{StaticResource SystemAccentColor}" />

ほとんどの場合、特定のコントロールについては、表示効果が自動的に有効になってこれらの使用が処理されます。In most cases we handle the usage of both of them by turning Reveal on automatically for a certain controls. その他のコントロールでは、スタイルを適用するかテンプレートを直接変更することで、有効にする必要があります。However, other controls will need to be enabled through applying a style, or changing their templates directly.

表示効果の用途When to add Reveal

カスタム コントロールにも表示効果を追加できますが、その前に、コントロールの種類と動作を考慮してください。You can add Reveal to your custom controls--but before you do, consider the type of control and how it behaves.

  • カスタム コントロールが単独の対話型要素であり、メニュー内のメニュー項目のように、類似する複数のコントロールが同じ場所にない場合は、そのカスタム コントロールには表示効果が不要である可能性があります。If your custom control is a single interactive element and doesn't have similar controls sharing it's space (such as menu items in a menu), it's likely that your custom control doesn't need Reveal.
  • 関連する対話型コンテンツまたは要素のグループがある場合は、アプリのその領域に表示効果が必要である可能性があります。これは一般的に、コマンド実行サーフェスと呼ばれます。If you have a grouping of related interactive content or elements, then it's likely that that region of your app does need Reveal - this is commonly referred to as a Commanding surface.

たとえば、単独のボタンに表示効果は適していませんが、コマンド バー上の一連のボタンには表示効果が適しています。For example, a button by itself shouldn't use reveal, but a set of buttons in a command bar should use Reveal.

コントロール テンプレートを使用して表示効果を追加するUsing the control template to add Reveal

カスタム コントロールまたは再テンプレート化されたコントロールで表示効果を有効にするには、コントロールのコントロール テンプレートを変更します。To enable Reveal on custom controls or re-templated controls, you modify the control's control template. ほとんどのコントロール テンプレートでは、ルートにグリッドがあります。そのルート グリッドで表示効果を使用できるように VisualState を更新します。Most control templates have a grid at the root; update the VisualState of that root grid to use Reveal:

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

表示効果が正しく機能するためには、VisualState 内にブラシと setter の両方が必要である点に注意してください。It's important to note that Reveal needs both the brush and the setters in it's Visual State to work correctly. コントロールのブラシをいずれかの表示ブラシ リソースに設定するだけでは、そのコントロールの表示が有効になりません。Simply setting a control's brush to one of our Reveal brush resources alone won't enable Reveal for that control. 反対に、表示ブラシとなる値がないターゲットまたは設定だけでも表示は有効になりません。Conversely, having only the targets or settings without the values being Reveal brushes will also not enable Reveal.

コントロール テンプレートの変更について詳しくは、XAML コントロール テンプレートに関する記事をご覧ください。To learn more about modifying control templates, see the XAML control templates article.

テンプレートのカスタマイズに使うことができる一連のシステム表示ブラシが作成されました。We've created a set of system Reveal brushes you can use to customize your template. たとえば、ButtonRevealBackground ブラシを使ってカスタム ボタンの背景を作成したり、カスタム一覧に ListViewItemRevealBackground ブラシを使ったりすることができますFor example, you can use the ButtonRevealBackground brush to create a custom button background, or the ListViewItemRevealBackground brush for custom lists, and so on. (XAML でのリソースのしくみについて詳しくは、Xaml リソース ディクショナリに関する記事をご覧ください)。(To learn about how resources work in XAML, check out the Xaml Resource Dictionary article.)

テンプレート全体の例Full template example

表示ボタンの外観を示すテンプレート全体を次に示します。Here's an entire template for what a Reveal Button would look like:

<Style TargetType="Button" x:Key="ButtonStyle1">
    <Setter Property="Background" Value="{ThemeResource ButtonRevealBackground}" />
    <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
    <Setter Property="BorderBrush" Value="{ThemeResource ButtonRevealBorderBrush}" />
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="Padding" Value="8,4,8,4" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="FocusVisualMargin" Value="-3" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">

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

                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                </Storyboard>
                            </VisualState>

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

                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                </Storyboard>
                            </VisualState>

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

                                <Storyboard>
                                    <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.Background" Value="{ThemeResource ButtonRevealBackgroundDisabled}" />
                                    <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ButtonRevealBorderBrushDisabled}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundDisabled}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>

              </VisualStateManager.VisualStateGroups>
                    <ContentPresenter x:Name="ContentPresenter"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Content="{TemplateBinding Content}"
                    ContentTransitions="{TemplateBinding ContentTransitions}"
                    ContentTemplate="{TemplateBinding ContentTemplate}"
                    Padding="{TemplateBinding Padding}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                    AutomationProperties.AccessibilityView="Raw" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

カスタム コントロールに対する表示効果を微調整するFine-tuning the Reveal effect on a custom control

カスタム コントロールまたは再テンプレート化されたコントロールや、カスタムのコマンド実行サーフェスで表示効果を有効にする場合、その効果を最適化するには以下のヒントが役立ちます。When you enable Reveal on a custom or re-templated control or a custom commanding surface, these tips can help you optimize the effect:  

  • 隣接する項目の高さまたは幅が一致しない場合 (特に、リスト内): 境界線のアプローチ動作を削除し、ホバー時のみ境界線を表示しておきます。On adjacent items with sizes that do not align either in height or width (particularly in lists): Remove the border approach behavior and keep the borders shown on hover only.
  • 無効状態への移行と解除が頻繁に発生するコマンド実行項目の場合: 境界線アプローチのブラシを要素のバックプレートとバックプレートの境界線に配置して、状態を強調します。For commanding items that frequently go in and out of the disabled state: Place the border approach brush on the elements' backplates as well as their borders to emphasize their state.
  • 隣接するコマンド実行要素の間隔が狭すぎて接触する場合: 2 つの要素間に 1 px の余白を追加します。For adjacent commanding elements that are so close they touch: Add a 1px margin between the two elements.

推奨と非推奨Do's and don'ts

推奨:Do:

  • ユーザーが多数の操作を実行できる要素 (CommandBar、ナビゲーション メニュー) で表示効果を使うDo use Reveal on elements where the user can take many actions (CommandBars, Navigation menus)
  • 既定で視覚的な区切りがない対話型要素のグループ (一覧、リボン) 内で表示効果を使うDo use Reveal in groupings of interactive elements that do not have visual separators by default (lists, ribbons)
  • 対話型要素が密集している領域では表示を使う (コマンド実行シナリオ)Do use Reveal in areas with a high density of interactive elements (commanding scenarios)
  • 表示効果を適用する項目と項目の間に 1 px の余白を配置するDo put 1px margin spaces between Reveal items

非推奨Don't

  • 静的コンテンツ (背景、テキスト) では表示効果を使わないDon’t use Reveal on static content (backgrounds, text)
  • ポップアップやドロップダウンでは表示効果を使わないDon't use Reveal on popups, flyouts or dropdowns
  • 1 回限りの個別の状況では表示効果を使わないDon’t use Reveal in one-off, isolated situations
  • 非常に多くの項目 (500 epx 超) では表示を使わないDon’t use Reveal on very large items (greater than 500epx)
  • セキュリティ上の決定を行う場合には表示を使わない (ユーザーに提供する必要があるメッセージから注意がそれる可能性があるため)Don’t use Reveal in security decisions, as it may draw attention away from the message you need to deliver to your user

サンプル コードを入手するGet the sample code

表示と Fluent Design SystemReveal and the Fluent Design System

Fluent Design System では、ライト、深度、モーション、マテリアル、スケールを取り入れた、モダンで目を引く UI を作成できます。The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. 表示は、アプリに発光効果を加える Fluent Design System コンポーネントです。Reveal is a Fluent Design System component that adds light to your app. 詳しくは、UWP 用の Fluent Design の概要に関するページをご覧ください。To learn more, see the Fluent Design for UWP overview.