Przegląd Ekspander

Kontrolka Expander umożliwia udostępnianie zawartości w rozwijanym obszarze, który przypomina okno i zawiera nagłówek.

Tworzenie prostego ekspandera

W poniższym przykładzie pokazano, jak utworzyć prostą Expander kontrolkę. W tym przykładzie zostanie utworzona ilustracja Expander podobna do poprzedniej.

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

Element Content i Header obiektu może również zawierać złożoną Expander zawartość, taką jak RadioButton i Image .

Ustawianie kierunku rozszerzania obszaru zawartości

Obszar zawartości kontrolki Expander można ustawić tak, aby rozwinął się w jednym z czterech kierunków (Down, Up, Leftlub Right) przy użyciu ExpandDirection właściwości . Gdy obszar zawartości zostanie zwinięty, zostanie wyświetlony tylko przycisk przełącznika ExpanderHeader i . Kontrolka Button , która wyświetla strzałkę kierunkową, jest używana jako przycisk przełącznika, aby rozwinąć lub zwinąć obszar zawartości. Po rozwinięciu obiekt Expander próbuje wyświetlić całą jego zawartość w obszarze przypominającym okno.

Kontrolowanie rozmiaru ekspandera w panelu

Jeśli kontrolka Expander znajduje się wewnątrz kontrolki układu dziedziczonej z Panelelementu , na StackPanelprzykład , nie należy określać Height wartości w Expander przypadku ExpandDirection ustawienia właściwości na Down lub Up. Podobnie nie należy określać Width wartości dla Expander właściwości , gdy właściwość jest ustawiona ExpandDirection na Left lub Right.

Po ustawieniu wymiaru rozmiaru kontrolki Expander w kierunku wyświetlania Expander rozwiniętej zawartości przejmuje kontrolę nad obszarem używanym przez zawartość i wyświetla wokół niej obramowanie. Obramowanie jest wyświetlane nawet wtedy, gdy zawartość jest zwinięta. Aby ustawić rozmiar rozwiniętego obszaru zawartości, ustaw wymiary rozmiaru zawartości Expanderobiektu lub, jeśli chcesz przewijać zawartość, w ScrollViewer obiekcie, który otacza zawartość.

Gdy kontrolka Expander jest ostatnim elementem w DockPanelprogramie , Windows Presentation Foundation (WPF) automatycznie ustawia Expander wymiary w taki sam sposób jak pozostały obszar .DockPanel Aby zapobiec temu domyślnemu zachowaniu, ustaw LastChildFill właściwość obiektu na falseDockPanel , lub upewnij się, że Expander element nie jest ostatnim elementem w obiekcie DockPanel.

Tworzenie zawartości przewijanej

Jeśli zawartość jest zbyt duża dla rozmiaru obszaru zawartości, możesz opakowować zawartość Expander obiektu w obiekcie, ScrollViewer aby zapewnić zawartość przewijaną. Kontrolka Expander nie zapewnia automatycznej możliwości przewijania. Poniższa ilustracja przedstawia kontrolkę Expander zawierającą kontrolkę ScrollViewer .

Rozszerzenie w programie ScrollViewer

Po ustawieniu Expander kontrolki w ScrollViewerobiekcie ustaw ScrollViewer właściwość wymiaru odpowiadającą kierunku, w którym Expander zawartość zostanie otwarta na rozmiar Expander obszaru zawartości. Jeśli na przykład ustawisz ExpandDirection właściwość na Expander wartość Down (obszar zawartości zostanie otwarty), ustaw Height właściwość kontrolki na ScrollViewer wymaganą wysokość obszaru zawartości. Jeśli zamiast tego ustawisz wymiar wysokości dla samej zawartości, ScrollViewer nie rozpoznaje tego ustawienia i dlatego nie zapewnia zawartości przewijanej.

W poniższym przykładzie pokazano, jak utworzyć kontrolkę, która ma złożoną Expander zawartość i która zawiera kontrolkę ScrollViewer . W tym przykładzie zostanie utworzona Expander ilustracja podobna do ilustracji na początku tej sekcji.

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>

Korzystanie z właściwości wyrównania

Zawartość można wyrównać, ustawiając HorizontalContentAlignment właściwości i VerticalContentAlignment w kontrolce Expander . Po ustawieniu tych właściwości wyrównanie ma zastosowanie do nagłówka, a także do rozwiniętej zawartości.

Zobacz też

• Expander
• ExpandDirection
• Tematy z instrukcjami