|
<!--
// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Public License (Ms-PL).
// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
// All other rights reserved.
-->
<UserControl x:Class="Microsoft.Windows.Controls.Samples.OrganizationalChartSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"
xmlns:common="clr-namespace:Microsoft.Windows.Controls.Samples;assembly=Microsoft.Windows.Controls.Samples.Common">
<StackPanel>
<StackPanel.Resources>
<!-- Put all the items inside a horizontally stacked panel -->
<ItemsPanelTemplate x:Key="ItemsPanel">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Stretch" />
</ItemsPanelTemplate>
<!-- TreeViewItem style to stack a header on top of children -->
<Style x:Key="ContainerStyle" TargetType="controls:TreeViewItem">
<Setter Property="ItemsPanel" Value="{StaticResource ItemsPanel}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:TreeViewItem">
<StackPanel x:Name="Root" VerticalAlignment="Top" HorizontalAlignment="Stretch">
<ContentControl
x:Name="HeaderContent"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalAlignment="Center"/>
<ItemsPresenter
x:Name="Items"
VerticalAlignment="Top"
HorizontalAlignment="Center" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- HeaderContent -->
<controls:HierarchicalDataTemplate x:Key="DepartmentTemplate" ItemsSource="{Binding Divisions}" ItemContainerStyle="{StaticResource ContainerStyle}">
<Border Background="AliceBlue" Margin="4 8" Padding="2" BorderBrush="Blue" BorderThickness="1" CornerRadius="6">
<StackPanel HorizontalAlignment="Stretch" >
<TextBlock Text="{Binding Title}" Margin="6 4" HorizontalAlignment="Center" FontSize="12" FontWeight="Bold" />
<ListBox ItemsSource="{Binding Employees}" BorderThickness="0" />
</StackPanel>
</Border>
</controls:HierarchicalDataTemplate>
</StackPanel.Resources>
<!-- Basic information about this scenario -->
<ContentControl Content="Organizational Chart Sample" Style="{StaticResource Header}" />
<TextBlock Style="{StaticResource Information}">
Demonstrates how to style a TreeView into an organizationl chart.
<LineBreak/>
<LineBreak/>
There are many ways to view hierarchical data, a tree is just
one of them. In this sample we explore how to drastically
change the look of the TreeView with just a few style changes.
</TextBlock>
<!-- TreeView control styled to look like an organizational chart -->
<controls:TreeView
x:Name="DepartmentTree"
HorizontalAlignment="Center"
ItemsPanel="{StaticResource ItemsPanel}"
ItemTemplate="{StaticResource DepartmentTemplate}"
ItemContainerStyle="{StaticResource ContainerStyle}" />
<!-- Enables viewing of source from sample page -->
<src:SourceViewer xmlns:src="clr-namespace:Microsoft.Windows.Controls.Samples;assembly=Microsoft.Windows.Controls.Samples.Common" xmlns:sys="clr-namespace:System;assembly=mscorlib">
<src:SourceFile Path="OrganizationalChartSample.xaml">
<src:SourceFile.Source>
<sys:String><!--
// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Public License (Ms-PL).
// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
// All other rights reserved.
-->
<UserControl x:Class="Microsoft.Windows.Controls.Samples.OrganizationalChartSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"
xmlns:common="clr-namespace:Microsoft.Windows.Controls.Samples;assembly=Microsoft.Windows.Controls.Samples.Common">
<StackPanel>
<StackPanel.Resources>
<!-- Put all the items inside a horizontally stacked panel -->
<ItemsPanelTemplate x:Key="ItemsPanel">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Stretch" />
</ItemsPanelTemplate>
<!-- TreeViewItem style to stack a header on top of children -->
<Style x:Key="ContainerStyle" TargetType="controls:TreeViewItem">
<Setter Property="ItemsPanel" Value="{StaticResource ItemsPanel}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:TreeViewItem">
<StackPanel x:Name="Root" VerticalAlignment="Top" HorizontalAlignment="Stretch">
<ContentControl
x:Name="HeaderContent"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalAlignment="Center"/>
<ItemsPresenter
x:Name="Items"
VerticalAlignment="Top"
HorizontalAlignment="Center" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- HeaderContent -->
<controls:HierarchicalDataTemplate x:Key="DepartmentTemplate" ItemsSource="{Binding Divisions}" ItemContainerStyle="{StaticResource ContainerStyle}">
<Border Background="AliceBlue" Margin="4 8" Padding="2" BorderBrush="Blue" BorderThickness="1" CornerRadius="6">
<StackPanel HorizontalAlignment="Stretch" >
<TextBlock Text="{Binding Title}" Margin="6 4" HorizontalAlignment="Center" FontSize="12" FontWeight="Bold" />
<ListBox ItemsSource="{Binding Employees}" BorderThickness="0" />
</StackPanel>
</Border>
</controls:HierarchicalDataTemplate>
</StackPanel.Resources>
<!-- Basic information about this scenario -->
<ContentControl Content="Organizational Chart Sample" Style="{StaticResource Header}" />
<TextBlock Style="{StaticResource Information}">
Demonstrates how to style a TreeView into an organizationl chart.
<LineBreak/>
<LineBreak/>
There are many ways to view hierarchical data, a tree is just
one of them. In this sample we explore how to drastically
change the look of the TreeView with just a few style changes.
</TextBlock>
<!-- TreeView control styled to look like an organizational chart -->
<controls:TreeView
x:Name="DepartmentTree"
HorizontalAlignment="Center"
ItemsPanel="{StaticResource ItemsPanel}"
ItemTemplate="{StaticResource DepartmentTemplate}"
ItemContainerStyle="{StaticResource ContainerStyle}" />
<!-- Enables viewing of source from sample page -->
</StackPanel>
</UserControl></sys:String>
</src:SourceFile.Source>
</src:SourceFile>
<src:SourceFile Path="OrganizationalChartSample.xaml.cs">
<src:SourceFile.Source>
<sys:String>// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Public License (Ms-PL).
// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
// All other rights reserved.
using System.Windows.Controls;
using System.ComponentModel;
namespace Microsoft.Windows.Controls.Samples
{
/// <summary>
/// Sample demonstrating the TreeView restyled as an organizational chart.
/// </summary>
[Sample("Organizational Chart", DifficultyLevel.Scenario)]
[Category("TreeView")]
public partial class OrganizationalChartSample : UserControl
{
/// <summary>
/// Initializes a new instance of the OrganizationalChartSample class.
/// </summary>
public OrganizationalChartSample()
{
InitializeComponent();
DepartmentTree.ItemsSource = Department.AllDepartments;
}
}
}</sys:String>
</src:SourceFile.Source>
</src:SourceFile>
</src:SourceViewer>
</StackPanel>
</UserControl>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.