WinUI | ComponentOne
Controls / Expander / Appearance Customization
In This Topic
    Appearance Customization
    In This Topic

    Expander allows you to customize its appearance in different ways based on your requirements. It provides various properties which can be used to customize different elements of the Expander control such as its header, icon and content area. The following sections explain different customizations that can change the appearance of the Expander control.

    Set Header

    By default, the header element of the Expander control appears at the top of the control and the expand icon appears on the right side of the header. The header element contains no text initially. However, you can add text to it using Header property of the C1Expander class.

    Text written in Header of the Expander control

    To add text to the header element, you simply need to set the Header property to a string, say Contact List, as illustrated in the following example.

    XAML
    Copy Code 
    <!--Header-->
<StackPanel Orientation="Vertical" Grid.Column="0">
    <TextBlock Text="Header" TextAlignment="Center" FontSize="14" FontWeight="Bold" Margin="0,0,0,20"></TextBlock>
    <c1:C1Expander x:Name="expander1" Header="Contact List" MaxWidth="300" VerticalAlignment="Top" HorizontalAlignment="Center" Background="Linen">
        <ListBox Background="Transparent" BorderThickness="0">
            <!--ListBoxItem 1-->
            <ListBoxItem>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="55" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="\IconImages\contact_icon.png"></Image>
                    <TextBlock Text="Name:  &#xA;E-Mail: &#xA;Phone:" TextWrapping="Wrap" Grid.Column="1" 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>
                    <Image Source="\IconImages\contact_icon.png"></Image>
                    <TextBlock Text="Name:  &#xA;E-Mail: &#xA;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>
                    <Image Source="\IconImages\contact_icon.png"></Image>
                    <TextBlock Text="Name:  &#xA;E-Mail: &#xA;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>
    </c1:C1Expander>
</StackPanel>

    Back to Top

    Header Customization

    In addition to adding text to the header element, Expander allows you to change the appearance of the header. It lets you change the template of the expander header using HeaderTemplate property of the C1Expander class. The HeaderTemplate property sets the template for the header by accessing the DataTemplate class:

    Expander header customization using header template

    The following code demonstrates how you can set a header template for the Expander control:

    XAML
    Copy Code 
    <!--Customizing Header-->
<StackPanel Orientation="Vertical" Grid.Column="1">
    <TextBlock Text="Customized Header" TextAlignment="Center" FontSize="14" FontWeight="Bold" Margin="0,0,0,20"></TextBlock>
    <c1:C1Expander x:Name="expander2" Header="Contact List" MaxWidth="300" VerticalAlignment="Top" HorizontalAlignment="Center" Background="LavenderBlush">
        <!--Header Template-->
        <c1:C1Expander.HeaderTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Margin="5, 0" Source="\IconImages\contact_icon.png" Height="20" Width="20"></Image>
                    <TextBlock VerticalAlignment="Center" FontWeight="Bold">Contact List</TextBlock>
                </StackPanel>
            </DataTemplate>
        </c1:C1Expander.HeaderTemplate>
        <ListBox Background="Transparent" BorderThickness="0">
            <!--ListBoxItem 1-->
            <ListBoxItem>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="55" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="\IconImages\contact_icon.png"></Image>
                    <TextBlock Text="Name:  &#xA;E-Mail: &#xA;Phone:" TextWrapping="Wrap" Grid.Column="1" 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>
                    <Image Source="\IconImages\contact_icon.png"></Image>
                    <TextBlock Text="Name:  &#xA;E-Mail: &#xA;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>
                    <Image Source="\IconImages\contact_icon.png"></Image>
                    <TextBlock Text="Name:  &#xA;E-Mail: &#xA;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>
    </c1:C1Expander>
</StackPanel>

    Back to Top

    Content Customization

    The content area of the Expander control is initially empty. However, you can add grids, text, images, and arbitrary controls in this content area. To simply add text to the content area of the Expander control, use the Content property as shown in the image below.

    Text added in Content Area of the WinUI Expander Control

    The following code can be used to add text to the content area of the Expander control:

    XAML
    Copy Code 
    <!--Content Area: Text-->
<StackPanel Orientation="Vertical" Grid.Column="0">
    <TextBlock Text="Content Area: Text" TextAlignment="Center" FontSize="14" FontWeight="Bold" Margin="0,0,0,20"></TextBlock>
    <c1:C1Expander x:Name="expander1" Header="Contact List" Content="  Contact 1" Width="300" VerticalAlignment="Top" HorizontalAlignment="Center" Background="Linen">
    </c1:C1Expander>
</StackPanel>

    However, there may be times where you want to add other elements, such as check boxes, list box, grids or panels, to the content area. In this case, you can add the elements of your choice to the Expander control. For example, in the following example, we are adding a ListBox to the content area of the Expander control as shown in the image below.

    ListBox added to the content area in the WinUI Expander control

    The following code can be used to add a ListBox to the content area of the Expander control:

    XAML
    Copy Code 
    <!--Content Area: ListBox Control-->
<StackPanel Orientation="Vertical" Grid.Column="1">
    <TextBlock Text="Content Area: ListBox Control" TextAlignment="Center" FontSize="14" FontWeight="Bold" Margin="0,0,0,20"></TextBlock>
    <c1:C1Expander x:Name="expander2" Header="Contact List" MaxWidth="300" VerticalAlignment="Top" HorizontalAlignment="Center" Background="Linen">
        <ListBox Background="Transparent" BorderThickness="0">
            <ListBoxItem>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="55" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="\IconImages\contact_icon.png"></Image>
                    <TextBlock Text="Name:  &#xA;E-Mail: &#xA;Phone:" TextWrapping="Wrap" Grid.Column="1" 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>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="55" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="\IconImages\contact_icon.png"></Image>
                    <TextBlock Text="Name:  &#xA;E-Mail: &#xA;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>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="55" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="\IconImages\contact_icon.png"></Image>
                    <TextBlock Text="Name:  &#xA;E-Mail: &#xA;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>
    </c1:C1Expander>
</StackPanel>

    Back to Top

    Expand Icon Customization

    Expander allows you to change the appearance of the expand icon by changing the icon template. It lets you change the template of expand icon using ExpandIconTemplate property of the C1Expander class. The ExpandIconTemplate property sets the template for the expand icon by accessing the DataTemplate class:

    WinUI Expander with custom icon

    The following code can be used to customize the expand icon of the Expander control.

    XAML
    Copy Code 
    <!--Customized Expand Icon-->
<StackPanel Orientation="Vertical" Grid.Row="1" Grid.Column="0">
    <TextBlock Text="Customized Expand Icon" TextAlignment="Center" FontWeight="Bold" FontSize="14" Margin="0,0,0,20"></TextBlock>
    <c1:C1Expander x:Name="expander2" Header="Contact List" Width="300" VerticalAlignment="Top" HorizontalAlignment="Center" Background="Linen">
        <c1:C1Expander.ExpandIconTemplate>
            <DataTemplate>
                <Image Source="\IconImages\expandicon.ico" Height="15" Width="15"></Image>
            </DataTemplate>
        </c1:C1Expander.ExpandIconTemplate>
        <ListBox Background="Transparent" BorderThickness="0">
            <ListBoxItem>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="55" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="\IconImages\contact_icon.png"></Image>
                    <TextBlock Text="Name:  &#xA;E-Mail: &#xA;Phone:" TextWrapping="Wrap" Grid.Column="1" 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>
                    <Image Source="\IconImages\contact_icon.png"></Image>
                    <TextBlock Text="Name:  &#xA;E-Mail: &#xA;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>
                    <Image Source="\IconImages\contact_icon.png"></Image>
                    <TextBlock Text="Name:  &#xA;E-Mail: &#xA;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>
    </c1:C1Expander>
</StackPanel>

    Back to Top

    Expand Icon Alignment

    Expand Icon appears next to the header of the Expander control and is clicked to expand the content area. By default, the expand icon is aligned on the right side of the header. However, you can change the alignment of the expand icon as per your requirements using ExpandIconAlignment property of the C1Expander class. The ExpandIconAlignment property accepts the alignment value from the ExpanderIconAlignment enumeration.

    WinUI Expander icon alignment

    The following code shows how you can change the alignment of the expand icon to left:

    XAML
    Copy Code 
    <!--Expand Icon Alignment-->
<StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="0">
    <TextBlock Text="Expand Icon Alignment" TextAlignment="Center" FontWeight="Bold" FontSize="14" Margin="0,0,0,20"></TextBlock>
    <c1:C1Expander x:Name="expander1" Header="Contact List" ExpandIconAlignment="Left" Width="300" VerticalAlignment="Top" HorizontalAlignment="Center" Background="Linen">
        <ListBox Background="Transparent" BorderThickness="0">
            <ListBoxItem>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="55" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="\IconImages\contact_icon.png"></Image>
                    <TextBlock Text="Name:  &#xA;E-Mail: &#xA;Phone:" TextWrapping="Wrap" Grid.Column="1" 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>
                    <Image Source="\IconImages\contact_icon.png"></Image>
                    <TextBlock Text="Name:  &#xA;E-Mail: &#xA;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>
                    <Image Source="\IconImages\contact_icon.png"></Image>
                    <TextBlock Text="Name:  &#xA;E-Mail: &#xA;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>
    </c1:C1Expander>
</StackPanel>

    Back to Top