Genişleticiye Genel Bakış
Bir Expander Denetim, bir pencereye benzeyen ve üst bilgi içeren bir Genişletilebilir alana içerik sağlamak için bir yol sağlar.
Basit Genişleticisi oluşturma
Aşağıdaki örnek nasıl basit bir denetim oluşturulacağını göstermektedir Expander . Bu örnek Expander , önceki çizim gibi görünen bir oluşturur.
<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>
ContentVe Header bir, gibi Expander karmaşık içerik de içerebilir RadioButton Image .
Genişleyen Içerik alanının yönünü ayarlama
Özelliğini kullanarak, bir denetimin içerik alanını Expander dört yönden (,, Down Up Left , veya Right ) ExpandDirection birinde genişletilecek şekilde ayarlayabilirsiniz. İçerik alanı daraltıldığında, yalnızca Expander Header ve iki durumlu düğmesi görünür. ButtonÇift yönlü oku görüntüleyen bir denetim, içerik alanını genişletmek veya daraltmak için iki durumlu düğme olarak kullanılır. Genişletilmişse, Expander tüm içeriğini pencere benzeri bir alanda görüntülemeye çalışır.
Paneldeki bir Genişleticin boyutunu denetleme
Bir Expander Denetim öğesinden devralan bir düzen denetiminin içindeyse,, Panel StackPanel Height Expander ExpandDirection özelliği veya olarak ayarlandığında üzerinde bir olarak belirtmeyin Down Up . Benzer şekilde, Width Expander ExpandDirection özelliği veya olarak ayarlandığında üzerinde bir belirtmeyin Left Right .
Genişletilmiş içeriğin görüntülendiği yönde bir denetimde bir boyut boyutu ayarladığınızda, Expander Expander içerik tarafından kullanılan alanın denetimini alır ve etrafında bir kenarlık görüntüler. Kenarlık, içerik daraltıldığında bile görüntülenir. Genişletilmiş içerik alanının boyutunu ayarlamak için, Expander veya içeriğini kapsayan üzerinde kaydırma özelliği istiyorsanız, ' ın içeriğinde boyut boyutlarını ayarlayın ScrollViewer .
ExpanderBir denetim a içindeki son öğe olduğunda DockPanel , Windows Presentation Foundation (WPF) boyutları otomatik olarak Expander kalan alanına eşit olacak şekilde ayarlar DockPanel . Bu varsayılan davranışı engellemek için LastChildFill nesnesi üzerinde özelliğini DockPanel olarak ayarlayın false veya Expander içindeki son öğe olmadığından emin olun DockPanel .
Kaydırılabilir Içerik oluşturma
İçerik, içerik alanının boyutu için çok büyükse, Expander ScrollViewer kaydırılabilir içerik sağlamak için bir içindeki içeriğini bir içine sardırabilirsiniz. ExpanderDenetim otomatik olarak kaydırma özelliği sağlamıyor. Aşağıdaki çizimde Expander Denetim içeren bir denetim gösterilmektedir ScrollViewer .
ScrollViewer 'da genişletici

' Expander A bir denetim yerleştirdiğinizde, içeriğin ScrollViewer ScrollViewer Expander içerik alanının boyutuna açıldığı yöne karşılık gelen boyut özelliğini ayarlayın Expander . Örneğin, ExpandDirection özelliğini Expander olarak ayarlarsanız Down (içerik alanı aşağı açılır), Height ScrollViewer denetimdeki özelliği içerik alanının gerekli yüksekliğine ayarlayın. Bunun yerine, içerik üzerinde yükseklik boyutunu ayarlarsanız, ScrollViewer Bu ayarı tanımaz ve bu nedenle kaydırılabilir içerik sağlamaz.
Aşağıdaki örnek, Expander karmaşık içeriğe sahip ve bir denetim içeren bir denetimin nasıl oluşturulacağını gösterir ScrollViewer . Bu örnek, Expander Bu bölümün başındaki çizim gibi bir oluşturur.
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>
Hizalama özelliklerini kullanma
HorizontalContentAlignmentDenetimdeki ve özelliklerini ayarlayarak içeriği hizalayabilirsiniz VerticalContentAlignment Expander . Bu özellikleri ayarladığınızda, hizalama üstbilgiye ve ayrıca genişletilmiş içeriğe uygulanır.