Sdílet prostřednictvím

Přehled rozšíření

  • Článek

Ovládací Expander prvek poskytuje způsob, jak poskytnout obsah v rozbalitelné oblasti, která se podobá oknem a obsahuje záhlaví.

Vytvoření jednoduchého rozbalovacího prvku

Následující příklad ukazuje, jak vytvořit jednoduchý Expander ovládací prvek. Tento příklad vytvoří obrázek Expander , který vypadá jako předchozí obrázek.

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

Objekty Content a objekty Expander můžou obsahovat také složitý obsah, například RadioButton objekty ImageHeader.

Nastavení směru rozbalení oblasti obsahu

Oblast Expander obsahu ovládacího prvku můžete nastavit tak, aby se rozbalil jedním ze čtyř směrů (Down, Up, Leftnebo Right) pomocí ExpandDirection vlastnosti. Když je oblast obsahu sbalená, zobrazí se pouze ExpanderHeader tlačítko a jeho přepínací tlačítko. Ovládací Button prvek, který zobrazuje směrovou šipku, se používá jako přepínací tlačítko pro rozbalení nebo sbalení oblasti obsahu. Po rozbalení Expander se pokusí zobrazit veškerý jeho obsah v oblasti podobné oknem.

Řízení velikosti rozbalovacího prvku na panelu

Expander Pokud je ovládací prvek uvnitř ovládacího prvku rozložení, který dědí z Panel, například StackPanel, nezadávejte Height na Expander vlastnost, je-li ExpandDirection vlastnost nastavena nebo DownUp. Podobně nezadávejte Width hodnotu on the Expander when the ExpandDirection property is set to Left or Right.

Když nastavíte rozměr Expander velikosti ovládacího prvku ve směru, ve kterém se zobrazí rozbalený obsah, Expander převezme řízení oblasti, kterou obsah používá, a zobrazí kolem něj ohraničení. Ohraničení se zobrazí i v případě, že je obsah sbalený. Pokud chcete nastavit velikost rozbalené oblasti obsahu, nastavte rozměry velikosti obsahu nebo Expanderpokud chcete, aby se posouvat, na ScrollViewer obsahu, který obsah ohraničuje.

Pokud je ovládací prvek Expander posledním prvkem DockPanelv , Windows Presentation Foundation (WPF) automaticky nastaví Expander dimenze, aby se rovna zbývající oblasti DockPanel. Chcete-li zabránit tomuto výchozí chování, nastavte LastChildFill vlastnost objektu DockPanel na false, nebo se ujistěte, že Expander není posledním prvkem v objektu DockPanel.

Vytváření posouvatelného obsahu

Pokud je obsah příliš velký pro velikost oblasti obsahu, můžete obsah obsahu Expander zabalit tak ScrollViewer , aby byl obsah posunovatelný. Ovládací Expander prvek automaticky neposkytuje možnosti posouvání. Následující obrázek znázorňuje Expander ovládací prvek, který obsahuje ScrollViewer ovládací prvek.

Expander v scrollVieweru

Screenshot that shows an expander with ScrollBar.

Když umístíte Expander ovládací prvek do ScrollViewer, nastavte ScrollViewer vlastnost dimenze, která odpovídá směru, ve kterém Expander se obsah otevře na velikost Expander oblasti obsahu. Pokud například nastavíte ExpandDirection vlastnost na Expander hodnotu Down (oblast obsahu se otevře), nastavte Height vlastnost ovládacího prvku na ScrollViewer požadovanou výšku oblasti obsahu. Pokud místo toho nastavíte rozměr výšky u samotného obsahu, ScrollViewer nerozpozná toto nastavení, a proto neposkytuje posouvání obsahu.

Následující příklad ukazuje, jak vytvořit Expander ovládací prvek, který má složitý obsah a který obsahuje ScrollViewer ovládací prvek. Tento příklad vytvoří podobný Expander obrázku na začátku tohoto oddílu.


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>

Použití vlastností zarovnání

Obsah můžete zarovnat nastavením HorizontalContentAlignment a VerticalContentAlignment vlastností Expander ovládacího prvku. Když nastavíte tyto vlastnosti, zarovnání se vztahuje na záhlaví a také na rozbalený obsah.

Viz také