<Page
    x:Class="OrgChartSamples.TemplateSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:OrgChartSamples"
    xmlns:orgchart="using:C1.Xaml.OrgChart"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:basic="using:C1.Xaml"
    mc:Ignorable="d">
    <Page.Resources>
        <!-- TemplateSelector: picks _tplDirector or _tlpOther -->
        <local:PersonTemplateSelector x:Key="_personTplSelector">
            <local:PersonTemplateSelector.DirectorTemplate>
                <!-- data template for Directors -->
                <DataTemplate>
                    <Border Background="#bfa554" Padding="10" Width="180" Height="100" ToolTipService.ToolTip="{Binding Notes}" RenderTransformOrigin="0.5,0.5">
                        <Border.RenderTransform>
                            <CompositeTransform SkewX="-10"/>
                        </Border.RenderTransform>
                        <StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Left">
                            <StackPanel Orientation="Horizontal">
                                <Ellipse Width="12" Height="12" Fill="#88bde6" Margin="4" />
                                <TextBlock Text="{Binding Name}" FontWeight="SemiLight" FontSize="20" Foreground="Black" />
                            </StackPanel>
                            <TextBlock Text="{Binding Position}" FontWeight="Light" Foreground="Black" FontSize="12" HorizontalAlignment="Right" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </local:PersonTemplateSelector.DirectorTemplate>
            <local:PersonTemplateSelector.ManagerTemplate>
                <!-- data template for managers -->
                <DataTemplate>
                    <Border Background="#fbb258" Padding="10" Width="180" Height="100" CornerRadius="0 20 0 0" ToolTipService.ToolTip="{Binding Notes}">
                        <StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
                            <TextBlock Text="{Binding Name}" FontWeight="SemiLight" FontSize="20" Foreground="Black"/>
                            <TextBlock Text="{Binding Position}" FontWeight="Light" FontSize="12" HorizontalAlignment="Right" Foreground="Black" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </local:PersonTemplateSelector.ManagerTemplate>
            <local:PersonTemplateSelector.DesignerTemplate>
                <!-- data template for designers -->
                <DataTemplate>
                    <Border Background="#90cd97" Width="180" Height="100" CornerRadius="14" Padding="12" ToolTipService.ToolTip="{Binding Notes}">
                        <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <TextBlock Text="{Binding Name}" FontWeight="SemiLight" FontSize="18" Foreground="Black" />
                            <TextBlock Text="{Binding Position}" FontSize="12" FontStyle="Italic" HorizontalAlignment="Right" Foreground="Black" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </local:PersonTemplateSelector.DesignerTemplate>
            <local:PersonTemplateSelector.OtherTemplate>
                <!-- data template for everyone else -->
                <DataTemplate>
                    <Border Background="#f6aac9"  Width="180" Height="180" CornerRadius="90" Padding="5" ToolTipService.ToolTip="{Binding Notes}">
                        <StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
                            <TextBlock Text="{Binding Name}" FontWeight="SemiLight" FontFamily="Segoe WP" FontSize="18" Foreground="Black" />
                            <TextBlock Text="{Binding Position}" FontWeight="Light" FontFamily="Segoe WP" FontSize="12" FontStyle="Italic" HorizontalAlignment="Right" Foreground="Black" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </local:PersonTemplateSelector.OtherTemplate>
        </local:PersonTemplateSelector>
    </Page.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <!-- control panel -->
        <basic:C1WrapPanel Orientation="Horizontal">
            <Button Content="{Binding Source={StaticResource OrgChartSamplesLocalization}, Path=NewDataBT_Content}" VerticalAlignment="Center" Click="Button_Click" Margin="5" />
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Source={StaticResource OrgChartSamplesLocalization}, Path=OrientationTB_Text}" VerticalAlignment="Center" FontSize="16" Margin="5" />
                <ComboBox x:Name="comboOrientation" SelectedIndex="1" Width="120" VerticalAlignment="Center" FontSize="16" SelectionChanged="comboOrientation_SelectionChanged" Margin="5">
                    <ComboBoxItem Content="{Binding Source={StaticResource OrgChartSamplesLocalization}, Path=HorizontalComboBoxItem_Content}"/>
                    <ComboBoxItem Content="{Binding Source={StaticResource OrgChartSamplesLocalization}, Path=VerticalComboBoxItem_Content}"/>
                </ComboBox>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Source={StaticResource OrgChartSamplesLocalization}, Path=ZoomTB_Text}" VerticalAlignment="Center" FontSize="16" Margin="5" />
                <Slider x:Name="_sliderZoom" VerticalAlignment="Center" Minimum=".1" Maximum="1" Value="1" Width="150" StepFrequency="0.1" SmallChange="0.1" Foreground="#FF0AC2FF" Margin="5,5,5,-5" />
            </StackPanel>
        </basic:C1WrapPanel>
        
        
        <!-- org chart -->
        <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Padding="0">
            <orgchart:C1OrgChart x:Name="c1OrgChart1"  Grid.Row="1" 
                                 ConnectorThickness="2" ConnectorStroke="{ThemeResource ApplicationForegroundThemeBrush}" 
                                 ItemTemplateSelector="{StaticResource _personTplSelector}" 
                                 Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">

                <!-- scale transform bound to slider -->
                <orgchart:C1OrgChart.RenderTransform>
                    <ScaleTransform ScaleX="{Binding Value, ElementName=_sliderZoom}" ScaleY="{Binding Value, ElementName=_sliderZoom}" />
                </orgchart:C1OrgChart.RenderTransform>

                <!-- template used to show tree nodes -->
                <!-- not used in this sample since we are using a template selector -->
                <!--<c1:C1OrgChart.ItemTemplate />-->
            </orgchart:C1OrgChart>
        </ScrollViewer>
    </Grid>
</Page>