Megosztás a következőn keresztül:

Kombinált mező és lista mező

Kombinált lista (más néven legördülő lista) használatával megjelenítheti a felhasználók által kiválasztható elemek listáját. A kombinált lista kompakt állapotban indul el, és kinyílik a választható elemek listájának megjelenítéséhez. A listamező hasonló a kombinált listához, de nem összecsukható/nem kompakt állapotú. A listamezőkről a cikk végén olvashat bővebben.

Ha a kombinált lista be van zárva, akkor vagy az aktuális kijelölést jeleníti meg, vagy üres, ha nincs kijelölt elem. Amikor a felhasználó kibontja a kombinált listát, megjelenik a választható elemek listája.

Egy legördülő lista képe kompakt állapotban.

Ez a megfelelő vezérlő?

  • Egy legördülő lista használatával a felhasználók egyetlen értéket választhatnak ki egy olyan elemkészletből, amely megfelelően ábrázolható egyetlen sornyi szöveggel.
  • Lista- vagy rácsnézet használata kombinált lista helyett több sornyi szöveget vagy képet tartalmazó elemek megjelenítéséhez.
  • Ha ötnél kevesebb elem van, fontolja meg a választógombok használatát (ha csak egy elem jelölhető ki) vagy jelölőnégyzeteket (ha több elem is kijelölhető).
  • Akkor használjon kombinált listát, ha a kijelölési elemek másodlagos fontosságúak az alkalmazás folyamatában. Ha a legtöbb helyzetben a legtöbb felhasználó számára ajánlott az alapértelmezett beállítás, akkor a listanézet használatával az összes elem megjelenítése a szükségesnél nagyobb figyelmet fordíthat a beállításokra. Kombinált lista használatával helyet takaríthat meg, és minimalizálhatja a zavaró tényezőket.

Példák

A tömörített állapotú kombinált mező fejlécet jeleníthet meg.

Képernyőkép egy legördülő listáról annak összecsukott állapotában.

Bár a kombinált listák a hosszabb karakterláncok támogatásához kibővülnek, kerülje a túl hosszú, nehezen olvasható karakterláncokat.

Példa egy hosszú szöveges karakterláncot tartalmazó legördülő listára

Ha a kombinált listában lévő gyűjtemény elég hosszú, megjelenik egy görgetősáv, amely megfelel annak. Elemek logikai csoportosítása a listában.

Példa egy görgetősávra egy legördülő listában

Recommendations

  • A kombinált listaelemek szöveges tartalmának korlátozása egyetlen sorra.
  • A kombinált lista elemeinek rendezése a leglogikusabb sorrendben. Csoportosítsa a kapcsolódó beállításokat, és helyezze a leggyakoribb beállításokat a lap tetejére. A neveket betűrendbe, számokat numerikus sorrendbe, a dátumokat pedig időrendi sorrendbe rendezheti.

Listamezők

A listamezők lehetővé teszik, hogy a felhasználó egyetlen vagy több elemet válasszon egy gyűjteményből. A listamezők hasonlóak a legördülő listákhoz, azzal a kivételrel, hogy a listamezők mindig nyitva vannak – a listamezőknek nincs kompakt (nem kibontott) állapota. A listában szereplő elemek görgethetők, ha nincs hely a teljes megjelenítéshez.

A listamező a megfelelő vezérlőelem?

  • A listamezők akkor lehetnek hasznosak, ha a lista elemei elég fontosak ahhoz, hogy jól láthatóak legyenek, és ha van elég képernyő-ingatlan a teljes lista megjelenítéséhez.
  • A listamezőknek fel kell hívniuk a felhasználó figyelmét az alternatív megoldások teljes halmazára egy fontos választás során. Ezzel szemben egy legördülő lista kezdetben felhívja a felhasználó figyelmét a kijelölt elemre.
  • Ne használjon listamezőt, ha:
    • A listához nagyon kevés elem tartozik. Egy mindig ugyanazt a 2 lehetőséget kínáló egyválasztós lista jobb lehet, ha választógombokként jelenik meg. Akkor is érdemes választógombokat használni, ha 3 vagy 4 statikus elem szerepel a listában.
    • A listamező egyetlen választással rendelkezik, és mindig ugyanazzal a 2 lehetőséggel rendelkezik, ahol az egyiket úgy lehet vélelmezni, mint a másikat, például "be" és "ki". Használjon egyetlen jelölőnégyzetet vagy kapcsolót.
    • Nagyon sok elem van. A hosszú listákhoz jobb választás a rácsnézet és a listanézet. A csoportosított adatok nagyon hosszú listája esetén előnyben részesítik a szemantikai nagyítást.
    • Az elemek egybefüggő numerikus értékek. Ha ez a helyzet, érdemes lehet csúszkát használni.
    • A kijelölési elemek másodlagos fontosságúak az alkalmazás folyamatában, vagy az alapértelmezett beállítás a legtöbb felhasználó számára ajánlott a legtöbb helyzetben. Ehelyett használjon legördülő listát.

Javaslatok listamezőkhöz

  • A listaelemek ideális tartománya 3–9.
  • A listamezők akkor működnek jól, ha elemei dinamikusan változhatnak.
  • Ha lehetséges, állítsa be a listamező méretét, hogy az elemek listáját ne kelljen pásztázni vagy görgetni.
  • Győződjön meg arról, hogy a listamező célja egyértelmű, és hogy mely elemek vannak kijelölve.
  • Vizuális effektusok és animációk alkalmazása az érintési visszajelzésekhez és az elemek kiválasztott állapotához.
  • A listaelem szöveges tartalmának korlátozása egyetlen sorra. Ha az elemek vizualizációk, testre szabhatja a méretet. Ha egy elem több sornyi szöveget vagy képet tartalmaz, használjon inkább rácsnézetet vagy listanézetet.
  • Használja az alapértelmezett betűtípust, hacsak a márka irányelvei nem jeleznek egy másik betűtípust.
  • Ne használjon listamezőt parancsok végrehajtására vagy más vezérlők dinamikus megjelenítésére vagy elrejtésére.

Kombinált mező létrehozása

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg működés közben a Kombinált lista funkciót

WinUI 3 Katalógus ikon A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

A kombinált listát úgy tölti ki, hogy közvetlenül az Elemek gyűjteményhez ad hozzá objektumokat, vagy az ItemsSource tulajdonságot egy adatforráshoz köti. A ComboBoxhoz hozzáadott elemek ComboBoxItem-tárolókba vannak csomagolva.

Íme egy egyszerű kombinált lista az XAML-ben hozzáadott elemekkel.

<ComboBox Header="Colors" PlaceholderText="Pick a color" Width="200">
    <x:String>Blue</x:String>
    <x:String>Green</x:String>
    <x:String>Red</x:String>
    <x:String>Yellow</x:String>
</ComboBox>

Az alábbi példa bemutatja, hogy egy kombinált lista a FontFamily objektumok gyűjteményéhez van-e kötésben.

<ComboBox x:Name="FontsCombo" Header="Fonts" Height="44" Width="296"
          ItemsSource="{x:Bind fonts}" DisplayMemberPath="Source"/>

ObservableCollection<FontFamily> fonts = new ObservableCollection<FontFamily>()
{
    fonts.Add(new FontFamily("Arial"));
    fonts.Add(new FontFamily("Courier New"));
    fonts.Add(new FontFamily("Times New Roman"));
};

Elem kijelölése

A ListView-hoz és a GridView-hoz hasonlóan a ComboBox is a Selectorból származik, így a felhasználó kijelölési módja megegyezik a szokásos módon.

A kombinált lista kijelölt elemét a SelectedItem tulajdonság használatával szerezheti be vagy állíthatja be, és a SelectedIndex tulajdonság használatával lekérheti vagy beállíthatja a kijelölt elem indexét.

Ha egy adott tulajdonság értékét szeretné lekérni a kijelölt adatelemen, használhatja a SelectedValue tulajdonságot. Ebben az esetben a SelectedValuePath beállításával adja meg, hogy a kijelölt elem melyik tulajdonságából kérje le az értéket.

Jótanács

Ha a SelectedItem vagy a SelectedIndex értékét az alapértelmezett kijelöléshez állítja be, kivétel keletkezik, ha a tulajdonság beállítása a legördülő lista Elemek gyűjteményének feltöltése előtt történik. Ha nem XAML-ben definiálja az elemeket, akkor a legjobb, ha kezeli a kombinált lista Betöltés eseményét, és a SelectedItem vagy a SelectedIndex értéket a Betöltés eseménykezelőben állítja be.

Ezekhez a tulajdonságokhoz az XAML-ben is csatlakozhat, vagy kezelheti a SelectionChanged eseményt , hogy reagáljon a kijelölés változásaira.

Az eseménykezelő kódban lekérheti a kijelölt elemet a SelectionChangedEventArgs.AddedItems tulajdonságból. A korábban kijelölt elemet (ha van ilyen) a SelectionChangedEventArgs.RemovedItems tulajdonságból szerezheti be . Az AddedItems és a RemovedItems gyűjtemények mindegyike csak 1 elemet tartalmaz, mert a kombinált lista nem támogatja a többszörös kijelölést.

Ez a példa bemutatja a SelectionChanged esemény kezelését, valamint a kijelölt elemhez való kötést.

<StackPanel>
    <ComboBox x:Name="colorComboBox" Width="200"
              Header="Colors" PlaceholderText="Pick a color"
              SelectionChanged="ColorComboBox_SelectionChanged">
        <x:String>Blue</x:String>
        <x:String>Green</x:String>
        <x:String>Red</x:String>
        <x:String>Yellow</x:String>
    </ComboBox>

    <Rectangle x:Name="colorRectangle" Height="30" Width="100"
               Margin="0,8,0,0" HorizontalAlignment="Left"/>

    <TextBlock Text="{x:Bind colorComboBox.SelectedIndex, Mode=OneWay}"/>
    <TextBlock Text="{x:Bind colorComboBox.SelectedItem, Mode=OneWay}"/>
</StackPanel>

private void ColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    string colorName = e.AddedItems[0].ToString();
    Color color;
    switch (colorName)
    {
        case "Yellow":
            color = Colors.Yellow;
            break;
        case "Green":
            color = Colors.Green;
            break;
        case "Blue":
            color = Colors.Blue;
            break;
        case "Red":
            color = Colors.Red;
            break;
    }
    colorRectangle.Fill = new SolidColorBrush(color);
}

KiválasztásMegváltozott és billentyűzetes navigáció

Alapértelmezés szerint a SelectionChanged esemény akkor fordul elő, amikor egy felhasználó rákattint, koppint vagy lenyomja az Enter billentyűt a lista egy elemére a kijelölés véglegesítéséhez, és a kombinált lista bezárul. A kijelölés nem változik, ha a felhasználó a nyílbillentyűkkel navigál a megnyitott kombinált lista listában.

Ha olyan kombinált listát szeretne készíteni, amely "élő frissítéseket" tartalmaz, miközben a felhasználó a nyílbillentyűkkel navigál a megnyitott listában (például egy betűtípus-kijelölési legördülő menüben), állítsa a SelectionChangedTrigger beállítást Always értékre. Ez azt eredményezi, hogy a SelectionChanged esemény akkor következik be, amikor a fókusz a megnyitott lista egy másik elemére változik.

Szöveg keresése

A kombinált listák automatikusan támogatják a keresést a gyűjteményekben. Mivel a felhasználók karaktereket írnak egy fizikai billentyűzetre, miközben egy nyitott vagy zárt kombinált listára összpontosítanak, a rendszer a felhasználó sztringjének megfelelő jelölteket nyitja meg. Ez a funkció különösen hasznos egy hosszú lista megnyitásakor. Például, ha egy államok listáját tartalmazó legördülő listát használ, a felhasználók a "w" billentyűvel előhozhatják és megtekinthetik a "Washington"-t a gyors kiválasztás céljából. A szöveges keresés nem érzékeny a kis- és nagybetűkre.

A funkció letiltásához az IsTextSearchEnabledtulajdonságot false (hamis ) értékre állíthatja.

Kombinált lista szerkeszthetővé tétele

Alapértelmezés szerint a kombinált lista lehetővé teszi, hogy a felhasználó egy előre definiált beállításlistából válasszon. Vannak azonban olyan esetek, amikor a lista csak az érvényes értékek egy részét tartalmazza, és a felhasználónak meg kell tudnia adni a listán nem szereplő egyéb értékeket. Ennek támogatásához szerkeszthetővé teheti a kombinált listát.

Ha szerkeszthetővé szeretne tenni egy kombinált listát, állítsa az IsEditable tulajdonság értékét igaz értékre. Ezután kezelje a TextSubmitted eseményt, hogy működjön a felhasználó által megadott értékkel.

Alapértelmezés szerint a SelectedItem érték frissül, amikor a felhasználó véglegesíti az egyéni szöveget. Ezt a viselkedést felülbírálhatja úgy, hogy igaz értékre állítja a Kezelt értéket a TextSubmitted event argsben. Amikor az esemény kezelése jelölve van, a legördülő lista nem hajt végre további műveleteket az esemény után, és szerkesztési állapotban marad. A SelectedItem nem frissül.

Ez a példa egy egyszerű szerkeszthető kombinált listát mutat be. A lista egyszerű sztringeket tartalmaz, és a felhasználó által megadott értékeket a rendszer a megadott módon használja.

A "legutóbb használt nevek" választó lehetővé teszi, hogy a felhasználó egyéni sztringeket adjon meg. A "RecentlyUsedNames" lista tartalmaz néhány értéket, amelyek közül a felhasználó választhat, de a felhasználó új, egyéni értéket is hozzáadhat. A "CurrentName" tulajdonság az aktuálisan megadott nevet jelöli.

<ComboBox IsEditable="true"
          ItemsSource="{x:Bind RecentlyUsedNames}"
          SelectedItem="{x:Bind CurrentName, Mode=TwoWay}"/>

Elküldött szöveg

A TextSubmitted eseményt kezelheti a felhasználó által megadott értékkel való együttműködéshez. Az eseménykezelőben általában ellenőrzi, hogy a felhasználó által megadott érték érvényes-e, majd használja az értéket az alkalmazásban. A helyzettől függően hozzáadhatja az értéket a kombinált lista jövőbeli használatra vonatkozó beállításainak listájához is.

A TextSubmitted esemény akkor következik be, ha ezek a feltételek teljesülnek:

  • Az IsEditable tulajdonság igaz
  • A felhasználó olyan szöveget ír be, amely nem egyezik meg a kombinált lista meglévő bejegyzésével
  • A felhasználó lenyomja az Enter billentyűt, vagy áthelyezi a fókuszt a kombinált listából.

A TextSubmitted esemény nem fordul elő, ha a felhasználó szöveget ír be, majd felfelé vagy lefelé navigál a listában.

Minta – Bemenet ellenőrzése és helyi használat

Ebben a példában a betűméret-választó a betűméret-rámpának megfelelő értékkészletet tartalmaz, de a felhasználó olyan betűméreteket is megadhat, amelyek nem szerepelnek a listában.

Ha a felhasználó olyan értéket ad hozzá, amely nem szerepel a listában, a betűméret frissül, de az érték nem lesz hozzáadva a betűméretek listájához.

Ha az újonnan megadott érték érvénytelen, a SelectedValue használatával visszaállíthatja a Text tulajdonságot az utolsó ismert jó értékre.

<ComboBox x:Name="fontSizeComboBox"
          IsEditable="true"
          ItemsSource="{x:Bind ListOfFontSizes}"
          TextSubmitted="FontSizeComboBox_TextSubmitted"/>

private void FontSizeComboBox_TextSubmitted(ComboBox sender, ComboBoxTextSubmittedEventArgs e)
{
    if (byte.TryParse(e.Text, out double newValue))
    {
        // Update the app's font size.
        _fontSize = newValue;
    }
    else
    {
        // If the item is invalid, reject it and revert the text.
        // Mark the event as handled so the framework doesn't update the selected item.
        sender.Text = sender.SelectedValue.ToString();
        e.Handled = true;
    }
}

Minta – Bemenet ellenőrzése és hozzáadás a listához

Itt a "kedvenc színválasztó" tartalmazza a leggyakoribb kedvenc színeket (Piros, Kék, Zöld, Narancssárga), de a felhasználó megadhat egy olyan kedvenc színt, amely nem szerepel a listában. Amikor a felhasználó érvényes színt ad hozzá (például Rózsaszín), az újonnan beírt szín hozzáadódik a listához, és aktív "kedvenc színként" van beállítva.

<ComboBox x:Name="favoriteColorComboBox"
          IsEditable="true"
          ItemsSource="{x:Bind ListOfColors}"
          TextSubmitted="FavoriteColorComboBox_TextSubmitted"/>

private void FavoriteColorComboBox_TextSubmitted(ComboBox sender, ComboBoxTextSubmittedEventArgs e)
{
    if (IsValid(e.Text))
    {
        FavoriteColor newColor = new FavoriteColor()
        {
            ColorName = e.Text,
            Color = ColorFromStringConverter(e.Text)
        }
        ListOfColors.Add(newColor);
    }
    else
    {
        // If the item is invalid, reject it but do not revert the text.
        // Mark the event as handled so the framework doesn't update the selected item.
        e.Handled = true;
    }
}

bool IsValid(string Text)
{
    // Validate that the string is: not empty; a color.
}
  • Last updated on