Übersicht über Expander-Steuerelemente
Mit einem Expander-Steuerelement können Sie Inhalte in einem erweiterbaren Bereich bereitstellen, der einem Fenster ähnelt und einen Header enthält.
Dieses Thema enthält folgende Abschnitte.
- Erstellen eines einfachen Expander-Steuerelements
- Festlegen der Erweiterungsrichtung des Inhaltsbereichs
- Festlegen der Größe eines Expander-Steuerelements in einem Bereich
- Erstellen von bildlauffähigem Inhalt
- Verwenden der Alignment-Eigenschaften
- Verwandte Abschnitte
Erstellen eines einfachen Expander-Steuerelements
Im folgenden Beispiel wird das Erstellen eines einfachen Expander-Steuerelements veranschaulicht. In diesem Beispiel wird ein Expander-Steuerelement erstellt, das der vorherigen Abbildung entspricht.
<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 und Header eines Expander-Steuerelements können auch komplexen Inhalt wie RadioButton-Objekte und Image-Objekte enthalten.
Festlegen der Erweiterungsrichtung des Inhaltsbereichs
Sie können als Erweiterungsrichtung für den Inhaltsbereich eines Expander-Steuerelements eine von vier Richtungen festlegen (Down, Up, Left oder Right). Verwenden Sie dazu die ExpandDirection-Eigenschaft. Wenn der Inhaltsbereich reduziert ist, werden nur ExpanderHeader und die entsprechende Umschaltfläche angezeigt. Als Umschaltfläche zum Erweitern bzw. Reduzieren des Inhaltsbereichs wird ein Button-Steuerelement verwendet, in dem ein Richtungspfeil anzeigt wird. Wenn das Expander-Steuerelement erweitert wird, versucht es, den Inhalt in einem fensterähnlichen Bereich anzuzeigen.
Festlegen der Größe eines Expander-Steuerelements in einem Bereich
Wenn sich ein Expander-Steuerelement innerhalb eines Layoutsteuerelements befindet, das von Panel wie z. B. StackPanel erbt, legen Sie nicht Height für das ExpanderSteuerelement fest, falls die ExpandDirection-Eigenschaft auf Down oder Up festgelegt ist. Legen Sie entsprechend nicht Width für das Expander-Steuerelement fest, wenn die ExpandDirection-Eigenschaft auf Left oder Right festgelegt ist.
Wenn Sie für ein Expander-Steuerelement eine Größendimension in der Richtung festlegen, in der der erweiterte Inhalt angezeigt wird, übernimmt das Expander-Steuerelement die Steuerung des Inhaltsbereichs und zeigt einen Rahmen um den Inhalt an. Der Rahmen wird auch angezeigt, wenn der Inhalt reduziert ist. Zum Festlegen der Größe des erweiterten Inhaltsbereichs legen Sie Größendimensionen für den Inhalt des Expander-Steuerelements fest. Wenn Bildlauffunktionen zur Verfügung gestellt werden sollen, legen Sie Größendimensionen für das ScrollViewer-Steuerelement fest, das den Inhalt einschließt.
Wenn ein Expander-Steuerelement das letzte Element in DockPanel ist, legt Windows Presentation Foundation (WPF) die Expander-Dimensionen automatisch so fest, dass sie dem verbleibenden Bereich von DockPanel entsprechen. Wenn dieses Standardverhalten nicht verwendet werden soll, legen Sie die LastChildFill-Eigenschaft des DockPanel-Objekts auf false fest, oder stellen Sie sicher, dass Expander nicht das letzte Element in DockPanel ist.
Erstellen von bildlauffähigem Inhalt
Wenn der Inhalt die Größe des Inhaltsbereichs überschreitet, können Sie den Inhalt eines Expander-Steuerelements mit einem ScrollViewer-Steuerelement umschließen, um bildlauffähigen Inhalt bereitzustellen. Das Expander-Steuerelement stellt die Bildlauffunktion nicht automatisch bereit. In der folgenden Abbildung wird ein Expander-Steuerelement dargestellt, das ein ScrollViewer-Steuerelement enthält.
Expander-Steuerelement in einem ScrollViewer-Steuerelement
.jpg "Expander mit ScrollBar")
Wenn Sie ein Expander-Steuerelement in ein ScrollViewer-Steuerelement einfügen, legen Sie die Größe der ScrollViewer-Dimensionseigenschaft für die Richtung, in die der Expander-Inhalt erweitert wird, auf die Größe des Expander-Inhaltsbereichs fest. Wenn Sie z. B. die ExpandDirection-Eigenschaft des Expander-Steuerelements auf Down festlegen (der Inhaltsbereich wird nach unten erweitert), legen Sie die Height-Eigenschaft des ScrollViewer-Steuerelements auf die für den Inhaltsbereich erforderliche Höhe fest. Wenn Sie stattdessen die Höhendimension auf den Inhalt festlegen, wird diese Einstellung vom ScrollViewer-Steuerelement nicht erkannt. Es steht daher kein bildlauffähiger Inhalt zur Verfügung.
Im folgenden Beispiel wird das Erstellen eines Expander-Steuerelements veranschaulicht, das komplexen Inhalt und ein ScrollViewer-Steuerelement enthält. In diesem Beispiel wird ein Expander-Steuerelement erstellt, das der Abbildung am Anfang dieses Abschnitts entspricht.
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
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);
}
<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>
Verwenden der Alignment-Eigenschaften
Sie können Inhalt ausrichten, indem Sie die HorizontalContentAlignment-Eigenschaft und die VerticalContentAlignment-Eigenschaft des Expander-Steuerelements festlegen. Wenn Sie diese Eigenschaften festlegen, wird die Ausrichtung auf den Header sowie auf den erweiterten Inhalt angewendet.