<UserControl x:Class="ControlExplorer.Controls.OrgChart.TemplateSample"
             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:local="using:ControlExplorer.Controls.OrgChart"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:orgchart="using:C1.Xaml.OrgChart"
             d:DesignHeight="300"
             d:DesignWidth="400"
             mc:Ignorable="d">

    <UserControl.Resources>
        <!--  TemplateSelector: picks _tplDirector or _tlpOther  -->
        <local:PersonTemplateSelector x:Key="_personTplSelector">
            <local:PersonTemplateSelector.DirectorTemplate>
                <!--  data template for Directors  -->
                <DataTemplate>
                    <Border Width="90"
                            Height="40"
                            Background="#FF01917F">
                        <StackPanel HorizontalAlignment="Left"
                                    VerticalAlignment="Center"
                                    Orientation="Vertical">
                            <StackPanel Orientation="Horizontal">
                                <Ellipse Width="12"
                                         Height="8"
                                         MinHeight="8"
                                         Fill="#FF4FB7AB" />
                                <TextBlock FontSize="14"
                                           FontWeight="SemiLight"
                                           Foreground="White"
                                           Text="{Binding Name}" />
                            </StackPanel>
                            <TextBlock HorizontalAlignment="Right"
                                       FontSize="9"
                                       FontWeight="Light"
                                       Foreground="White"
                                       Text="{Binding Position}" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </local:PersonTemplateSelector.DirectorTemplate>
            <local:PersonTemplateSelector.ManagerTemplate>
                <!--  data template for managers  -->
                <DataTemplate>
                    <Border Width="90"
                            Height="40"
                            Background="#FFB4DEDB"
                            CornerRadius="0 20 0 0">
                        <StackPanel HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Orientation="Vertical">
                            <TextBlock FontSize="14"
                                       FontWeight="SemiLight"
                                       Foreground="Black"
                                       Text="{Binding Name}" />
                            <TextBlock HorizontalAlignment="Right"
                                       FontSize="9"
                                       FontWeight="Light"
                                       Foreground="Black"
                                       Text="{Binding Position}" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </local:PersonTemplateSelector.ManagerTemplate>
            <local:PersonTemplateSelector.DesignerTemplate>
                <!--  data template for designers  -->
                <DataTemplate>
                    <Border Width="90"
                            Height="40"
                            Background="#FFF57F25"
                            CornerRadius="14">
                        <StackPanel HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Orientation="Vertical">
                            <TextBlock FontSize="14"
                                       FontWeight="SemiLight"
                                       Foreground="White"
                                       Text="{Binding Name}" />
                            <TextBlock HorizontalAlignment="Right"
                                       FontSize="9"
                                       FontStyle="Italic"
                                       Foreground="White"
                                       Text="{Binding Position}" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </local:PersonTemplateSelector.DesignerTemplate>
            <local:PersonTemplateSelector.OtherTemplate>
                <!--  data template for everyone else  -->
                <DataTemplate>
                    <Border Width="90"
                            Height="60"
                            Background="#FF909090"
                            CornerRadius="90">
                        <StackPanel HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Orientation="Vertical">
                            <TextBlock FontFamily="Segoe WP"
                                       FontSize="14"
                                       FontWeight="SemiLight"
                                       Foreground="White"
                                       Text="{Binding Name}" />
                            <TextBlock HorizontalAlignment="Right"
                                       FontFamily="Segoe WP"
                                       FontSize="9"
                                       FontStyle="Italic"
                                       FontWeight="Light"
                                       Foreground="White"
                                       Text="{Binding Position}" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </local:PersonTemplateSelector.OtherTemplate>
        </local:PersonTemplateSelector>

    </UserControl.Resources>

    <Grid>

        <!--  org chart  -->
        <ScrollViewer HorizontalScrollBarVisibility="Auto"
                      Padding="0"
                      VerticalScrollBarVisibility="Auto">
            <orgchart:C1OrgChart x:Name="c1OrgChart1"
                                 HorizontalAlignment="Center"
                                 VerticalAlignment="Center"
                                 ChildSpacing="15, 15"
                                 ConnectorStroke="{ThemeResource ApplicationForegroundThemeBrush}"
                                 ConnectorThickness="2"
                                 ItemTemplateSelector="{StaticResource _personTplSelector}"
                                 Orientation="Horizontal" />
        </ScrollViewer>
    </Grid>
</UserControl>
