The following quick start guide is intended to get you up and running with Expander for WPF. In this quick start, you'll start in Visual Studio to create a new project, add the Expander control to your application, and then add content to content area of the Expander control.
Setup the application
- Create a new WPF App in Visual Studio.
- Open MainWindow.xaml and replace the existing XAML with the following code:
XAML コードのコピー<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:ExpanderQS_WPF" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="ExpanderQS_WPF.MainWindow" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Grid> </Grid> </Window>
- Place the cursor between the <Grid></Grid> tags. Now, drag and drop the C1Expander control from the ToolBox to the <Grid></Grid> tag of MainWindow.xaml. The reference assemblies get automatically added to the References and the code looks as shown below:
XAML コードのコピー```` <Grid> <c1:C1Expander></c1:C1Expander> </Grid> ````
Customize the Behavior and Appearance of Expander
- Set the header text of the control to "Contact List Expander" and set the background color of the content area to LightBlue.
- Set the ExpandDirection property to "Up" so that the Expander control will expand from the bottom rather than expanding from the top, which is its default behavior.
XAML コードのコピー<c1:C1Expander x:Name="expander" Header="Contact List Expander" ExpandDirection="Up" Background="LightBlue" ExpandedBackground="LightGreen" Margin="40,20,40,20"></c1:C1Expander>
Add Controls to the Content Area
- Place your cursor between the <c1:C1Expander> and</c1:C1Expander> tags and press ENTER.
- Navigate to the ToolBox and double-click the ListBox icon to add a ListBox control to the C1Expander control. The XAML markup will resemble the following:
XAML コードのコピー``` <c1:C1Expander x:Name="expander" Header="Header" IsExpanded="False" Margin="40,20,40,20"> <ListBox></ListBox> </c1:C1Expander> ````
This ListBox control can now be used to add multiple selectable list items to the content area of the Expander control.
- Add the following Style to the Window's Resources. This style will be used to set styling for ListBoxItems content.
XAML コードのコピー<!--Style for list box items content--> <Style x:Key="ItemStyle" TargetType="Border"> <Setter Property="Height" Value="40" /> <Setter Property="Width" Value="40" /> <Setter Property="Margin" Value="5" /> <Setter Property="CornerRadius" Value="3" /> <Setter Property="BorderThickness" Value="1" /> <Setter Property="BorderBrush"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF497D8F" /> <GradientStop Color="#FFA0B5BD" Offset="0.5" /> <GradientStop Color="#FF497D8F" Offset="1" /> </LinearGradientBrush> </Setter.Value> </Setter> </Style>
- Add the following code to the ListBox to add multiple selectable list items to the content area.
XAML コードのコピー<!--ListBox used as Expander content--> <ListBox Background="Transparent" BorderThickness="0"> <!--ListBoxItem 1--> <ListBoxItem> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="55" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Border HorizontalAlignment="Left" Style="{StaticResource ItemStyle}" VerticalAlignment="Center"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFD7D7D7" /> <GradientStop Color="#FFFFFFFF" Offset="0.65" /> </LinearGradientBrush> </Border.Background> </Border> <Path Stretch="Fill" Stroke="{x:Null}" Data="M0.23047575,53.428761 C0.23047575,53.428761 1.7739942,48.372505 8.2372379,46.648972 C14.459625,44.408974 18.306637,42.613796 20.142632,41.831745 C21.624489,40.96896 22.610243,38.190868 21.454973,37.273243 C18.158833,34.516705 15.692595,32.274837 14.929118,21.929468 C14.17528,15.247816 18.133249,4.825058 29.42902,4.8615575 C40.807087,4.8983226 43.686203,15.069401 43.082561,23.666767 C41.526867,34.338291 38.910419,35.916969 37.003471,37.014534 C36.352116,39.396107 36.775311,40.67778 37.702885,41.118092 C42.283012,42.902245 46.173183,44.732399 50.875225,46.466187 C55.977089,49.033215 57.278927,50.059654 59.879696,52.660843 L58.614933,55.069145 L57.965485,57.197723 L53.938965,59.059353 L3.5831251,59.059353 L0.71195877,56.283676 z" Width="40" HorizontalAlignment="Left" Margin="5,9.5,0,5.5" Height="35"> <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF868787" /> <GradientStop Color="#33868787" Offset="1" /> </LinearGradientBrush> </Path.Fill> </Path> <Border HorizontalAlignment="Left" Style="{StaticResource ItemStyle}" VerticalAlignment="Center" /> <TextBlock Text="Name: 
E-Mail: 
Phone:" TextWrapping="Wrap" Grid.Column="1" Width="44" d:LayoutOverrides="HorizontalAlignment" HorizontalAlignment="Left" FontSize="10" VerticalAlignment="Center" /> <TextBlock Text="John Smith" TextWrapping="Wrap" Grid.Column="1" HorizontalAlignment="Stretch" FontSize="10" VerticalAlignment="Top" Margin="40,4,0,0" /> <TextBlock Text="johns@e-mail.com" TextWrapping="Wrap" Grid.Column="1" HorizontalAlignment="Stretch" FontSize="10" d:LayoutOverrides="Height" VerticalAlignment="Center" Margin="40,0,0,0" /> <TextBlock Text="555-5632" TextWrapping="Wrap" Grid.Column="1" HorizontalAlignment="Stretch" FontSize="10" VerticalAlignment="Bottom" Margin="40,0,0,3" /> </Grid> </ListBoxItem> <!--ListBoxItem 2--> <ListBoxItem> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="55" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Border HorizontalAlignment="Left" Style="{StaticResource ItemStyle}" VerticalAlignment="Center"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFD7D7D7" /> <GradientStop Color="#FFFFFFFF" Offset="0.652" /> </LinearGradientBrush> </Border.Background> </Border> <Path Stretch="Fill" Stroke="{x:Null}" Data="M0.23047575,53.428761 C0.23047575,53.428761 1.7739942,48.372505 8.2372379,46.648972 C14.459625,44.408974 18.306637,42.613796 20.142632,41.831745 C21.624489,40.96896 22.610243,38.190868 21.454973,37.273243 C18.158833,34.516705 15.692595,32.274837 14.929118,21.929468 C14.17528,15.247816 18.133249,4.825058 29.42902,4.8615575 C40.807087,4.8983226 43.686203,15.069401 43.082561,23.666767 C41.526867,34.338291 38.910419,35.916969 37.003471,37.014534 C36.352116,39.396107 36.775311,40.67778 37.702885,41.118092 C42.283012,42.902245 46.173183,44.732399 50.875225,46.466187 C55.977089,49.033215 57.278927,50.059654 59.879696,52.660843 L58.614933,55.069145 L57.965485,57.197723 L53.938965,59.059353 L3.5831251,59.059353 L0.71195877,56.283676 z" Width="40" HorizontalAlignment="Left" Margin="5,4,0,0" Height="35"> <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF868787" /> <GradientStop Color="#33868787" Offset="1" /> </LinearGradientBrush> </Path.Fill> </Path> <Border HorizontalAlignment="Left" Style="{StaticResource ItemStyle}" VerticalAlignment="Center" /> <TextBlock Text="Name: 
E-Mail: 
Phone:" TextWrapping="Wrap" Grid.Column="1" Width="44" d:LayoutOverrides="HorizontalAlignment" HorizontalAlignment="Left" FontSize="10" VerticalAlignment="Center" /> <TextBlock Text="Bob Martin" TextWrapping="Wrap" Grid.Column="1" HorizontalAlignment="Stretch" FontSize="10" Margin="40,4,0,0" VerticalAlignment="Top" /> <TextBlock Text="bobmartin@e-mail.com" TextWrapping="Wrap" Grid.Column="1" d:LayoutOverrides="HorizontalAlignment" HorizontalAlignment="Left" FontSize="10" VerticalAlignment="Center" Margin="40,0,0,0" /> <TextBlock Text="555-6128" TextWrapping="Wrap" Grid.Column="1" HorizontalAlignment="Stretch" FontSize="10" VerticalAlignment="Bottom" Margin="40,0,0,2" /> </Grid> </ListBoxItem> <!--ListBoxItem 3--> <ListBoxItem> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="55" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Border HorizontalAlignment="Left" Style="{StaticResource ItemStyle}" VerticalAlignment="Center"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFD7D7D7" /> <GradientStop Color="#FFFFFFFF" Offset="0.65" /> </LinearGradientBrush> </Border.Background> </Border> <Path Stretch="Fill" Stroke="{x:Null}" Data="M0.23047575,53.428761 C0.23047575,53.428761 1.7739942,48.372505 8.2372379,46.648972 C14.459625,44.408974 18.306637,42.613796 20.142632,41.831745 C21.624489,40.96896 22.610243,38.190868 21.454973,37.273243 C18.158833,34.516705 15.692595,32.274837 14.929118,21.929468 C14.17528,15.247816 18.133249,4.825058 29.42902,4.8615575 C40.807087,4.8983226 43.686203,15.069401 43.082561,23.666767 C41.526867,34.338291 38.910419,35.916969 37.003471,37.014534 C36.352116,39.396107 36.775311,40.67778 37.702885,41.118092 C42.283012,42.902245 46.173183,44.732399 50.875225,46.466187 C55.977089,49.033215 57.278927,50.059654 59.879696,52.660843 L58.614933,55.069145 L57.965485,57.197723 L53.938965,59.059353 L3.5831251,59.059353 L0.71195877,56.283676 z" Width="40" HorizontalAlignment="Left" Margin="5,4,0,0" Height="35"> <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF868787" /> <GradientStop Color="#33868787" Offset="1" /> </LinearGradientBrush> </Path.Fill> </Path> <Border HorizontalAlignment="Left" Style="{StaticResource ItemStyle}" VerticalAlignment="Center" /> <TextBlock Text="Name: 
E-Mail: 
Phone:" TextWrapping="Wrap" Grid.Column="1" Width="44" d:LayoutOverrides="HorizontalAlignment" HorizontalAlignment="Left" FontSize="10" VerticalAlignment="Center" /> <TextBlock Text="Ricky Dylan" TextWrapping="Wrap" Grid.Column="1" HorizontalAlignment="Stretch" FontSize="10" VerticalAlignment="Top" Margin="40,4,0,0" /> <TextBlock Text="rickydylan@e-mail.com" TextWrapping="Wrap" Grid.Column="1" HorizontalAlignment="Stretch" FontSize="10" VerticalAlignment="Center" Margin="40,0,0,0" /> <TextBlock Text="555-2647" TextWrapping="Wrap" Grid.Column="1" HorizontalAlignment="Stretch" FontSize="10" VerticalAlignment="Bottom" Margin="40,0,0,3" /> </Grid> </ListBoxItem> </ListBox>
Run the Application
- Run the application to view how your application will appear at run time.
Observe that the expander content isn't visible. - Click the Expander control's header to expand the content.
Observe that the three ListBoxItems that you added to the content area appear.