Színválasztó

A rendszer egy színválasztót használ a színek tallózásához és kiválasztásához. Alapértelmezés szerint lehetővé teszi, hogy a felhasználó végigjárja a színeket egy színspektrumon, vagy adjon meg egy színt a Red-Green-Blue (RGB), a Hue-Saturation-Value (HSV) vagy a Hexadecimális szövegmezőkben.

Ez a megfelelő vezérlő?

A színválasztóval lehetővé teszi, hogy a felhasználó színeket válasszon az alkalmazásban. Például módosíthatja a színbeállításokat, például a betűszíneket, a hátteret vagy az alkalmazás témaszíneit.

Ha az alkalmazás tollal történő rajzoláshoz vagy hasonló feladatokhoz készült, érdemes lehet a színválasztóval együtt szabadkézi vezérlőket használni.

Recommendations

• Gondolja át, milyen színválasztási felület felel meg az alkalmazásnak. Előfordulhat, hogy egyes forgatókönyvek nem igényelnek részletes színválasztást, és egy egyszerűsített válogató előnyére válhatnak
• A legpontosabb színválasztási élmény érdekében használja a négyzetspektrumot, és győződjön meg arról, hogy legalább 256x256px, vagy adja meg a szövegbeviteli mezőket, hogy a felhasználók finomíthassák a kiválasztott színüket.
• Ha úszópanelen használja, ne véglegesítse a színkiválasztást pusztán a spektrum megérintésével vagy a csúszka állításával. A kijelölés véglegesítése:
  • Adjon meg véglegesítési és lemondási gombokat a kijelölés alkalmazásához vagy megszakításához. A vissza gomb megnyomása vagy a felugró panelen kívülre való koppintás bezárja azt, és nem menti a felhasználó kijelölését.
  • Vagy véglegesítse a kijelölést a legördülő panel bezárásakor úgy, hogy a panelen kívülre koppint, vagy lenyomja a vissza gombot.

Színválasztó létrehozása

• Fontos API-k:ColorPicker osztály, Szín tulajdonság, ColorChanged esemény

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a ColorPicker működését

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.

Ez a példa bemutatja, hogyan hozhat létre alapértelmezett színválasztót az XAML-ben.

<ColorPicker x:Name="myColorPicker"/>

Alapértelmezés szerint a színválasztó a választott szín előnézetét jeleníti meg a színspektrum melletti négyszögletes sávon. A ColorChanged esemény vagy a Color tulajdonság használatával elérheti a kijelölt színt, és használhatja azt az alkalmazásában. A részletes kódért tekintse meg az alábbi példákat.

Kötés a választott színhez

Amikor a színkijelölésnek azonnal érvénybe kell lépnie, adatkötést használhat a Szín tulajdonságra, vagy kezelheti a ColorChanged eseményt a kódban a kiválasztott szín eléréséhez.

Ebben a példában a SolidColorBrush Szín tulajdonságát, amelyet a téglalap Kitöltéseként használnak, közvetlenül a színválasztó kijelölt színéhez kötik. A színválasztó bármilyen módosítása élőben módosítja a hozzárendelt tulajdonságot.

<ColorPicker x:Name="myColorPicker"
             ColorSpectrumShape="Ring"
             IsColorPreviewVisible="False"
             IsColorChannelTextInputVisible="False"
             IsHexInputVisible="False"/>

<Rectangle Height="50" Width="50">
    <Rectangle.Fill>
        <SolidColorBrush Color="{x:Bind myColorPicker.Color, Mode=OneWay}"/>
    </Rectangle.Fill>
</Rectangle>

Ez a példa egy egyszerűsített színválasztót használ, amely csak a kört és a csúszkát használja, ami gyakori "alkalmi" színválasztási felület. Ha a színváltozás valós időben látható és történik az érintett objektumon, nem kell megjelenítenie a szín előnézeti sávját. További információt a Színválasztó testreszabása című szakaszban talál.

A választott szín mentése

Bizonyos esetekben nem szeretné azonnal alkalmazni a színváltozást. Ha például egy úszó panelen egy színválasztót üzemeltet, azt javasoljuk, hogy csak akkor alkalmazza a kijelölt színt, ha a felhasználó megerősítette a kijelölést, vagy bezárta az úszó panelt. A kiválasztott színértéket később is mentheti.

Ebben a példában egy színválasztót helyez el egy lebegő ablakban a Megerősítés és a Mégse gombokkal. Amikor a felhasználó megerősíti a színválasztást, mentse a kiválasztott színt, hogy később használhassa az alkalmazásban.

<Page.Resources>
    <Flyout x:Key="myColorPickerFlyout">
        <RelativePanel>
            <ColorPicker x:Name="myColorPicker"
                         IsColorChannelTextInputVisible="False"
                         IsHexInputVisible="False"/>

            <Grid RelativePanel.Below="myColorPicker"
                  RelativePanel.AlignLeftWithPanel="True"
                  RelativePanel.AlignRightWithPanel="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Button Content="OK" Click="confirmColor_Click"
                        Margin="0,12,2,0" HorizontalAlignment="Stretch"/>
                <Button Content="Cancel" Click="cancelColor_Click"
                        Margin="2,12,0,0" HorizontalAlignment="Stretch"
                        Grid.Column="1"/>
            </Grid>
        </RelativePanel>
    </Flyout>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button x:Name="colorPickerButton"
            Content="Pick a color"
            Flyout="{StaticResource myColorPickerFlyout}"/>
</Grid>

private Color myColor;

private void confirmColor_Click(object sender, RoutedEventArgs e)
{
    // Assign the selected color to a variable to use outside the popup.
    myColor = myColorPicker.Color;

    // Close the Flyout.
    colorPickerButton.Flyout.Hide();
}

private void cancelColor_Click(object sender, RoutedEventArgs e)
{
    // Close the Flyout.
    colorPickerButton.Flyout.Hide();
}

A színválasztó konfigurálása

Nem minden mező szükséges ahhoz, hogy a felhasználó színt válasszon, így a színválasztó rugalmas. Számos lehetőséget kínál, amelyekkel az igényeinek megfelelően konfigurálhatja a vezérlőt.

Ha például a felhasználónak nincs szüksége pontos vezérlőre, például kiemelőszínt választ egy jegyzetkészítő alkalmazásban, egyszerűsített felhasználói felületet használhat. Elrejtheti a szövegbeviteli mezőket, és körre módosíthatja a színspektrumot.

Ha a felhasználónak pontos vezérlőre van szüksége, például egy grafikus tervezőalkalmazásban, a szín minden eleméhez megjelenítheti a csúszkákat és a szövegbeviteli mezőket is.

A kör spektrumának megjelenítése

Ez a példa bemutatja, hogyan konfigurálhatja a ColorSpectrumShape tulajdonságot úgy, hogy az alapértelmezett négyzet helyett körkörös spektrumot használjon.

<ColorPicker x:Name="myColorPicker"
             ColorSpectrumShape="Ring"/>

Ha választania kell a négyzet és a kör színspektrum között, az elsődleges szempont a pontosság. A felhasználó jobban szabályozhatja, ha egy adott színt négyzet használatával választ ki, mert a színtartomány nagyobb része jelenik meg. Érdemes a kör spektrumát az "alkalmi" színválasztási élménynek tekinteni.

Az alfa csatorna megjelenítése

Ebben a példában egy átlátszósági csúszkát és egy szövegdobozt engedélyez a színválasztón.

<ColorPicker x:Name="myColorPicker"
             IsAlphaEnabled="True"/>

Egyszerű választó megjelenítése

Ez a példa bemutatja, hogyan konfigurálhatja a színválasztót egy egyszerű felhasználói felülettel az "alkalmi" használathoz. Megjeleníti a körkörös spektrumot, és elrejti az alapértelmezett szövegbeviteli mezőket. Ha a színváltozás valós időben látható és történik az érintett objektumon, nem kell megjelenítenie a szín előnézeti sávját. Ellenkező esetben a szín előnézetének láthatónak kell lennie.

<ColorPicker x:Name="myColorPicker"
             ColorSpectrumShape="Ring"
             IsColorPreviewVisible="False"
             IsColorChannelTextInputVisible="False"
             IsHexInputVisible="False"/>

Az elrendezés irányának megadása

A Tájolás tulajdonság használatával megadhatja, hogy a ColorPickernek függőlegesen vagy vízszintesen kell-e igazodnia. Ez befolyásolja a szerkesztési vezérlők színspektrumhoz viszonyított helyét. Alapértelmezés szerint a tájolás függőleges.

<ColorPicker IsAlphaEnabled="True" 
             Orientation="Horizontal"/>

Megjegyzés:

Ha a Tájolás vízszintes értékre van állítva, a ColorPicker nem alkalmazza az IsMoreButtonVisible tulajdonságot.

További funkciók megjelenítése vagy elrejtése

Ez a táblázat a ColorPicker-vezérlő konfigurálásához használható összes beállítást tartalmazza.

Tulajdonság	Tulajdonságok
Színspektrum	SzínSpektrumLátható-e, SzínSpektrumAlakja, SzínSpektrumÖsszetevői
Szín előnézete	SzínelőnézetLátható-e
Színértékek	SzínszabályzóLátható, SzíncsatornaSzövegBeviteliLátható
Átlátszatlansági értékek	Alfa engedélyezve van-e (IsAlphaEnabled), látható-e az alfa csúszka (IsAlphaSliderVisible), látható-e az alfa szövegbevitel (IsAlphaTextInputVisible)
Hexa értékek	IsHexInputLátható

Megjegyzés:

Az IsAlphaEnabled értéknek igaznak kell lennie az átlátszatlansági szövegmező és a csúszka megjelenítéséhez. A bemeneti vezérlők láthatósága az IsAlphaTextInputVisible és az IsAlphaSliderVisible tulajdonsággal módosítható. Részletekért tekintse meg az API dokumentációját.

Kapcsolódó cikkek

• Pen és toll interakciók Windows alkalmazásokban
• Szabadkézés