Übersicht über Expander-Steuerelemente
Ein Expander-Steuerelement bietet eine Möglichkeit, Inhalte in einem erweiterbaren Bereich bereitzustellen, der einem Fenster ähnelt und ein Kopfteil enthält.
Erstellen einer einfachen Expanders
Das folgende Beispiel zeigt, wie Sie ein einfaches Expander-Steuerelement erstellen. In diesem Beispiel wird eine Expander-Instanz erstellt, die wie in der vorherigen Abbildung aussieht.
<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 einer Expander-Instanz können auch komplexe Inhalte enthalten, z. B. RadioButton- und Image-Objekte.
Festlegen der Erweiterungsrichtung des Inhaltsbereichs
Sie können den Inhaltsbereich eines Expander-Steuerelements so festlegen, dass er sich in eine von vier Richtungen (Down, Up, Left oder Right) ausdehnt, indem Sie die ExpandDirection-Eigenschaft verwenden. Wenn der Inhaltsbereich reduziert ist, werden nur ExpanderHeader und die zugehörige Umschaltfläche angezeigt. Ein Button-Steuerelement, das einen Richtungspfeil anzeigt, wird als Umschaltfläche zum Erweitern oder Reduzieren des Inhaltsbereichs verwendet. Wenn sie erweitert ist, versucht die Expander-Instanz, ihren gesamten Inhalt in einem fensterähnlichen Bereich anzuzeigen.
Steuerung der Größe eines Expanders in einem Panel
Wenn sich ein Expander-Steuerelement innerhalb eines Layoutsteuerelements befindet, das von Panel erbt, z. B. StackPanel, geben Sie keine Height für Expander an, wenn die ExpandDirection-Eigenschaft auf Down oder Up festgelegt ist. Geben Sie auch keine Width für Expander an, wenn die ExpandDirection-Eigenschaft auf Left oder Right festgelegt ist.
Wenn Sie eine Größendimension für ein Expander-Steuerelement in der Richtung festlegen, in der der erweiterte Inhalt angezeigt wird, übernimmt das Expander-Steuerelement die Kontrolle über den Bereich, der vom Inhalt verwendet wird, und zeigt einen Rahmen um ihn herum an. Der Rahmen wird auch angezeigt, wenn der Inhalt reduziert ist. Um die Größe des erweiterten Inhaltsbereichs festzulegen, legen Sie die Größendimensionen für den Inhalt der Expander-Instanz fest, oder, wenn Sie die Möglichkeit zum Scrollen wünschen, für die ScrollViewer, die den Inhalt umschließt.
Wenn ein Expander-Steuerelement das letzte Element in einem DockPanel ist, stellt Windows Presentation Foundation (WPF) automatisch die Expander-Dimensionen so ein, dass sie dem verbleibenden Bereich der DockPanel-Instanz entsprechen. Um dieses Standardverhalten zu verhindern, legen Sie die LastChildFill-Eigenschaft des DockPanel-Objekts auf false fest, oder stellen Sie sicher, dass Expander nicht das letzte Element in einem DockPanel ist.
Erstellen vom bildlauffähigem Inhalt
Wenn der Inhalt zu groß für die Größe des Inhaltsbereichs ist, können Sie den Inhalt einer Expander-Instanz in ein ScrollViewer umschließen, um einen scrollbaren Inhalt zu erhalten. Das Expander-Steuerelement bietet keine automatische Scrollfunktion. Die folgende Abbildung zeigt ein Expander-Steuerelement, das ein ScrollViewer-Steuerelement enthält.
Expander-Steuerelement in einem ScrollViewer
Wenn Sie ein Expander-Steuerelement in einem ScrollViewer platzieren, legen Sie die ScrollViewer-Dimensionseigenschaft, die der Richtung entspricht, in der sich der Expander-Inhalt öffnet, auf die Größe des Expander-Inhaltsbereichs fest. Wenn Sie z. B. die ExpandDirection-Eigenschaft des Expander-Steuerelements auf Down festlegen (der Inhaltsbereich öffnet sich nach unten), legen Sie die Height-Eigenschaft des ScrollViewer-Steuerelements auf die erforderliche Höhe für den Inhaltsbereich fest. Wenn Sie stattdessen die Höhendimension für den Inhalt selbst festlegen, erkennt ScrollViewer diese Einstellung nicht und bietet daher keinen scrollbaren Inhalt.
Das folgende Beispiel zeigt, wie Sie ein Expander-Steuerelement mit komplexem Inhalt erstellen, das ein ScrollViewer-Steuerelement enthält. Dieses Beispiel erstellt eine Expander-Instanz, die der Abbildung am Anfang dieses Abschnitts entspricht.
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>
Verwenden der Ausrichtungseigenschaften
Sie können den Inhalt ausrichten, indem Sie die Eigenschaften HorizontalContentAlignment und VerticalContentAlignment für das Expander-Steuerelement festlegen. Wenn Sie diese Eigenschaften festlegen, wird die Ausrichtung sowohl auf den Header, als auch auf den erweiterten Inhalt angewendet.
Siehe auch
.NET Desktop feedback
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.
Feedback senden und anzeigen für