<Page
    x:Class="OrgChartSamples.CollapseExpand"
    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"
    mc:Ignorable="d">
    <Page.Resources>
        <Style x:Key="OrgChartCollapsedIconStyle" TargetType="Path">
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <TransformGroup>
                        <RotateTransform Angle="-45" CenterX="3" CenterY="3"/>
                    </TransformGroup>
                </Setter.Value>
            </Setter>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
        <Style x:Key="ToogleButtonStyle" TargetType="ToggleButton">
            <Setter Property="Template">
                <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                        <Grid Background="Transparent">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates" >
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ExpandedGrid" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="CollapsedGrid" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Checked">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ExpandedGrid" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="CollapsedGrid" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                
                            </VisualStateManager.VisualStateGroups>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid x:Name="ExpandedGrid" Height="32" Width="32">
                                <Grid x:Name="LineExpandedIcon" Background="White" Width="22" Height="22">
                                    <Rectangle StrokeThickness="2" Stroke="Black" Opacity="0.4"/>
                                    <Rectangle Fill="Black" Width="10" Height="2"/>
                                </Grid>
                            </Grid>
                            <!-- Collapse visual -->
                            <Grid x:Name="CollapsedGrid" Height="32" Width="32">
                                <Grid x:Name="LineCollapsedIcon" Background="White" Width="22" Height="22">
                                    <Rectangle StrokeThickness="2" Stroke="Black" Opacity="0.4"/>
                                    <Path Data="M4,0 L6,0 L6,4 L10,4 L10,6 L6,6 L6,10 L4,10 L4,6 L0,6 L0,4 L4,4 z" Width="10" Height="10" Fill="Black" Stretch="Fill" />
                                </Grid>
                            </Grid>                           
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

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

        <!-- sample title -->
        <StackPanel Orientation="Horizontal" >
            <TextBlock Visibility="Collapsed" Text="{Binding Source={StaticResource OrgChartSamplesLocalization}, Path=CollapseOrExpand_Text}" FontSize="16" VerticalAlignment="Bottom" />
            <TextBlock Name="_tbTotal" VerticalAlignment="Bottom" />
        </StackPanel>

        <!-- control panel -->
        <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Grid.Row="1">
            <Button Content="{Binding Source={StaticResource OrgChartSamplesLocalization}, Path=RefreshDataBT_Content}" Click="Button_Refresh_Click" />
            <TextBlock Text="{Binding Source={StaticResource OrgChartSamplesLocalization}, Path=ZoomTB_Text}" VerticalAlignment="Center"  FontSize="16" Margin="2 0 10 0"/>
            <Slider x:Name="_sliderZoom" Minimum=".01" Maximum="1" Value="1" Width="100" SmallChange="0.01" StepFrequency="0.01" Height="44" HorizontalAlignment="Left" Foreground="#FF0AC2FF" Background="#29C91515" VerticalAlignment="Center" Margin="0 0 10 0"/>
            <CheckBox Content="{Binding Source={StaticResource OrgChartSamplesLocalization}, Path=HorizontalCB_Content}" Margin="0 0 10 0"  Click="CheckBox_Click"/>
            <Button Content="{Binding Source={StaticResource OrgChartSamplesLocalization}, Path=CollapseToLevelTwoBT_Content}" Margin="0 0 10 0" Click="Button_Collapse_Click" />
        </StackPanel>

        <!-- org chart -->
        <ScrollViewer Grid.Row="2" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
            <orgchart:C1OrgChart
                x:Name="_orgChart"
                Grid.Row="1" 
                Orientation="Vertical" Padding="30"
                HorizontalAlignment="Center" VerticalAlignment="Center"
                ConnectorStroke="#FFF57F25" ConnectorThickness="2" ConnectorDashArray="1 2" Foreground="#FF333333" >

                <!-- 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 -->
                    <orgchart:C1OrgChart.ItemTemplate>
                    <DataTemplate>

                        <!-- outer border -->
                        <Border Margin="20"
                            Background="WhiteSmoke" BorderBrush="#FF2C383D" 
                            BorderThickness="2" 
                            MaxWidth="200" >
                            <StackPanel Orientation="Vertical">

                                <!-- item header -->
                                <Border Background="#FF2C383D" >
                                    <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
                                        <!-- bind CheckBox to containing C1OrgChart's IsCollapsed property -->
                                        <ToggleButton Style="{StaticResource ToogleButtonStyle}" Click="ToggleButton_Click" IsChecked="{Binding IsCollapsed, Mode=TwoWay, ElementName=_orgChart}" x:Name="toggleButton"></ToggleButton>
                                        <!-- item header: person's Name -->
                                        <TextBlock Text="{Binding Name}" FontWeight="Light" FontSize="22" Foreground="WhiteSmoke" Padding="5" />
                                    </StackPanel>
                                </Border>

                                <!-- body: person's details -->
                                <TextBlock Text="{Binding Notes}" FontWeight="Light" Padding="10" FontSize="11" TextWrapping="Wrap" />
                                <TextBlock Text="{Binding Position}" FontWeight="Light" Padding="10 0 10 5" FontSize="12" FontStyle="Italic" HorizontalAlignment="Right" />
                            </StackPanel>
                        </Border>
                    </DataTemplate>
                </orgchart:C1OrgChart.ItemTemplate>
            </orgchart:C1OrgChart>
        </ScrollViewer>
    </Grid>
</Page>