Genişleticiye Genel Bakış

Bir Expander Denetim, bir pencereye benzeyen ve üst bilgi içeren bir Genişletilebilir alana içerik sağlamak için bir yol sağlar.

Basit Genişleticisi oluşturma

Aşağıdaki örnek nasıl basit bir denetim oluşturulacağını göstermektedir Expander . Bu örnek Expander , önceki çizim gibi görünen bir oluşturur.

<Expander Name="myExpander" Background="Tan" 
          HorizontalAlignment="Left" Header="My Expander" 
          ExpandDirection="Down" IsExpanded="True" Width="100">
  <TextBlock TextWrapping="Wrap">
    Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua
  </TextBlock>
</Expander>

ContentVe Header bir, gibi Expander karmaşık içerik de içerebilir RadioButton Image .

Genişleyen Içerik alanının yönünü ayarlama

Özelliğini kullanarak, bir denetimin içerik alanını Expander dört yönden (,, Down Up Left , veya Right ) ExpandDirection birinde genişletilecek şekilde ayarlayabilirsiniz. İçerik alanı daraltıldığında, yalnızca Expander Header ve iki durumlu düğmesi görünür. ButtonÇift yönlü oku görüntüleyen bir denetim, içerik alanını genişletmek veya daraltmak için iki durumlu düğme olarak kullanılır. Genişletilmişse, Expander tüm içeriğini pencere benzeri bir alanda görüntülemeye çalışır.

Paneldeki bir Genişleticin boyutunu denetleme

Bir Expander Denetim öğesinden devralan bir düzen denetiminin içindeyse,, Panel StackPanel Height Expander ExpandDirection özelliği veya olarak ayarlandığında üzerinde bir olarak belirtmeyin Down Up . Benzer şekilde, Width Expander ExpandDirection özelliği veya olarak ayarlandığında üzerinde bir belirtmeyin Left Right .

Genişletilmiş içeriğin görüntülendiği yönde bir denetimde bir boyut boyutu ayarladığınızda, Expander Expander içerik tarafından kullanılan alanın denetimini alır ve etrafında bir kenarlık görüntüler. Kenarlık, içerik daraltıldığında bile görüntülenir. Genişletilmiş içerik alanının boyutunu ayarlamak için, Expander veya içeriğini kapsayan üzerinde kaydırma özelliği istiyorsanız, ' ın içeriğinde boyut boyutlarını ayarlayın ScrollViewer .

ExpanderBir denetim a içindeki son öğe olduğunda DockPanel , Windows Presentation Foundation (WPF) boyutları otomatik olarak Expander kalan alanına eşit olacak şekilde ayarlar DockPanel . Bu varsayılan davranışı engellemek için LastChildFill nesnesi üzerinde özelliğini DockPanel olarak ayarlayın false veya Expander içindeki son öğe olmadığından emin olun DockPanel .

Kaydırılabilir Içerik oluşturma

İçerik, içerik alanının boyutu için çok büyükse, Expander ScrollViewer kaydırılabilir içerik sağlamak için bir içindeki içeriğini bir içine sardırabilirsiniz. ExpanderDenetim otomatik olarak kaydırma özelliği sağlamıyor. Aşağıdaki çizimde Expander Denetim içeren bir denetim gösterilmektedir ScrollViewer .

ScrollViewer 'da genişletici

Kaydırma çubuğu içeren bir genişleticiyi gösteren ekran görüntüsü.

' Expander A bir denetim yerleştirdiğinizde, içeriğin ScrollViewer ScrollViewer Expander içerik alanının boyutuna açıldığı yöne karşılık gelen boyut özelliğini ayarlayın Expander . Örneğin, ExpandDirection özelliğini Expander olarak ayarlarsanız Down (içerik alanı aşağı açılır), Height ScrollViewer denetimdeki özelliği içerik alanının gerekli yüksekliğine ayarlayın. Bunun yerine, içerik üzerinde yükseklik boyutunu ayarlarsanız, ScrollViewer Bu ayarı tanımaz ve bu nedenle kaydırılabilir içerik sağlamaz.

Aşağıdaki örnek, Expander karmaşık içeriğe sahip ve bir denetim içeren bir denetimin nasıl oluşturulacağını gösterir ScrollViewer . Bu örnek, Expander Bu bölümün başındaki çizim gibi bir oluşturur.


void MakeExpander()
{
  //Create containing stack panel and assign to Grid row/col
  StackPanel sp = new StackPanel();
  Grid.SetRow(sp, 0);
  Grid.SetColumn(sp, 1);
  sp.Background = Brushes.LightSalmon;

  //Create column title
  TextBlock colTitle = new TextBlock();
  colTitle.Text = "EXPANDER CREATED FROM CODE";
  colTitle.HorizontalAlignment= HorizontalAlignment.Center;
  colTitle.Margin.Bottom.Equals(20);
  sp.Children.Add(colTitle);

  //Create Expander object
  Expander exp = new Expander();

  //Create Bullet Panel for Expander Header
  BulletDecorator bp = new BulletDecorator();
  Image i = new Image();
  BitmapImage bi= new BitmapImage();
  bi.UriSource = new Uri(@"pack://application:,,/images/icon.jpg");
  i.Source = bi;
  i.Width = 10;
  bp.Bullet = i;
  TextBlock tb = new TextBlock();
  tb.Text = "My Expander";
  tb.Margin = new Thickness(20,0,0,0);
  bp.Child = tb;
  exp.Header = bp;

  //Create TextBlock with ScrollViewer for Expander Content
  StackPanel spScroll = new StackPanel();
  TextBlock tbc = new TextBlock();
  tbc.Text =
          "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.";
  tbc.TextWrapping = TextWrapping.Wrap;

  spScroll.Children.Add(tbc);
  ScrollViewer scr = new ScrollViewer();
  scr.Content = spScroll;
  scr.Height = 50;
  exp.Content = scr;

  exp.Width=200;
  exp.HorizontalContentAlignment= HorizontalAlignment.Stretch;
  //Insert Expander into the StackPanel and add it to the
  //Grid
  sp.Children.Add(exp);
  myGrid.Children.Add(sp);
}

Sub MakeExpander()

    'Create containing stack panel and assign to Grid row/col
    Dim sp As StackPanel = New StackPanel()
    Grid.SetRow(sp, 0)
    Grid.SetColumn(sp, 1)
    sp.Background = Brushes.LightSalmon

    'Create column title
    Dim colTitle As TextBlock = New TextBlock()
    colTitle.Text = "EXPANDER CREATED FROM CODE"
    colTitle.HorizontalAlignment = HorizontalAlignment.Center
    colTitle.Margin.Bottom.Equals(20)
    sp.Children.Add(colTitle)

    'Create Expander object
    Dim exp As Expander = New Expander()

    'Create Bullet Panel for Expander Header
    Dim bp As BulletDecorator = New BulletDecorator()
    Dim i As Image = New Image()
    Dim bi As BitmapImage = New BitmapImage()
    bi.UriSource = New Uri("pack://application:,,./images/icon.jpg")
    i.Source = bi
    i.Width = 10
    bp.Bullet = i
    Dim tb As TextBlock = New TextBlock()
    tb.Text = "My Expander"
    tb.Margin = New Thickness(20, 0, 0, 0)
    bp.Child = tb
    exp.Header = bp

    'Create TextBlock with ScrollViewer for Expander Content
    Dim spScroll As StackPanel = New StackPanel()
    Dim tbc As TextBlock = New TextBlock()
    tbc.Text = _
            "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."
    tbc.TextWrapping = TextWrapping.Wrap

    spScroll.Children.Add(tbc)
    Dim scr As ScrollViewer = New ScrollViewer()
    scr.Content = spScroll
    scr.Height = 50
    exp.Content = scr

    'Insert Expander into the StackPanel and add it to the
    'Grid
    exp.Width = 200
    exp.HorizontalContentAlignment = HorizontalAlignment.Stretch
    sp.Children.Add(exp)
    myGrid.Children.Add(sp)
End Sub

<Expander Width="200" HorizontalContentAlignment="Stretch">
   <Expander.Header>
     <BulletDecorator>
       <BulletDecorator.Bullet>
         <Image Width="10" Source="images\icon.jpg"/>
       </BulletDecorator.Bullet>
       <TextBlock Margin="20,0,0,0">My Expander</TextBlock>
     </BulletDecorator>
   </Expander.Header>
   <Expander.Content>
     <ScrollViewer Height="50">
       <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>
     </ScrollViewer>
   </Expander.Content>
 </Expander>


Hizalama özelliklerini kullanma

HorizontalContentAlignmentDenetimdeki ve özelliklerini ayarlayarak içeriği hizalayabilirsiniz VerticalContentAlignment Expander . Bu özellikleri ayarladığınızda, hizalama üstbilgiye ve ayrıca genişletilmiş içeriğe uygulanır.

Ayrıca bkz.