<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="ExtendedSamples.DemoAccordion" mc:Ignorable="d" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" xmlns:local="clr-namespace:ExtendedSamples" xmlns:helpers="clr-namespace:Helpers" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/ExtendedSamples.4;component/CommonResources.xaml" />
            </ResourceDictionary.MergedDictionaries>

            <Style TargetType="Image" x:Key="TreeIcon">
                <Setter Property="Width" Value="14" />
                <Setter Property="Height" Value="14" />
            </Style>
            <Style TargetType="TextBlock" x:Key="TreeText">
                <Setter Property="FontSize" Value="12" />
                <Setter Property="Margin" Value="4 0 0 0" />
            </Style>
            <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>

        </ResourceDictionary>
    </UserControl.Resources>
    <!-- Control instance -->
    <Border Grid.Row="1" Style="{DynamicResource control_Border}">
        <c1:C1Accordion x:Name="accordion" Width="300" Margin="25">
            <c1:C1AccordionItem Header="Mail" IsExpanded="True">
                <c1:C1ListBox>
                    <c1:C1ListBoxItem>
                        <Grid>
                            <Image Style="{StaticResource TreeIcon}" Source="/ExtendedSamples.4;component/Resources/Folder.png" HorizontalAlignment="Left" />
                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="All Items" TextWrapping="Wrap" Margin="16,0,0,0" Width="60" />
                        </Grid>
                    </c1:C1ListBoxItem>
                    <c1:C1ListBoxItem FontWeight="Bold" FontFamily="Portable User Interface">
                        <c1:C1ListBoxItem.Background>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FFFFE8A7" Offset="0.004" />
                                <GradientStop Color="#FFFFE8A7" Offset="1" />
                            </LinearGradientBrush>
                        </c1:C1ListBoxItem.Background>
                        <Grid>
                            <Image Style="{StaticResource TreeIcon}" Source="/ExtendedSamples.4;component/Resources/Folder.png" HorizontalAlignment="Left" />
                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="Inbox (1)" TextWrapping="Wrap" Margin="16,0,0,0" Width="60" />
                        </Grid>
                    </c1:C1ListBoxItem>
                    <c1:C1ListBoxItem>
                        <Grid>
                            <Image Style="{StaticResource TreeIcon}" Source="/ExtendedSamples.4;component/Resources/Folder.png" HorizontalAlignment="Left" />
                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="Drafts" TextWrapping="Wrap" Margin="16,0,0,0" Width="60" />
                        </Grid>
                    </c1:C1ListBoxItem>
                    <c1:C1ListBoxItem>
                        <Grid>
                            <Image Style="{StaticResource TreeIcon}" Source="/ExtendedSamples.4;component/Resources/Folder.png" HorizontalAlignment="Left" />
                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="Sent Items" TextWrapping="Wrap" Margin="16,0,0,0" Width="65" />
                        </Grid>
                    </c1:C1ListBoxItem>
                    <c1:C1ListBoxItem>
                        <Grid>
                            <Image Style="{StaticResource TreeIcon}" Source="/ExtendedSamples.4;component/Resources/RecycleBin.png" HorizontalAlignment="Left" />
                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="Trash" TextWrapping="Wrap" Margin="16,0,0,0" Width="60" />
                        </Grid>
                    </c1:C1ListBoxItem>
                </c1:C1ListBox>
            </c1:C1AccordionItem>
            <c1:C1AccordionItem Header="Contacts" IsExpanded="False">
                <c1:C1ListBox>
                    <c1:C1ListBoxItem>
                        <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,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:  &#xA;E-Mail: &#xA;Phone:" TextWrapping="Wrap" Grid.Column="1" Width="44" d:LayoutOverrides="HorizontalAlignment" HorizontalAlignment="Left" FontSize="10" VerticalAlignment="Center" />
                            <TextBlock Text="John Smith  johnsmith@e-mail.com 555-5632" TextWrapping="Wrap" Grid.Column="1" Width="120" d:LayoutOverrides="HorizontalAlignment" HorizontalAlignment="Left" FontSize="10" VerticalAlignment="Center" Margin="40,0,0,0" />
                        </Grid>
                    </c1:C1ListBoxItem>
                    <c1:C1ListBoxItem>
                        <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:  &#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  bobmartin@e-mail.com 555-6128" TextWrapping="Wrap" Grid.Column="1" Width="120" d:LayoutOverrides="HorizontalAlignment" HorizontalAlignment="Left" FontSize="10" VerticalAlignment="Center" Margin="40,0,0,0" />
                        </Grid>
                    </c1:C1ListBoxItem>
                    <c1:C1ListBoxItem>
                        <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:  &#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  rickydylan@e-mail.com 555-2647" TextWrapping="Wrap" Grid.Column="1" Width="120" d:LayoutOverrides="HorizontalAlignment" HorizontalAlignment="Left" FontSize="10" VerticalAlignment="Center" Margin="40,0,0,0" />
                        </Grid>
                    </c1:C1ListBoxItem>
                </c1:C1ListBox>
            </c1:C1AccordionItem>
            <c1:C1AccordionItem Header="Tasks" IsExpanded="False">
                <c1:C1ListBox>
                    <c1:C1ListBoxItem>
                        <Grid>
                            <Image Style="{StaticResource TreeIcon}" Source="/ExtendedSamples.4;component/Resources/Folder.png" HorizontalAlignment="Left" />
                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="All Tasks" TextWrapping="Wrap" Margin="16,0,0,0" Width="60" />
                        </Grid>
                    </c1:C1ListBoxItem>
                    <c1:C1ListBoxItem>
                        <Grid>
                            <Image Style="{StaticResource TreeIcon}" Source="/ExtendedSamples.4;component/Resources/Folder.png" HorizontalAlignment="Left" />
                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="Completed Tasks" TextWrapping="Wrap" Margin="16,0,0,0" Width="94.724" />
                        </Grid>
                    </c1:C1ListBoxItem>
                    <c1:C1ListBoxItem>
                        <Grid>
                            <Image Style="{StaticResource TreeIcon}" Source="/ExtendedSamples.4;component/Resources/Folder.png" HorizontalAlignment="Left" />
                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="Active Tasks" TextWrapping="Wrap" Margin="16,0,0,0" Width="87.324" />
                        </Grid>
                    </c1:C1ListBoxItem>
                    <c1:C1ListBoxItem>
                        <Grid>
                            <Image Style="{StaticResource TreeIcon}" Source="/ExtendedSamples.4;component/Resources/Folder.png" HorizontalAlignment="Left" />
                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="Overdue Tasks" TextWrapping="Wrap" Margin="16,0,0,0" Width="88.462" />
                        </Grid>
                    </c1:C1ListBoxItem>
                    <c1:C1ListBoxItem>
                        <Grid>
                            <Image Style="{StaticResource TreeIcon}" Source="/ExtendedSamples.4;component/Resources/Folder.png" HorizontalAlignment="Left" />
                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="By Category" TextWrapping="Wrap" Margin="16,0,0,0" Width="75" />
                        </Grid>
                    </c1:C1ListBoxItem>
                </c1:C1ListBox>
            </c1:C1AccordionItem>
        </c1:C1Accordion>
    </Border>
</UserControl>