Dela via

Översikt över expanderaren

En Expander-kontroll ger ett sätt att tillhandahålla innehåll i ett utökningsbart område som liknar ett fönster och innehåller en rubrik.

Skapa en enkel expanderare

I följande exempel visas hur du skapar en enkel Expander kontroll. Det här exemplet skapar en Expander som ser ut som föregående bild.

<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 och Header för en Expander kan också innehålla komplext innehåll, till exempel RadioButton och Image objekt.

Ange riktningen för det expanderande innehållsområdet

Du kan ange innehållsområdet för en Expander-kontroll så att det expanderas i någon av fyra riktningar (Down, Up, Lefteller Right) med hjälp av egenskapen ExpandDirection. När innehållsområdet har komprimerats visas bara ExpanderHeader och dess växlingsknapp. En Button-kontroll som visar en riktningspil används som en växlingsknapp för att expandera eller fälla ihop innehållsområdet. När det expanderas försöker Expander visa allt innehåll i ett fönsterliknande område.

Kontrollera storleken på en expander i en panel

Om en Expander kontroll finns i en layoutkontroll som ärver från Panel, till exempel StackPanel, ska du inte ange en Height på Expander när egenskapen ExpandDirection är inställd på Down eller Up. Ange inte heller någon Width på Expander när egenskapen ExpandDirection är inställd på Left eller Right.

När du anger en storleksdimension på en Expander kontroll i den riktning som det expanderade innehållet visas, tar Expander kontroll över det område som används av innehållet och visar en kantlinje runt det. Kantlinjen visas även när innehållet är komprimerat. Om du vill ange storleken på det expanderade innehållsområdet anger du storleksdimensioner för innehållet i Expander, eller om du vill bläddra på ScrollViewer som omger innehållet.

När en Expander kontroll är det sista elementet i en DockPanel, ställer Windows Presentation Foundation (WPF) automatiskt in Expander dimensioner så att de är lika med det återstående området i DockPanel. Om du vill förhindra det här standardbeteendet anger du egenskapen LastChildFill på DockPanel-objektet till falseeller kontrollerar att Expander inte är det sista elementet i en DockPanel.

Skapa rullningsbart innehåll

Om innehållet är för stort för innehållsområdets storlek kan du omsluta innehållet i en Expander i en ScrollViewer för att tillhandahålla rullningsbart innehåll. Kontrollen Expander ger inte rullningsfunktionen automatiskt. Följande bild visar en Expander kontroll som innehåller en ScrollViewer kontroll.

Expander i en ScrollViewer-

Skärmbild som visar en expander med rullningslist.

När du placerar en Expander-kontroll i en ScrollViewer, ställ in dimensionsegenskapen ScrollViewer som motsvarar den riktning i vilken Expander-innehållet öppnas, så att den överensstämmer med storleken på Expander-innehållsområdet. Om du till exempel anger egenskapen ExpandDirection på Expander till Down (innehållsområdet öppnas nedåt) bör du ange egenskapen Height på ScrollViewer-kontrollen till den höjd som krävs för innehållsområdet. Om du i stället anger höjddimensionen för själva innehållet, ScrollViewer inte känner igen den här inställningen och därför inte tillhandahåller rullningsbart innehåll.

I följande exempel visas hur du skapar en Expander kontroll som har komplext innehåll och som innehåller en ScrollViewer kontroll. Det här exemplet skapar en Expander som liknar bilden i början av det här avsnittet.


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>

Använda justeringsegenskaperna

Du kan justera innehållet genom att ange egenskaperna HorizontalContentAlignment och VerticalContentAlignment på kontrollen Expander. När du anger dessa egenskaper gäller justeringen för rubriken och även det expanderade innehållet.

Se även

  • Last updated on