Expander

Genişletici denetimi, her zaman görünür olan bir birincil içerik parçasıyla ilgili daha az önemli içeriği göstermenize veya gizlemenize olanak tanır. Başlık içindeki öğeler her zaman görünür. Kullanıcı, üst bilgiyle etkileşim kurarak ikincil içeriğin görüntülendiği İçerik alanını genişletebilir ve daraltabilir. İçerik alanı genişletildiğinde, diğer kullanıcı arabirimi öğelerini yoldan iter; diğer kullanıcı arabirimini kaplamaz. Expander yukarı veya aşağı doğru genişleyebilir.

Hem Header hem de Content alanları, basit metinden karmaşık kullanıcı arabirimi düzenlerine kadar her türlü içeriği içerebilir. Örneğin, bir öğe için ek seçenekleri göstermek için denetimini kullanabilirsiniz.

Doğru kontrol bu mu?

Birincil içeriğin her zaman görünür olması gerektiğinde, ancak ilgili ikincil içeriğin gerektiğinde gizlenebilmesi için bir Expander kullanın. Bu kullanıcı arabirimi genellikle görüntüleme alanı sınırlı olduğunda ve bilgi veya seçeneklerin birlikte gruplandırılabildiği durumlarda kullanılır. İkincil içeriği gerekli olana kadar gizlemek, kullanıcıyı uygulamanızın en önemli bölümlerine odaklamanıza da yardımcı olabilir.

Genişletici Oluşturma

• Önemli API'ler:Genişletici sınıfı, Header özelliği, Content özelliği

WinUI 3 Galeri uygulamasını açın ve Genişletici'yi çalışırken görün

WinUI 3 Galeri uygulaması çoğu WinUI 3 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın

Bu örnekte, varsayılan stile sahip basit bir Genişletici nasıl oluşturulacağı gösterilmektedir. Üst Bilgisi özelliği, her zaman görünür olan öğeyi tanımlar. content özelliği daraltılabilir ve genişletilebilen öğesini tanımlar. Bu örnek, önceki çizime benzeyen bir Expander oluşturur.

<Expander Header="This text is in the header"
               Content="This is in the content"/>

Genişletici içerik

Bir Expander özelliği herhangi bir nesne türü olabilir, ancak genellikle bir metin veya UIElement. Content özelliğini ayarlama hakkında daha fazla ayrıntı için ContentControl sınıfının Açıklamalar bölümüne bakın.

Burada gösterildiği gibi, bir üst Expander içeriğinde iç içe Expander denetimleri de dahil olmak üzere, Expanderiçeriği olarak karmaşık, etkileşimli kullanıcı arabirimini kullanabilirsiniz.

İçerik hizalama

HorizontalContentAlignment ayarlayarak ve denetiminde VerticalContentAlignment Expander içeriği hizalayabilirsiniz. Bu özellikleri ayarladığınızda, hizalama yalnızca genişletilmiş içeriğe uygulanır, başlığa değil.

Genişleticinin boyutunu denetleme

Varsayılan olarak, Başlık ve İçerik alanları, içeriklerine uyacak şekilde otomatik olarak boyutlandırılır. istenmeyen bir görünüm veya davranıştan kaçınmak için Expander boyutunu denetlemek için doğru tekniklerin kullanılması önemlidir.

Genişlik

İçerik üst bilgiden daha genişse, içerik alanı genişletildiğinde üst bilgi genişliği içerik alanıyla eşleşecek şekilde artar ve içerik alanı daraltıldığında küçülür. Genişletildiğinde veya daraltıldığında denetim genişliğinin değişmesini önlemek için, açık bir genişlik ayarlayabilir veya denetim bir Panelialt öğesiyse, HorizontalAlignment 'yi Esnetme olarak ayarlayabilir ve düzen panelinin boyutlandırmayı denetlemesini sağlayabilirsiniz.

Burada, ilgili bir dizi Expander denetimi StackPaneliçerisinde yerleştirilir. HorizontalAlignment içindeki her bir Expander'in StackPanel'ı, StretchKaynaklariçindeki StackPanel kullanılarak olarak ayarlanır ve StackPanel'un genişliği, Expander denetimlerinin genişliğini belirler.

<StackPanel x:Name="ExpanderStack" MaxWidth="600">
    <StackPanel.Resources>
        <Style TargetType="Expander">
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </StackPanel.Resources>
    <Expander Header="Choose your crust"> ... </Expander>
    <Expander Header="Choose your sauce"> ... </Expander>
    <Expander Header="Choose your toppings"> ... </Expander>
 </StackPanel>

Yükseklik

üzerinde Expander belirtmeyin. Bunu yaparsanız, içerik alanı daraltıldığında bile kontrol bu alanı ayırır ve bu da Expanderamacını bozar. Genişletilmiş içerik alanının boyutunu belirtmek için, Expanderiçeriğinde boyut boyutlarını ayarlayın. Gerekirse, içeriğin Height kısıtlayabilir ve içeriği kaydırılabilir hale getirebilirsiniz.

Kaydırılabilir içerik

İçeriğiniz, içerik alanının boyutu için çok büyükse, içerik alanını kaydırılabilir hale getirmek için içeriği bir ScrollViewer içine alabilirsiniz. Expander denetimi otomatik olarak kaydırma özelliği sağlamaz.

ScrollViewer içeriğine bir Expander yerleştirdiğinizde, ScrollViewer denetimindeki yüksekliği içerik alanı için gerekli yüksekliğe ayarlayın. Bunun yerine, ScrollVieweriçindeki içerikte yükseklik boyutunu ayarlarsanız ScrollViewer bu ayarı tanımaz ve bu nedenle kaydırılabilir içerik sağlamaz.

Aşağıdaki örnekte, içeriği olarak kaydırılabilir metin içeren bir Expander denetiminin nasıl oluşturulacağı gösterilmektedir.

<Expander Header="Expander with scrollable content">
    <ScrollViewer MaxHeight="200">
        <Grid>
            <TextBlock TextWrapping="Wrap">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit
                esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
                occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
            </TextBlock>
        </Grid>
    </ScrollViewer>
</Expander>

İçerik olarak kaydırılabilir metin içeren bir GenişleticiAn Expander with scrollable text as its contentAn Expander with scrollable text as its content

İçerik alanını genişletme ve daraltma

Varsayılan olarak, Genişletici daraltılır ve aşağı doğru genişletilir.

• İçerik alanının başlangıçta genişletilmiş olması için isExpanded özelliğini true olarak ayarlayın.
• İçeriğin yukarı doğru genişletilmesi için ExpandDirection özelliğini Yukarı olarak ayarlayın.

<Expander IsExpanded="True" ExpandDirection="Up">

Expander, IsExpanded özelliği ayarlanarak veya Headerile etkileşim kurularak program aracılığıyla genişletilir veya daraltılır; ışıkla kapatılamaz.

İpucu

Flyout veya ComboBoxgibi geçici kullanıcı arabirimleri, açık açılan menünün dışına tıkladığınızda veya dokunduğunuzda kapanır. Buna light-dismissadı verilir. bir Expander içerik alanı geçici olarak kabul edilmez ve diğer kullanıcı arabirimini kaplamaz, bu nedenle ışık kapatmayı desteklemez.

İçerik gösterildiğinde veya gizlendiğinde eylem yapmak için Genişletme ve Daraltma olaylarını da işleyebilirsiniz. Bu olaylara bazı örnekler aşağıda verilmiştir.

Etkinliği genişletme

Bu örnekte, bir grup genişleticiniz vardır ve bir kerede yalnızca bir tane açık olmasını istersiniz. Kullanıcı bir Expanderaçtığında, Genişletme olayını işleyin ve kullanıcının tıkladığı denetim dışındaki gruptaki tüm Expander denetimlerini daraltın.

Dikkat

Uygulamanıza ve kullanıcı deneyiminize bağlı olarak, kullanıcı farklı bir denetimi genişlettiğinde Expander denetimlerinin otomatik olarak daraltılması pratik bir çözüm olabilir. Ancak bu, denetimi kullanıcıdan da uzaklaştırır. Davranış yararlı olabilirse, bunu kullanıcının kolayca ayarlayabileceğiniz bir seçenek haline getirebilirsiniz.

<StackPanel x:Name="ExpanderStack">
    <Expander Header="Choose your crust"
                   Expanding="Expander_Expanding"> ... </Expander>
    <Expander Header="Choose your sauce"
                   Expanding="Expander_Expanding"> ... </Expander>
    <Expander Header="Choose your toppings"
                   Expanding="Expander_Expanding"> ... </Expander>
 </StackPanel>

// Let the user opt out of custom behavior.
private bool _autoCollapse = true;

private void Expander_Expanding(muxc.Expander sender, 
                                muxc.ExpanderExpandingEventArgs args)
{
    if (_autoCollapse == true)
    {
        foreach (muxc.Expander ex in ExpanderStack.Children)
        {
            if (ex != sender && ex.IsExpanded)
                ex.IsExpanded = false;
        }
    }
}

Çökmüş olay

Bu örnekteki Daraltılmış olayını işleyip, Header'yi Content'te seçilen seçeneklerin özetiyle doldurursunuz.

Bu görüntüde, içeriğinin genişletilmiş ve seçeneklerinin seçilmiş olduğu Expander gösterilmektedir.

Daraltıldığında, kullanıcının Expanderaçmadan bunları görmeye devam edebilmesi için, seçili seçenekler üst bilgide özetlenir.

<Expander IsExpanded="True"
        Expanding="Expander_Expanding"
        Collapsed="Expander_Collapsed">
    <Expander.Header>
        <Grid>
            <TextBlock Text="Choose your crust"/>
            <TextBlock x:Name="tbCrustSelections"
                       HorizontalAlignment="Right"
                       Style="{StaticResource CaptionTextBlockStyle}"/>
        </Grid>
    </Expander.Header>
    <StackPanel Orientation="Horizontal">
        <RadioButtons x:Name="rbCrustType" SelectedIndex="0">
            <x:String>Classic</x:String>
            <x:String>Whole wheat</x:String>
            <x:String>Gluten free</x:String>
        </RadioButtons>
        <RadioButtons x:Name="rbCrustStyle" SelectedIndex="0" 
                           Margin="48,0,0,0">
            <x:String>Regular</x:String>
            <x:String>Thin</x:String>
            <x:String>Pan</x:String>
            <x:String>Stuffed</x:String>
        </RadioButtons>
    </StackPanel>
</Expander>

private void Expander_Collapsed(muxc.Expander sender, 
                                muxc.ExpanderCollapsedEventArgs args)
{
    // Update the header with options selected in the content.
    tbCrustSelections.Text = rbCrustType.SelectedItem.ToString() +
        ", " + rbCrustStyle.SelectedItem.ToString();
}

Hafif stil

Denetime benzersiz bir görünüm vermek için varsayılan Style ve ControlTemplate değiştirebilirsiniz. Kullanılabilir tema kaynaklarının listesi için Genişletici API belgelerinin Denetim Stili ve Şablon bölümüne bakın. Daha fazla bilgi için Stil denetimleri makalesinin Hafif stil bölümüne bakın.

Recommendations

• Görüntüleme alanı sınırlı olduğunda bir Expander kullanın ve kullanıcı bunu isteyene kadar bazı ikincil içerik gizlenebilir.

Kod örnekleri

Bu XAML, bu makalenin diğer bölümlerinde gösterilen Expander denetimleri grubunu oluşturur. Expanding ve Collapsed olay işleyicilerinin kodu da önceki bölümlerde gösterilmiştir.

<StackPanel x:Name="ExpanderStack" MaxWidth="600">
    <StackPanel.Resources>
        <Style TargetType="Expander">
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </StackPanel.Resources>
    <Expander IsExpanded="True"
                   Expanding="Expander_Expanding"
                   Collapsed="Expander_Collapsed">
        <Expander.Header>
            <Grid>
                <TextBlock Text="Choose your crust"/>
                <TextBlock x:Name="tbCrustSelections" 
                           HorizontalAlignment="Right"
        Style="{StaticResource CaptionTextBlockStyle}"/>
            </Grid>
        </Expander.Header>
        <StackPanel Orientation="Horizontal">
            <RadioButtons x:Name="rbCrustType" SelectedIndex="0">
                <x:String>Classic</x:String>
                <x:String>Whole wheat</x:String>
                <x:String>Gluten free</x:String>
            </RadioButtons>
            <RadioButtons x:Name="rbCrustStyle" SelectedIndex="0" 
                   Margin="48,0,0,0">
                <x:String>Regular</x:String>
                <x:String>Thin</x:String>
                <x:String>Pan</x:String>
                <x:String>Stuffed</x:String>
            </RadioButtons>
        </StackPanel>
    </Expander>
    
    <Expander Header="Choose your sauce" Margin="24"
            Expanding="Expander_Expanding">
        <RadioButtons SelectedIndex="0" MaxColumns="2">
            <x:String>Classic red</x:String>
            <x:String>Garlic</x:String>
            <x:String>Pesto</x:String>
            <x:String>Barbecue</x:String>
        </RadioButtons>
    </Expander>

    <Expander Header="Choose your toppings"
                   Expanding="Expander_Expanding">
        <StackPanel>
            <Expander>
                <Expander.Header>
                    <RadioButton GroupName="Toppings" Content="House special"/>
                </Expander.Header>
                <TextBlock Text="Cheese, pepperoni, sausage, black olives, mushrooms"
                           TextWrapping="WrapWholeWords"/>
            </Expander>
            <Expander>
                <Expander.Header>
                    <RadioButton GroupName="Toppings" Content="Vegetarian"/>
                </Expander.Header>
                <TextBlock Text="Cheese, mushrooms, black olives, green peppers, artichoke hearts"
                           TextWrapping="WrapWholeWords"/>
            </Expander>
            <Expander>
                <Expander.Header>
                    <RadioButton GroupName="Toppings" Content="All meat"/>
                </Expander.Header>
                <TextBlock Text="Cheese, pepperoni, sausage, ground beef, salami"
                           TextWrapping="WrapWholeWords"/>
            </Expander>
            <Expander>
                <Expander.Header>
                    <RadioButton GroupName="Toppings" Content="Choose your own"/>
                </Expander.Header>
                <StackPanel Orientation="Horizontal">
                    <StackPanel>
                        <CheckBox Content="Cheese"/>
                        <CheckBox Content="Pepperoni"/>
                        <CheckBox Content="Sausage"/>
                    </StackPanel>
                    <StackPanel>
                        <CheckBox Content="Ground beef"/>
                        <CheckBox Content="Salami"/>
                        <CheckBox Content="Mushroom"/>
                    </StackPanel>
                    <StackPanel>
                        <CheckBox Content="Black olives"/>
                        <CheckBox Content="Green peppers"/>
                        <CheckBox Content="Artichoke hearts"/>
                    </StackPanel>
                </StackPanel>
            </Expander>
        </StackPanel>
    </Expander>
</StackPanel>

UWP ve WinUI 2

Önemli

Bu makaledeki bilgiler ve örnekler, Windows Uygulama SDK'sı ve WinUI 3kullanan uygulamalar için iyileştirilmiştir, ancak genellikle WinUI 2kullanan UWP uygulamaları için geçerlidir. Platforma özgü bilgiler ve örnekler için UWP API başvurusuna bakın.

Bu bölüm, denetimi bir UWP veya WinUI 2 uygulamasında kullanmak için ihtiyacınız olan bilgileri içerir.

UWP uygulamaları için Genişletici winUI 2 gerektirir. Yükleme yönergeleri de dahil olmak üzere daha fazla bilgi için bkz. WinUI 2. Bu denetimin API'leri Microsoft.UI.Xaml.Controls ad alanında bulunur.

• WinUI 2 API'leri:Genişletici sınıf, Header özelliği, Content özelliği
• WinUI 2 Galeri uygulamasını açın veGenişletici'yi çalışır durumda görün. WinUI 2 Galeri uygulaması çoğu WinUI 2 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın.

Bu makaledeki kodu WinUI 2 ile kullanmak için, projenize dahil edilen Windows UI Kitaplığı API'lerini temsil etmek için XAML'de bir diğer ad kullanın (muxckullanıyoruz). Daha fazla bilgi için WinUI 2'yi kullanmaya başlama hakkında bölümüne bakın.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:Expander />

İlgili makaleler

• Sayfa Düzeni
• Genişletici sınıfı