Görsel durumlar

Makale
09/30/2024

.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI) Visual State Manager, koddan kullanıcı arabiriminde görsel değişiklikler yapmak için yapılandırılmış bir yol sağlar. Çoğu durumda, bir uygulamanın kullanıcı arabirimi XAML'de tanımlanır ve bu XAML, Visual State Manager'ın kullanıcı arabiriminin görsellerini nasıl etkilediğini açıklayan işaretlemeler içerebilir.

Visual State Manager, görsel durum kavramını tanıtır. gibi bir Button .NET MAUI görünümü, temel alınan durumuna bağlı olarak birkaç farklı görsel görünüme sahip olabilir ( devre dışı bırakılmış veya basılmış ya da giriş odağına sahip olabilir). Bunlar düğmenin durumlarıdır. Görsel durumlar görsel durum gruplarında toplanır. Görsel durum grubundaki tüm görsel durumlar birbirini dışlar. Hem görsel durumlar hem de görsel durum grupları basit metin dizeleriyle tanımlanır.

.NET MAUI Visual State Manager, aşağıdaki görsel durumlarıyla adlı CommonStates bir görsel durum grubu tanımlar:

Normal
Devre dışı
Odaklı
Seçili
PointerOver

, , ve görsel durumları, ve Pageiçin View temel sınıf olan öğesinden VisualElementtüretilen tüm sınıflarda desteklenir.PointerOver FocusedDisabledNormal Ayrıca kendi görsel durum gruplarınızı ve görsel durumlarınızı da tanımlayabilirsiniz.

Görsel öğelere doğrudan arka planda koddan erişmek yerine, görünümü tanımlamak için Visual State Manager'ı kullanmanın avantajı, tüm kullanıcı arabirimi tasarımını tek bir konumda tutan XAML'de görsel öğelerin farklı duruma nasıl tepki vermelerini denetleyebilmenizdir.

Not

Tetikleyiciler, görünümün özelliklerindeki değişikliklere veya olayların tetiklenmelerine bağlı olarak kullanıcı arabirimindeki görsellerde de değişiklik yapabilir. Ancak, bu değişikliklerin çeşitli birleşimleriyle başa çıkmak için tetikleyicileri kullanmak kafa karıştırıcı olabilir. Visual State Manager ile görsel durum grubu içindeki görsel durumları her zaman birbirini dışlar. Her zaman, her grupta yalnızca bir durum geçerli durumdur.

Yaygın görsel durumları

Görsel Durum Yöneticisi, XAML dosyanıza, görünüm normalse, devre dışıysa, giriş odağına sahipse, seçiliyse veya fare imlecinin üzerine gelip basılmaması durumunda görünümün görünümünü değiştirebilecek işaretlemeler eklemenize olanak tanır. Bunlar ortak durumlar olarak bilinir.

Örneğin, sayfanızda bir Entry görünüm olduğunu ve öğesinin görsel görünümünün Entry aşağıdaki yollarla değişmesini istediğinizi varsayalım:

Entry devre dışı bırakıldığında Entry , pembe bir arka plana sahip olmalıdır.
Normalde Entry kireç arka planına sahip olmalıdır.
Entry giriş odağı olduğunda normal yüksekliğinin iki katına genişletilmelidir.
Entry fare imleci üzerine geldiğinde ancak üzerine basılmadığında açık mavi bir arka plana sahip olmalıdır.

Visual State Manager işaretlemesini tek bir görünüme ekleyebilir veya birden çok görünüm için geçerliyse bir stilde tanımlayabilirsiniz.

Görünümde görsel durumları tanımlama

VisualStateManager sınıfı, bir VisualStateGroups görünüme görsel durumları eklemek için kullanılan ekli bir özelliği tanımlar. VisualStateGroups özelliği, nesne koleksiyonu VisualStateGroup olan türündedirVisualStateGroupList. Bu nedenle, ekli özelliğin VisualStateManager.VisualStateGroups alt öğesi bir VisualStateGroup nesnedir. Bu nesne, grubun adını gösteren bir x:Name öznitelik tanımlar. Alternatif olarak, VisualStateGroup sınıfı bunun yerine kullanabileceğiniz bir Name özellik tanımlar. Ekli özellikler hakkında daha fazla bilgi için bkz . Ekli özellikler.

VisualStateGroup sınıfı, bir nesne koleksiyonu VisualState olan adlı Statesbir özellik tanımlar. States , sınıfın VisualStateGroups içerik özelliğidir, bu nedenle nesneleri öğesinin VisualState VisualStateGroupalt öğeleri olarak ekleyebilirsiniz. Her VisualState nesne veya Namekullanılarak x:Name tanımlanmalıdır.

VisualState sınıfı, bir nesne koleksiyonu Setter olan adlı Settersbir özellik tanımlar. Bunlar, Setter bir Style nesnede kullandığınız nesnelerdir. Setters öğesinin içerik özelliği VisualStateolmadığından özelliği için özellik öğesi etiketlerinin Setters eklenmesi gerekir. Setter nesneleri alt öğeleri Settersolarak eklenmelidir. Her Setter nesne, bu durum geçerli olduğunda bir özelliğin değerini gösterir. Bir nesne tarafından başvurulan herhangi bir Setter özellik, bağlanabilir bir özellik tarafından yedeklenmelidir.

Önemli

Görsel durum Setter nesnelerinin düzgün çalışması için, durum VisualStateGroup için bir VisualState nesne içermesi Normal gerekir. Bu görsel durumunda herhangi bir Setter nesne yoksa, boş bir görsel durumu (<VisualState Name="Normal" />) olarak eklenmelidir.

Aşağıdaki örnekte, üzerinde Entrytanımlanan görsel durumlar gösterilmektedir:

<Entry FontSize="18">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Lime" />
                    </VisualState.Setters>
                </VisualState>

                <VisualState Name="Focused">
                    <VisualState.Setters>
                        <Setter Property="FontSize" Value="36" />
                    </VisualState.Setters>
                </VisualState>

                <VisualState Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Pink" />
                    </VisualState.Setters>
                </VisualState>

                <VisualState Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="LightBlue" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </VisualStateManager.VisualStateGroups>
</Entry>

Aşağıdaki ekran görüntüsünde, Entry dört tanımlı görsel durumu gösterilmektedir:

Girdideki üç tanımlı görsel durumu ekran görüntüsü.

Entry durumundaykenNormal, arka planı kireçtir. Kazancın Entry giriş odağı yazı tipi boyutu iki katına çıkar. Entry devre dışı bırakıldığında arka planı pembe olur. Entry, giriş odağı elde ettiğinde kireç arka planını korumaz. Fare işaretçisi üzerine geldiğinde Entryancak üzerine basılmıyorsa, Entry arka plan açık mavi olur. Visual State Manager görsel durumları arasında geçiş yaparken, önceki duruma göre ayarlanan özellikler ayarlanmamış olur. Bu nedenle, görsel durumları birbirini dışlar.

öğesinin Entry durumunda bir kireç arka planı Focused olmasını istiyorsanız, bu görsel durumuna bir tane daha Setter ekleyin:

<VisualState Name="Focused">
    <VisualState.Setters>
        <Setter Property="FontSize" Value="36" />
        <Setter Property="BackgroundColor" Value="Lime" />
    </VisualState.Setters>
</VisualState>

Stilde görsel durumları tanımlama

Aynı görsel durumları genellikle iki veya daha fazla görünümde paylaşmak gerekir. Bu senaryoda, görsel durumlar içinde Styletanımlanabilir. Bu, özelliği için VisualStateManager.VisualStateGroups bir Setter nesne eklenerek elde edilebilir. Nesnenin Setter içerik özelliği özelliğidir Value ve bu nedenle nesnenin Setter alt öğesi olarak belirtilebilir. VisualStateGroups özelliği türündedir VisualStateGroupListve bu nedenle nesnenin Setter alt öğesi, nesneleri içeren VisualState bir VisualStateGroup öğesinin eklenebilecek öğesidirVisualStateGroupList.

Aşağıdaki örnekte, ortak görsel durumlarını tanımlayan bir için örtük bir Entry stil gösterilmektedir:

<Style TargetType="Entry">
    <Setter Property="FontSize" Value="18" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Lime" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Focused">
                    <VisualState.Setters>
                        <Setter Property="FontSize" Value="36" />
                        <Setter Property="BackgroundColor" Value="Lime" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Pink" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="LightBlue" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

Bu stil sayfa düzeyi kaynak sözlüğüne eklendiğinde, Style nesne sayfadaki tüm Entry nesnelere uygulanır. Bu nedenle, sayfadaki tüm Entry nesneler görsel durumlarına aynı şekilde yanıt verir.

.NET MAUI'de görsel durumlar

Aşağıdaki tabloda .NET MAUI'de tanımlanan görsel durumlar listelenmiştir:

Sınıf	Durumlar	Daha Fazla Bilgi
Button	`Pressed`	Düğme görsel durumları
CarouselView	`DefaultItem`, `CurrentItem`, `PreviousItem`, `NextItem`	CarouselView görsel durumları
CheckBox	`IsChecked`	CheckBox görsel durumları
CollectionView	`Selected`	CollectionView görsel durumları
ImageButton	`Pressed`	ImageButton görsel durumları
RadioButton	`Checked`, `Unchecked`	RadioButton görsel durumları
Switch	`On`, `Off`	Görsel durumlarını değiştirme
VisualElement	`Normal`, `Disabled`, `Focused`, `PointerOver`	Ortak durumlar

Birden çok öğede durumu ayarlama

Önceki örneklerde görsel durumlar tek öğelere eklenmiş ve üzerinde çalıştırılmıştır. Bununla birlikte, tek bir öğeye eklenmiş ancak aynı kapsamdaki diğer öğelerde özellikleri ayarlayan görsel durumlar oluşturmak da mümkündür. Bu, durumların üzerinde çalıştığı her öğede görsel durumları yinelemek zorunda kalmamasını sağlar.

türündeSetter, görsel durumunun işleyecek hedef nesnesini temsil eden Setter türünde stringbir özelliği vardırTargetName. TargetName özelliği tanımlandığında, Setter içinde TargetName Valuetanımlanan nesnenin öğesini olarak ayarlarProperty:

<Setter TargetName="label"
        Property="Label.TextColor"
        Value="Red" />

Bu örnekte, adlandırılmış bir Label ada label ait TextColor özelliği olarak Redayarlanır. Özelliği ayarlarken TargetName içindeki özelliğin Propertytam yolunu belirtmeniz gerekir. Bu nedenle, üzerinde LabelProperty özelliğini ayarlamak TextColor için olarak Label.TextColorbelirtilir.

Not

Bir nesne tarafından başvurulan herhangi bir Setter özellik, bağlanabilir bir özellik tarafından yedeklenmelidir.

Aşağıdaki örnekte, tek bir görsel durum grubundan birden çok nesnede durumun nasıl ayarlanacağı gösterilmektedir:

<StackLayout>
    <Label Text="What is the capital of France?" />
    <Entry x:Name="entry"
           Placeholder="Enter answer" />
    <Button Text="Reveal answer">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="Pressed">
                    <VisualState.Setters>
                        <Setter Property="Scale"
                                Value="0.8" />
                        <Setter TargetName="entry"
                                Property="Entry.Text"
                                Value="Paris" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Button>
</StackLayout>

Bu örnekte, tuşuna Normal basılmadığında Button durum etkindir ve içine Entrybir yanıt girilebilir. Pressed tuşuna basıldığında Button durum etkinleşir ve özelliğinin Scale varsayılan değer olan 1'den 0,8'e değiştirileceğini belirtir. Buna ek olarak, Entry adlandırılmış entry Text özelliği Paris olarak ayarlanır. Bu nedenle, sonuç tuşuna basıldığında Button biraz daha küçük olacak şekilde yeniden ölçeklendirilir ve Paris'i Entry görüntüler:

Ardından, serbest bırakıldığında Button varsayılan değeri 1 olarak yeniden ölçeklendirilir ve Entry daha önce girilen tüm metinler görüntülenir.

Önemli

Özelliği belirten TargetName öğelerde Setter özellik yolları desteklenmez.

Özel görsel durumları tanımlama

Özel görsel durumlar, ortak durumlar için görsel durumları tanımladığınız gibi tanımlanarak, ancak sizin seçtiğiniz adlarla ve ardından bir durumu etkinleştirmek için yöntemini çağırarak VisualStateManager.GoToState uygulanabilir.

Aşağıdaki örnekte, giriş doğrulaması için Visual State Manager'ın nasıl kullanılacağı gösterilmektedir:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="VsmDemos.VsmValidationPage"
             Title="VSM Validation">
    <StackLayout x:Name="stackLayout"
                 Padding="10, 10">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup Name="ValidityStates">
                    <VisualState Name="Valid">
                        <VisualState.Setters>
                            <Setter TargetName="helpLabel"
                                    Property="Label.TextColor"
                                    Value="Transparent" />
                            <Setter TargetName="entry"
                                    Property="Entry.BackgroundColor"
                                    Value="Lime" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState Name="Invalid">
                        <VisualState.Setters>
                            <Setter TargetName="entry"
                                    Property="Entry.BackgroundColor"
                                    Value="Pink" />
                            <Setter TargetName="submitButton"
                                    Property="Button.IsEnabled"
                                    Value="False" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        <Label Text="Enter a U.S. phone number:"
               FontSize="18" />
        <Entry x:Name="entry"
               Placeholder="555-555-5555"
               FontSize="18"
               Margin="30, 0, 0, 0"
               TextChanged="OnTextChanged" />
        <Label x:Name="helpLabel"
               Text="Phone number must be of the form 555-555-5555, and not begin with a 0 or 1" />
        <Button x:Name="submitButton"
                Text="Submit"
                FontSize="18"
                Margin="0, 20"
                VerticalOptions="Center"
                HorizontalOptions="Center" />
    </StackLayout>
</ContentPage>

Bu örnekte görsel durumlar öğesine StackLayouteklenmiştir ve ve Invalidadlı Valid iki birbirini dışlayan durum vardır. Entry geçerli bir telefon numarası içermiyorsa, geçerli durum olur Invalidve bu nedenle Entry pembe bir arka plana sahiptir, ikincisi Label görünür ve Button devre dışı bırakılır. Geçerli bir telefon numarası girildiğinde geçerli durum olur Valid. Entry bir kireç arka planı alır, ikincisi Label kaybolur ve Button şimdi etkinleştirilir:

Görsel durumu doğrulama örneğinin ekran görüntüsü.

Arka planda kod dosyası, olayını dosyasından TextChanged işlemekten Entrysorumludur. İşleyici, giriş dizesinin geçerli olup olmadığını belirlemek için normal bir ifade kullanır. GoToState Arka planda kod dosyasındaki yöntemi, nesnesindeki StackLayout statik VisualStateManager.GoToState yöntemi çağırır:

public partial class VsmValidationPage : ContentPage
{
    public VsmValidationPage()
    {
        InitializeComponent();

        GoToState(false);
    }

    void OnTextChanged(object sender, TextChangedEventArgs args)
    {
        bool isValid = Regex.IsMatch(args.NewTextValue, @"^[2-9]\d{2}-\d{3}-\d{4}$");
        GoToState(isValid);
    }

    void GoToState(bool isValid)
    {
        string visualState = isValid ? "Valid" : "Invalid";
        VisualStateManager.GoToState(stackLayout, visualState);
    }
}

Bu örnekte, GoToState durumu başlatmak için oluşturucudan yöntemi çağrılır. Her zaman geçerli bir durum olmalıdır. Ardından arka planda kod dosyası, görsel durumlarını tanımlayan nesnede durum adıyla öğesini çağırır VisualStateManager.GoToState.

Görsel durum tetikleyicileri

Görsel durumlar, geçerli olması gereken koşulları tanımlayan özel bir tetikleyici grubu olan VisualState durum tetikleyicilerini destekler.

Durum tetikleyicileri bir VisualStatekoleksiyonuna StateTriggers eklenir. Bu koleksiyon tek bir durum tetikleyicisi veya birden çok durum tetikleyicisi içerebilir. VisualState Bir, koleksiyondaki durum tetikleyicileri etkin olduğunda uygulanır.

Görsel durumları denetlemek için durum tetikleyicileri kullanılırken ,NET MAUI hangi tetikleyicinin (ve karşılık gelen VisualState) etkin olacağını belirlemek için aşağıdaki öncelik kurallarını kullanır:

'den StateTriggerBasetüretilen tüm tetikleyiciler.
AdaptiveTrigger Koşul karşılandığından MinWindowWidth etkinleştirildi.
AdaptiveTrigger Koşul karşılandığından MinWindowHeight etkinleştirildi.

Birden çok tetikleyici aynı anda etkinse (örneğin, iki özel tetikleyici), işaretlemede bildirilen ilk tetikleyici önceliklidir.

Durum tetikleyicileri hakkında daha fazla bilgi için bkz . Durum tetikleyicileri.

Aracılığıyla paylaş