<Page x:Class="OrgChartSamples.CollapseExpand"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:c1="using:C1.Xaml.OrgChart"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             >
    <Page.Resources>
        <Style x:Key="ToogleButtonStyle" TargetType="ToggleButton">
            <Setter Property="MinHeight" Value="20" />
            <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"
                                  Width="20"
                                  Height="20">
                                <Grid x:Name="LineExpandedIcon"
                                      Width="20"
                                      Height="20"
                                      Background="White">
                                    <Rectangle Opacity="0.4"
                                               Stroke="Black"
                                               StrokeThickness="2" />
                                    <Rectangle Width="10"
                                               Height="2"
                                               Fill="Black" />
                                </Grid>
                            </Grid>
                            <!--  Collapse visual  -->
                            <Grid x:Name="CollapsedGrid"
                                  Width="20"
                                  Height="20">
                                <Grid x:Name="LineCollapsedIcon"
                                      Width="20"
                                      Height="20"
                                      Background="White">
                                    <Rectangle Opacity="0.4"
                                               Stroke="Black"
                                               StrokeThickness="2" />
                                    <Path Width="10"
                                          Height="10"
                                          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"
                                          Fill="Black"
                                          Stretch="Fill" />
                                </Grid>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

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

        <!--  control panel  -->
        <Button HorizontalAlignment="Center"
                VerticalAlignment="Center"
                x:Uid="/OrgChartSamplesLib/Resources/CollapseToLevelOneBT"
                Click="Button_Collapse_Click"
                />

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

                <!--  template used to show tree nodes  -->
                <c1:C1OrgChart.ItemTemplate>
                    <DataTemplate>

                        <!--  outer border  -->
                        <Border Width="92"
                                Background="WhiteSmoke"
                                BorderBrush="#FF2C383D"
                                BorderThickness="2">
                            <StackPanel Orientation="Vertical">

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

                                <!--  body: person's details  -->
                                <TextBlock HorizontalAlignment="Right"
                                           FontSize="11"
                                           FontStyle="Italic"
                                           FontWeight="Light"
                                           Text="{Binding Position}" />
                            </StackPanel>
                        </Border>
                    </DataTemplate>
                </c1:C1OrgChart.ItemTemplate>
            </c1:C1OrgChart>
        </ScrollViewer>
    </Grid>

</Page>
