Gambaran Umum Expander

Expander Kontrol menyediakan cara untuk menyediakan konten di area yang dapat diperluas yang menyerupan jendela dan menyertakan header.

Membuat Simple Expander

Contoh berikut menunjukkan cara membuat kontrol sederhana Expander . Contoh ini membuat Expander yang terlihat seperti ilustrasi sebelumnya.

<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>

Content dan Header dari juga Expander dapat berisi konten yang kompleks, seperti RadioButton objek dan Image .

Mengatur Arah Area Konten Yang Diperluas

Anda dapat mengatur area Expander konten kontrol untuk diperluas ke salah satu dari empat arah (Down, , UpLeft, atau Right) dengan menggunakan ExpandDirection properti . Saat area konten diciutkan, hanya tombol dan tombol alihnya yang ExpanderHeader muncul. Button Kontrol yang menampilkan panah arah digunakan sebagai tombol alih untuk memperluas atau menciutkan area konten. Saat diperluas, Expander mencoba menampilkan semua kontennya di area seperti jendela.

Mengontrol Ukuran Expander di Panel

Expander Jika kontrol berada di dalam kontrol tata letak yang mewarisi dari Panel, seperti StackPanel, jangan tentukan Height pada Expander saat ExpandDirection properti diatur ke Down atau Up. Demikian pula, jangan tentukan Width pada Expander saat ExpandDirection properti diatur ke Left atau Right.

Saat Anda mengatur dimensi ukuran pada Expander kontrol ke arah konten yang diperluas ditampilkan, Expander mengambil kontrol area yang digunakan oleh konten dan menampilkan batas di sekitarnya. Batas memperlihatkan bahkan ketika konten diciutkan. Untuk mengatur ukuran area konten yang diperluas, atur dimensi ukuran pada konten Expander, atau jika Anda ingin menggulir kemampuan, pada ScrollViewer yang mengapit konten.

Expander Ketika kontrol adalah elemen terakhir dalam DockPanel, Windows Presentation Foundation (WPF) secara otomatis mengatur Expander dimensi agar sama dengan area yang tersisa dari DockPanel. Untuk mencegah perilaku default ini, atur LastChildFill properti pada DockPanel objek ke false, atau pastikan bahwa Expander bukan elemen terakhir dalam DockPanel.

Membuat Konten yang Dapat Digulir

Jika konten terlalu besar untuk ukuran area konten, Anda dapat membungkus konten Expander dalam rangka untuk menyediakan konten yang ScrollViewer dapat digulir. Kontrol Expander tidak secara otomatis menyediakan kemampuan gulir. Ilustrasi berikut ini memperlihatkan Expander kontrol yang berisi ScrollViewer kontrol.

Expander di ScrollViewer

Saat Anda menempatkan Expander kontrol dalam ScrollViewer, atur ScrollViewer properti dimensi yang sesuai dengan arah di mana Expander konten terbuka ke ukuran Expander area konten. Misalnya, jika Anda mengatur ExpandDirection properti pada ke DownExpander (area konten terbuka), atur Height properti pada ScrollViewer kontrol ke tinggi yang diperlukan untuk area konten. Jika Anda mengatur dimensi tinggi pada konten itu sendiri, ScrollViewer tidak mengenali pengaturan ini dan oleh karena itu, tidak menyediakan konten yang dapat digulir.

Contoh berikut menunjukkan cara membuat Expander kontrol yang memiliki konten kompleks dan yang berisi ScrollViewer kontrol. Contoh ini membuat Expander yang seperti ilustrasi di awal bagian ini.

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>

Menggunakan Properti Perataan

Anda dapat meratakan konten dengan mengatur HorizontalContentAlignment properti dan VerticalContentAlignment pada Expander kontrol. Saat Anda mengatur properti ini, perataan berlaku untuk header dan juga ke konten yang diperluas.

Baca juga

• Expander
• ExpandDirection
• Topik Cara Penggunaan