Vnořené uživatelské rozhraní v položkách seznamu

Vnořené uživatelské rozhraní je uživatelské rozhraní( UI), které zveřejňuje vnořené ovládací prvky s možností akce uzavřené uvnitř kontejneru, které můžou mít také nezávislý fokus.

Pomocí vnořeného uživatelského rozhraní můžete prezentovat uživatele s dalšími možnostmi, které pomáhají urychlit provádění důležitých akcí. Čím více akcí ale zveřejníte, tím složitější bude vaše uživatelské rozhraní. Při volbě použití tohoto vzoru uživatelského rozhraní je potřeba věnovat zvláštní pozornost. Tento článek obsahuje pokyny, které vám pomůžou určit nejlepší postup pro konkrétní uživatelské rozhraní.

Důležitá rozhraní API: ListView – třída, GridView – třída

V tomto článku probereme vytvoření vnořeného uživatelského rozhraní v ListView a GridView položek. I když tato část nemluví o jiných vnořených případech uživatelského rozhraní, tyto koncepty jsou přenositelné. Než začnete, měli byste být obeznámeni s obecnými pokyny k používání ovládacích prvků ListView nebo GridView v uživatelském rozhraní, které najdete v článcích o zobrazení seznamů a seznamů a mřížce .

V tomto článku používáme seznam termínů, položku seznamu a vnořené uživatelské rozhraní , jak je definováno zde:

• Seznam odkazuje na kolekci položek obsažených v zobrazení seznamu nebo v zobrazení mřížky.
• Položka seznamu odkazuje na jednotlivé položky, se kterými může uživatel v seznamu provádět akce.
• Vnořené uživatelské rozhraní odkazuje na prvky uživatelského rozhraní v rámci položky seznamu, na které může uživatel provádět akce odděleně od provedení akce u samotné položky seznamu.

POZNÁMKA ListView i GridView jsou odvozeny z ListViewBase třídy, takže mají stejné funkce, ale zobrazit data odlišně. Informace o seznamech uvedené v tomto článku platí jak pro řízení ListView, tak i GridView.

Primární a sekundární akce

Při vytváření uživatelského rozhraní se seznamem zvažte, jaké akce může uživatel z těchto položek seznamu provést.

• Může uživatel kliknout na položku a provést akci?
  • Kliknutím na položku seznamu obvykle zahájíte akci, ale nemusí to tak být.
• Existuje více než jedna akce, které může uživatel provést?
  • Když třeba klepnete na e-mail v seznamu, otevře se tento e-mail. Může ale existovat i další akce, jako je odstranění e-mailu, které by uživatel chtěl provést, aniž by ho napřed otevřel. Pro uživatele by byl přínosný přístup k této akci přímo v seznamu.
• Jak by měly být akce zpřístupněny uživateli?
  • Zvažte všechny vstupní typy. Některé formy vnořeného uživatelského rozhraní fungují skvěle s jednou metodou vstupu, ale nemusí fungovat s jinými metodami.

Primární akcí je to, co uživatel očekává, když stiskne položku seznamu.

Sekundární akce jsou obvykle akcelerátory přidružené k položkám seznamu. Tyto akcelerátory můžou být určené ke správě seznamů nebo akcím souvisejícím s položkou seznamu.

Možnosti pro sekundární akce

Při vytváření uživatelského rozhraní seznamu je nejprve nutné se ujistit, že zohledníte všechny metody zadávání, které Windows podporuje. Další informace o různých typech vstupu najdete v tématu Úvod.

Jakmile se ujistíte, že vaše aplikace podporuje všechny vstupy, které Windows podporuje, měli byste se rozhodnout, jestli jsou sekundární akce aplikace dostatečně důležité, aby se v hlavním seznamu zpřístupnily jako akcelerátory. Mějte na paměti, že čím více akcí zveřejňujete, tím složitější bude uživatelské rozhraní. Opravdu potřebujete vystavit sekundární akce v hlavním uživatelském rozhraní seznamu, nebo je můžete umístit někam jinam?

Můžete zvážit zveřejnění dalších akcí v hlavním uživatelském rozhraní seznamu, když tyto akce musí být přístupné všemi vstupy za všech okolností.

Pokud se rozhodnete, že vložení sekundárních akcí do hlavního uživatelského rozhraní seznamu není nutné, existuje několik dalších způsobů, jak je můžete uživateli vystavit. Tady je několik možností, které můžete zvážit, kde umístit sekundární akce.

Vložení sekundárních akcí na stránku podrobností

Umístěte sekundární akce na stránku, na kterou položka seznamu přejde, když je stisknutá. Při použití vzoru seznamu/podrobností je stránka podrobností často vhodným místem pro umístění sekundárních akcí.

Další informace najdete v vzoru seznamu a podrobností.

Dejte sekundární akce do kontextové nabídky

Umístěte sekundární akce do místní nabídky, ke které má uživatel přístup přes kliknutí pravým tlačítkem myši nebo stisknutí a podržení. To uživateli umožňuje provádět nějakou akci, například odstranit e-mail, aniž by musel načíst stránku podrobností. Tyto možnosti je vhodné zpřístupnit také na stránce podrobností, protože místní nabídky mají být akcelerátory místo primárního uživatelského rozhraní.

Pro zpřístupnění sekundárních akcí, když je vstup z herního ovladače nebo dálkového ovladače, doporučujeme použít místní nabídku.

Další informace najdete v tématu Místní nabídky a kontextové nabídky.

Umístěte sekundární akce do rozhraní zobrazeného při přejetí pro optimalizaci vstupu ukazatele

Pokud očekáváte, že aplikace bude často používána se vstupem ukazatele, jako je myš a pero, a chcete, aby sekundární akce byly snadno dostupné jenom těmto vstupům, můžete sekundární akce zobrazit pouze při najetí myší. Tento akcelerátor je viditelný jenom v případě, že se použije vstup ukazatele, takže nezapomeňte použít i další možnosti pro podporu jiných typů vstupu.

Další informace najdete v tématu Interakce myší.

Umístění uživatelského rozhraní pro primární a sekundární akce

Pokud se rozhodnete, že sekundární akce by se měly zpřístupnit v hlavním uživatelském rozhraní seznamu, doporučujeme následující pokyny.

Když vytvoříte položku seznamu s primárními a sekundárními akcemi, umístěte primární akci vlevo a sekundární akce doprava. V kulturách čtení zleva doprava uživatelé spojují akce na levé straně položky seznamu primárním akcím.

V těchto příkladech si řekneme o uživatelském rozhraní seznamu, ve kterém položka proudí horizontálně (je širší než výška). Můžete ale mít položky seznamu, které mají tvar čtverce, nebo jsou vyšší než širší. Obvykle se jedná o položky používané v mřížce. Pokud se seznam pro tyto položky neposouvá vertikálně, můžete vedlejší akce umístit na spodní část položky seznamu místo na pravé straně.

Zvažte všechny vstupy.

Při rozhodování o použití vnořeného uživatelského rozhraní také vyhodnoťte uživatelské prostředí se všemi typy vstupů. Jak už bylo zmíněno dříve, vnořené uživatelské rozhraní funguje skvěle pro některé vstupní typy. Ale to nefunguje vždy skvěle pro některé jiné. Zejména klávesnice, ovladač a vzdálené vstupy mohou mít potíže s přístupem k vnořeným prvkům uživatelského rozhraní. Nezapomeňte postupovat podle následujících pokynů, abyste měli jistotu, že windows funguje se všemi typy vstupů.

Zpracování vnořeného uživatelského rozhraní

Pokud je v položce seznamu vnořeno více než jedna akce, doporučujeme postupovat podle těchto pokynů pro navigaci pomocí klávesnice, gamepadu, dálkového ovladače nebo jiného vstupu bez ukazatele.

Vnořené uživatelské rozhraní, ve kterém položky seznamu provádějí akci

Pokud uživatelské rozhraní seznamu s vnořenými prvky podporuje akce, jako je vyvolání, výběr (jeden nebo více) nebo operace přetažení myší, doporučujeme tyto techniky šipkování procházet vnořenými prvky uživatelského rozhraní.

Gamepad

Pokud je vstup z herního panelu, poskytněte toto uživatelské prostředí:

• Z A pravá šipka přenese fokus na B.
• Z B, pravý směrový klíč se zaměřuje na C.
• Z C, pravá směrová klávesa buď provede žádnou operaci, nebo pokud se na pravé straně seznamu nachází zaostřitelný prvek uživatelského rozhraní, umístěte tam fokus.
• Když použijete levou šipku z C, fokus se přesune na B.
• Ze B levá šipka přesune zaměření na A.
• Z A, levý směrový klíč buď neprovádí operaci, nebo pokud je napravo od seznamu zaostřitelný prvek uživatelského rozhraní, přesune tam fokus.
• Směrový klíč od A, B nebo C se zaměřuje na D.
• Klávesa se šipkou doprava přemístí fokus z prvku uživatelského rozhraní nalevo od položky seznamu na A.
• Z prvku uživatelského rozhraní napravo od položky seznamu umístí levý směrový klíč fokus na A.

Klávesnice

Při vstupu z klávesnice toto je zkušenost, kterou uživatel získá:

• Klávesa Tab z A umístí fokus na B.
• Od B, klávesa Tab přesune fokus na C.
• Klávesa Tab v jazyce C přesune fokus na další fokuselný prvek uživatelského rozhraní v pořadí ovládacích prvků.
• V jazyce C se klávesa Shift+tab zaměřuje na B.
• Z B klávesa Shift+tab nebo šipka doleva přesune fokus na A.
• Klávesa Shift+Tab z A přesune fokus na další fokuselný prvek uživatelského rozhraní v obráceném pořadí ovládacích prvků.
• Klávesa se šipkou dolů od A, B nebo C umístí fokus na D.
• Z prvku uživatelského rozhraní vlevo od položky seznamu se fokus přesune na klávesu A.
• V prvku uživatelského rozhraní napravo od položky seznamu se fokus přesune klávesa Shift na C.

Pokud chcete tohoto uživatelského rozhraní dosáhnout, nastavte v seznamu hodnotu IsItemClickEnabled na true . SelectionMode může být libovolná hodnota.

Kód, který chcete implementovat, najdete v části Příklad tohoto článku.

Vnořené uživatelské rozhraní, ve kterém položky seznamu neprovádějí akci

Zobrazení seznamu můžete použít, protože poskytuje virtualizaci a optimalizované chování posouvání, ale nemá akci přidruženou k položce seznamu. Tato uživatelská rozhraní obvykle používají seznamovou položku pouze ke seskupení elementů a zajistit, aby se posouvaly jako sada.

Tento druh uživatelského rozhraní bývá mnohem složitější než v předchozích příkladech s mnoha vnořenými prvky, se kterými může uživatel provádět akce.

Pokud chcete tohoto uživatelského rozhraní dosáhnout, nastavte v seznamu následující vlastnosti:

• SelectionMode to None.
• IsItemClickEnabled nastavit na false.
• IsFocusEngagementEnabled je nastaveno na true.

<ListView SelectionMode="None" IsItemClickEnabled="False" >
    <ListView.ItemContainerStyle>
         <Style TargetType="ListViewItem">
             <Setter Property="IsFocusEngagementEnabled" Value="True"/>
         </Style>
    </ListView.ItemContainerStyle>
</ListView>

Pokud položky seznamu neprovádějí nějakou akci, doporučujeme, aby se navigace zpracovávala pomocí herního panelu nebo klávesnice.

Gamepad

Pokud je vstup z herního panelu, poskytněte toto uživatelské prostředí:

• Z položky seznamu umístí směrový klíč dolů fokus na další položku seznamu.
• V položce seznamu funkce šipky vlevo/vpravo buď neprovádí žádnou operaci, nebo pokud existuje zaměřitelný prvek uživatelského rozhraní napravo od seznamu, přesuňte tam zaměření.
• Od položky seznamu tlačítko 'A' umístí fokus na vnořené uživatelské rozhraní s prioritou nahoře/dolů vlevo/vpravo.
• V rámci vnořeného uživatelského rozhraní postupujte podle navigačního modelu XY Focus. Fokus může procházet jenom vnořeným uživatelským rozhraním obsaženým v aktuální položce seznamu, dokud uživatel nestiskne tlačítko B, čímž se fokus přesune zpět na položku seznamu.

Klávesnice

Při vstupu z klávesnice toto je zkušenost, kterou uživatel získá:

• V položce seznamu se klávesa se šipkou dolů přesune fokus na další položku seznamu.
• V položce seznamu nevyvolá stisknutí klávesy vlevo/vpravo žádnou akci.
• Stisknutím klávesy Tab se v položce seznamu přesune fokus na další zarážku tabulátoru mezi položkou vnořeného uživatelského rozhraní.
• Z jedné z vnořených položek uživatelského rozhraní se stisknutím tabulátoru přechází mezi vnořenými položkami uživatelského rozhraní v pořadí tabulátoru. Jakmile jsou všechny vnořené prvky uživatelského rozhraní prozkoumány, umístí fokus na další ovládací prvek v pořadí záložek po ListView.
• Klávesová zkratka Shift+Tab se chová opačně oproti chování klávesy Tab.

Example

Tento příklad ukazuje, jak implementovat vnořené uživatelské rozhraní, kde položky seznamu provádějí akci.

<ListView SelectionMode="None" IsItemClickEnabled="True"
          ChoosingItemContainer="listview1_ChoosingItemContainer"/>

private void OnListViewItemKeyDown(object sender, KeyRoutedEventArgs e)
{
    // Code to handle going in/out of nested UI with gamepad and remote only.
    if (e.Handled == true)
    {
        return;
    }

    var focusedElementAsListViewItem = FocusManager.GetFocusedElement() as ListViewItem;
    if (focusedElementAsListViewItem != null)
    {
        // Focus is on the ListViewItem.
        // Go in with Right arrow.
        Control candidate = null;

        switch (e.OriginalKey)
        {
            case Windows.System.VirtualKey.GamepadDPadRight:
            case Windows.System.VirtualKey.GamepadLeftThumbstickRight:
                var rawPixelsPerViewPixel = DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel;
                GeneralTransform generalTransform = focusedElementAsListViewItem.TransformToVisual(null);
                Point startPoint = generalTransform.TransformPoint(new Point(0, 0));
                Rect hintRect = new Rect(startPoint.X * rawPixelsPerViewPixel, startPoint.Y * rawPixelsPerViewPixel, 1, focusedElementAsListViewItem.ActualHeight * rawPixelsPerViewPixel);
                candidate = FocusManager.FindNextFocusableElement(FocusNavigationDirection.Right, hintRect) as Control;
                break;
        }

        if (candidate != null)
        {
            candidate.Focus(FocusState.Keyboard);
            e.Handled = true;
        }
    }
    else
    {
        // Focus is inside the ListViewItem.
        FocusNavigationDirection direction = FocusNavigationDirection.None;
        switch (e.OriginalKey)
        {
            case Windows.System.VirtualKey.GamepadDPadUp:
            case Windows.System.VirtualKey.GamepadLeftThumbstickUp:
                direction = FocusNavigationDirection.Up;
                break;
            case Windows.System.VirtualKey.GamepadDPadDown:
            case Windows.System.VirtualKey.GamepadLeftThumbstickDown:
                direction = FocusNavigationDirection.Down;
                break;
            case Windows.System.VirtualKey.GamepadDPadLeft:
            case Windows.System.VirtualKey.GamepadLeftThumbstickLeft:
                direction = FocusNavigationDirection.Left;
                break;
            case Windows.System.VirtualKey.GamepadDPadRight:
            case Windows.System.VirtualKey.GamepadLeftThumbstickRight:
                direction = FocusNavigationDirection.Right;
                break;
            default:
                break;
        }

        if (direction != FocusNavigationDirection.None)
        {
            Control candidate = FocusManager.FindNextFocusableElement(direction) as Control;
            if (candidate != null)
            {
                ListViewItem listViewItem = sender as ListViewItem;

                // If the next focusable candidate to the left is outside of ListViewItem,
                // put the focus on ListViewItem.
                if (direction == FocusNavigationDirection.Left &&
                    !listViewItem.IsAncestorOf(candidate))
                {
                    listViewItem.Focus(FocusState.Keyboard);
                }
                else
                {
                    candidate.Focus(FocusState.Keyboard);
                }
            }

            e.Handled = true;
        }
    }
}

private void listview1_ChoosingItemContainer(ListViewBase sender, ChoosingItemContainerEventArgs args)
{
    if (args.ItemContainer == null)
    {
        args.ItemContainer = new ListViewItem();
        args.ItemContainer.KeyDown += OnListViewItemKeyDown;
    }
}

// DependencyObjectExtensions.cs definition.
public static class DependencyObjectExtensions
{
    public static bool IsAncestorOf(this DependencyObject parent, DependencyObject child)
    {
        DependencyObject current = child;
        bool isAncestor = false;

        while (current != null && !isAncestor)
        {
            if (current == parent)
            {
                isAncestor = true;
            }

            current = VisualTreeHelper.GetParent(current);
        }

        return isAncestor;
    }
}