Omówienie ekspandera
Kontrolka Expander umożliwia udostępnianie zawartości w rozszerzalnym obszarze, który przypomina okno i zawiera nagłówek.
Tworzenie prostego ekspandera
W poniższym przykładzie pokazano, jak utworzyć prostą kontrolkę Expander. W tym przykładzie zostanie utworzona Expander, która wygląda jak poprzednia ilustracja.
<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 i HeaderExpander mogą również zawierać zawartość złożoną, taką jak obiekty 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 właściwości ExpandDirection. Po zwinięciu obszaru zawartości widoczne będą tylko ExpanderHeader i jego przycisk włączania/wyłączania. Kontrolka Button, która wyświetla strzałkę kierunkową, jest używana jako przycisk przełącznika w celu rozwinięcia lub zwinięcia obszaru zawartości. Po rozwinięciu Expander próbuje wyświetlić swoją pełną zawartość w obszarze, który przypomina okno.
Kontrolowanie rozmiaru ekspandera w panelu
Jeśli kontrolka Expander znajduje się w kontrolce układu, która dziedziczy z Panel, takiej jak StackPanel, nie należy określać Height w Expander, gdy właściwość ExpandDirection jest ustawiona na Down lub Up. Podobnie nie należy określać Width na Expander, gdy właściwość ExpandDirection jest ustawiona na Left lub Right.
Po ustawieniu wymiaru na kontrolce Expander w kierunku, w którym jest wyświetlana rozwinięta zawartość, element Expander przejmuje kontrolę nad obszarem wykorzystywanym przez zawartość i wyświetla wokół niego obramowanie. Obramowanie jest wyświetlane nawet wtedy, gdy zawartość jest zwinięta. Aby ustawić wymiary rozszerzonego obszaru zawartości, ustaw wymiary zawartości Expanderlub, jeśli chcesz możliwość przewijania, na ScrollViewer, który otacza zawartość.
Gdy kontrolka Expander jest ostatnim elementem w programie DockPanel, program Windows Presentation Foundation (WPF) automatycznie ustawia wymiary Expander równe pozostałemu obszarowi DockPanel. Aby zapobiec temu domyślnemu zachowaniu, ustaw właściwość LastChildFill obiektu DockPanel na falselub upewnij się, że Expander nie jest ostatnim elementem w DockPanel.
Tworzenie przewijanej zawartości
Jeśli zawartość jest zbyt duża dla rozmiaru obszaru zawartości, możesz umieścić zawartość Expander w ScrollViewer, aby zapewnić możliwość przewijania zawartości. Kontrolka Expander nie zapewnia automatycznej możliwości przewijania. Poniższa ilustracja przedstawia kontrolkę Expander zawierającą kontrolkę ScrollViewer.
Rozwijacz w Przeglądarce przewijania
Po umieszczeniu kontrolki Expander w ScrollViewer, ustaw właściwość wymiaru ScrollViewer, która odpowiada kierunkowi otwierania zawartości Expander, na rozmiar obszaru zawartości Expander. Jeśli na przykład ustawisz właściwość ExpandDirection na Expander na wartość Down (obszar zawartości otworzy się w dół), ustaw właściwość Height na kontrolce ScrollViewer na 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 udostępnia zawartości przewijanej.
W poniższym przykładzie pokazano, jak utworzyć kontrolkę Expander zawierającą złożoną zawartość oraz kontrolkę ScrollViewer. W tym przykładzie zostanie utworzony element Expander, który jest podobny 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 właściwości HorizontalContentAlignment 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ż
.NET Desktop feedback