Cenni preliminari sul controllo Expander
Aggiornamento: novembre 2007
Il controllo Expander consente di fornire contenuto in un'area espandibile dall'aspetto di una finestra e che include un'intestazione.
Nel presente argomento sono contenute le seguenti sezioni.
- Creazione di un controllo Expander semplice
- Impostazione della direzione dell'area del contenuto espandibile
- Controllo delle dimensioni di un controllo Expander in un pannello
- Creazione di contenuto scorrevole
- Utilizzo delle proprietà di allineamento
- Argomenti correlati
Creazione di un controllo Expander semplice
Nell'esempio seguente viene illustrato come creare un controllo Expander semplice. Viene creato un controllo Expander simile a quello riportato nell'illustrazione precedente.
<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>
Le proprietà Content e Header di un controllo Expander possono anche contenere contenuto complesso, ad esempio oggetti RadioButton e Image.
Impostazione della direzione dell'area del contenuto espandibile
È possibile impostare l'area del contenuto di un controllo Expander in modo che si espanda in una di quattro direzioni (Down, Up, Left o Right) tramite la proprietà ExpandDirection. Quando l'area del contenuto è compressa, vengono visualizzati solo l'oggetto ExpanderHeader e il relativo interruttore. Come interruttore per espandere o comprimere l'area del contenuto viene utilizzato un controllo Button che visualizza una freccia direzionale. Quando è espanso, il controllo Expander tenta di visualizzare tutto il contenuto in un'area simile a una finestra.
Controllo delle dimensioni di un controllo Expander in un pannello
Se un controllo Expander si trova all'interno di un controllo di layout che eredita da Panel, ad esempio StackPanel, non specificare una proprietà Height per il controllo Expander quando la proprietà ExpandDirection è impostata su Down o su Up. Analogamente, non specificare una proprietà Width per il controllo Expander quando la proprietà ExpandDirection è impostata su Left o su Right.
Quando si imposta una dimensione per un controllo Expander nella direzione in cui viene visualizzato il contenuto espanso, Expander assume il controllo dell'area utilizzata dal contenuto e visualizza un bordo che la circonda. Il bordo viene visualizzato anche quando il contenuto è compresso. Per impostare le dimensioni dell'area del contenuto espansa, impostare le dimensioni sul contenuto del controllo Expander o, se si desidera la funzionalità di scorrimento, sul controllo ScrollViewer che racchiude il contenuto.
Quando un controllo Expander è l'ultimo elemento di un oggetto DockPanel, in Windows Presentation Foundation (WPF) le dimensioni di Expander vengono automaticamente impostate in modo che siano uguali all'area rimanente dell'oggetto DockPanel. Per evitare questo comportamento predefinito, impostare su false la proprietà LastChildFill per l'oggetto DockPanel o assicurarsi che il controllo Expander non sia l'ultimo elemento di un oggetto DockPanel.
Creazione di contenuto scorrevole
Se il contenuto è troppo esteso per le dimensioni dell'area, è possibile eseguire il wrapping del contenuto di un controllo Expander in un controllo ScrollViewer per fornire contenuto scorrevole. Il controllo Expander non fornisce automaticamente funzionalità di scorrimento. Nell'illustrazione seguente viene mostrato un controllo Expander che contiene un controllo ScrollViewer.
Controllo Expander in un controllo ScrollViewer
.jpg)
Quando si inserisce un controllo Expander in un controllo ScrollViewer, impostare la proprietà della dimensione di ScrollViewer che corrisponde alla direzione in cui si apre il contenuto del controllo Expander sulle dimensioni dell'area del contenuto del controllo Expander. Ad esempio, se si imposta la proprietà ExpandDirection per il controllo Expander su Down (l'area del contenuto si apre verso il basso), impostare la proprietà Height del controllo ScrollViewer sull'altezza richiesta per l'area del contenuto. Se invece la dimensione dell'altezza viene impostata sul controllo stesso, ScrollViewer non riconosce questa impostazione e pertanto non fornisce contenuto scorrevole.
Nell'esempio seguente viene illustrato come creare un controllo Expander che include contenuto complesso e che contiene un controllo ScrollViewer. Viene creato un controllo Expander simile a quello dell'illustrazione riportata all'inizio di questa sezione.
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>
Utilizzo delle proprietà di allineamento
Per allineare il contenuto, è possibile impostare le proprietà HorizontalContentAlignment e VerticalContentAlignment per il controllo Expander. Quando si impostano queste proprietà, l'allineamento si applica all'intestazione e anche al contenuto espanso.