Visão Feral do Expander
Um controle Expander fornece uma maneira de fornecer o conteúdo em uma área expansível que lembra uma janela e inclui um cabeçalho.
Este tópico contém as seguintes seções.
- Criando um Expansor Simples
- Definindo a direção da área de conteúdo de expansão
- Controlando o tamanho de um expansor em um painel
- Criando Conteúdo Rolável
- Usando as propriedades de alinhamento
- Tópicos relacionados
Criando um Expansor Simples
O exemplo a seguir mostra como criar um controle Expander simples. Este exemplo cria um Expander que aparenta similaridades com a ilustração anterior.
<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>
O Content e Header de um Expander também pode conter conteúdo complexo, como objetos RadioButton e Image.
Definindo a direção da área de conteúdo de expansão
Você pode definir a área de conteúdo de um controle Expander para expandir em uma das quatro direções (Down, Up, Left, ou Right) por meio da propriedade ExpandDirection. Quando a área de conteúdo estiver recolhida, apenas o Expander Header e seus botões de alternância são exibidos. Um controle Button que exibe uma seta direcional é usado como um botão de alternância para expandir ou recolher a área de conteúdo. Quando expandido, o Expander tenta exibir todos os seu conteúdo em uma área como de janela.
Controlando o tamanho de um expansor em um painel
Se um controle Expander está dentro de um controle de layout que herda de Panel, como StackPanel, não especifique um Height na Expander quando a propriedade ExpandDirection é definida como Down ou Up. Da mesma forma, não especifique um Width na Expander quando a propriedade ExpandDirection é definida como Left ou Right.
Ao definir um tamanho de dimensão em um controle Expander na direção que o conteúdo expandido é exibido, o Expander assume o controle da área que é usado pelo conteúdo e exibirá uma borda ao redor dele. A borda é mostrada mesmo quando o conteúdo estiver recolhido. Para definir o tamanho da área de conteúdo expandido, define dimensões de tamanho no conteúdo de Expander, ou se você deseja capacidade de rolamento, em ScrollViewer que inclui o conteúdo.
Quando um controle Expander é o último elemento em um DockPanel, Windows Presentation Foundation (WPF) define automaticamente as dimensões de Expander para igualar a área restante da DockPanel. Para evitar esse comportamento padrão, defina a propriedade LastChildFill no objeto DockPanel como false, ou certifique-se que Expander é não o último elemento em um DockPanel.
Criando Conteúdo Rolável
Se o conteúdo for muito grande para o tamanho da área de conteúdo, você pode dispor o conteúdo de um Expander em um ScrollViewer para fornecer conteúdo rolável. O controle Expander não oferece automaticamente a capacidade de rolagem. A ilustração a seguir mostra um controle Expander que contém um controle ScrollViewer.
Expansor em um ScrollViewer
Quando você coloca um controle Expander em um ScrollViewer, defina a propriedade da dimensão de ScrollViewer que corresponde a direção na qual o conteúdo de Expander é aberto para o tamanho da área de conteúdo de Expander. Por exemplo, se você definir a propriedade ExpandDirection na Expander como Down (a área de conteúdo é aberto para baixo), defina a propriedade Height no controle ScrollViewer à altura necessária para a área de conteúdo. Se, em vez disso, você definir a dimensão da altura no próprio conteúdo, ScrollViewer não reconhece essa configuração e portanto, não fornece conteúdo rolável.
O exemplo a seguir mostra como criar um controle Expander que tem conteúdo complexo e que contém um controle ScrollViewer. Este exemplo cria um Expander que é como a ilustração no início desta seção.
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>
Usando as propriedades de alinhamento
Você pode alinhar o conteúdo definindo a propriedades HorizontalContentAlignment e VerticalContentAlignment no controle Expander. Quando você definir essas propriedades, o alinhamento se aplica ao cabeçalho e também para o conteúdo expandido.