Обзор расширителя
Элемент управления Expander предоставляет содержимое в расширяемой области, которая напоминает окно и включает заголовок.
Создание простого расширения
В следующем примере показано, как создать простой элемент управления Expander. В этом примере создается Expander, которое похоже на предыдущую иллюстрацию.
<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 и HeaderExpander также могут содержать сложный контент, например, объекты RadioButton и Image.
Установка направления расширяющейся области контента
Область содержимого элемента управления Expander можно развернуть в одном из четырех направлений (Down, Up, Leftили Right) с помощью свойства ExpandDirection. Когда область содержимого свернута, отображается только ExpanderHeader и кнопка переключателя. Элемент управления Button, отображающий стрелку направления, используется в качестве кнопки переключателя для расширения или свертывания области содержимого. При развертывании Expander пытается отобразить своё содержимое целиком в области, напоминающей окно.
Управление размером расширителя на панели
Если элемент управления Expander находится внутри элемента управления макетом, наследуемого от Panel, например StackPanel, не указывайте Height на Expander, если для свойства ExpandDirection задано значение Down или Up. Аналогичным образом, не указывайте Width в Expander, если для свойства ExpandDirection задано значение Left или Right.
Когда вы задаете размер элемента управления Expander в направлении, в котором отображается развернутое содержимое, Expander управляет областью, в которой размещено содержимое, и отображает границу вокруг него. Граница отображается даже когда содержимое свернуто. Чтобы задать размер развернутой области содержимого, укажите размеры на содержимое Expanderили, если требуется возможность прокрутки, на ScrollViewer, который включает содержимое.
Если элемент управления Expander является последним элементом в DockPanel, Windows Presentation Foundation (WPF) автоматически задает размеры Expander равным оставшейся области DockPanel. Чтобы предотвратить это поведение по умолчанию, задайте свойство LastChildFill объекта DockPanel в значение falseили убедитесь, что Expander не является последним элементом в DockPanel.
Создание прокручиваемого содержимого
Если содержимое слишком велико для размера области содержимого, можно упаковать содержимое Expander в ScrollViewer, чтобы предоставить прокручиваемое содержимое. Элемент управления Expander не предоставляет возможность прокрутки автоматически. На следующем рисунке показан элемент управления Expander, содержащий элемент управления ScrollViewer.
расширитель в прокрутке просмотра
При установке элемента управления Expander в ScrollViewerзадайте свойство измерения ScrollViewer, соответствующее направлению, в котором содержимое Expander открывается для размера области содержимого Expander. Например, если для свойства ExpandDirection в Expander задано значение Down (область содержимого открывается вниз), задайте свойству Height в элементе управления ScrollViewer необходимую высоту для области содержимого. Если вместо этого задать измерение высоты для самого содержимого, ScrollViewer не распознает этот параметр и поэтому не предоставляет прокручиваемое содержимое.
В следующем примере показано, как создать элемент управления Expander с сложным содержимым и содержащий элемент управления ScrollViewer. В этом примере создается объект Expander, похожий на иллюстрацию в начале этого раздела.
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>
Использование свойств выравнивания
Вы можете выровнять содержимое, задав свойства HorizontalContentAlignment и VerticalContentAlignment в элементе управления Expander. При установке этих свойств выравнивание применяется к заголовку, а также к расширенному содержимому.
См. также
.NET Desktop feedback