Общие сведения об элементе управления Expander
Expander Управления обеспечивает способ предоставления содержимого в развертываемой области, имеющей вид окна и включающей заголовок.
Создание простого элемента управления 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 И Header из Expander могут также содержать сложного содержимого, такие как RadioButton и Image объектов.
Задание направления развертывания области содержимого
Можно задать область содержимого Expander управления для развертывания в одном из четырех направлений (Down, Up, Left, или Right) с помощью ExpandDirection свойство. Когда область содержимого свернута, только ExpanderHeader и его выключатель. Объект Button элемент управления, отображающий стрелку направления используется в качестве выключателя для развертывания или свертывания области содержимого. При развертывании Expander пытается отобразить все его содержимое в области, подобной окну.
Управление размером элемента управления 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
При размещении 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);
}
<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 элемента управления. При задании этих свойств выравнивание применяется к заголовку и развернутому содержимому.