OrgChart for WPF/Silverlight
手順 1：アプリケーションの作成
クイックスタート > 手順 1：アプリケーションの作成

この手順では、OrgChart for WPF を使用して WPF/Silverlight アプリケーションを作成します。 C1OrgChart を使用すると、データの構造や関係を示す階層図を作成できます。プロジェクトをセットアップし、C1OrgChart コントロールをアプリケーションに追加するには、次の手順に従います。

  1. Visual Studio で新しい WPF/Silverlight プロジェクトを作成します。この例では、アプリケーションに「QuickStart」という名前を付けます。プロジェクトに別の名前を付けた場合は、後の手順で「QuickStart」を参照している箇所を実際のプロジェクトの名前に変更する必要があります。

  2. ソリューションエクスプローラで、プロジェクト名を右クリックし、［参照の追加］を選択します。［参照の追加］ダイアログボックスで、C1.WPF および C1.WPF.OrgChart または C1.Silverlight および C1.Silverlight.OrgChart アセンブリを見つけて選択し、［OK］をクリックしてプロジェクトに参照を追加します。

  3. MainWindow.xaml ファイルの XAML ビューを開きます。このクイックスタートでは、XAML マークアップを使用して、いくつかのテンプレートとコントロールを追加します。

  4. 次のマークアップを使用して、Window タグに XAML 名前空間を追加します。

    XAML
    コードのコピー 
    xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" 
xmlns:ext="clr-namespace:Util" 
xmlns:local="clr-namespace:QuickStart"

    プロジェクトに 「QuickStart」 以外の名前を指定した場合は、最後の参照をそのプロジェクト名に変更する必要があります。Window タグは次のように表示されます。

    XAML
    コードのコピー 
    <Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" 
    xmlns:ext="clr-namespace:QuickStart.Util" xmlns:local="clr-namespace:QuickStart"
    XAML
    コードのコピー 
    <UserControl x:Class="C1SilverlightCS111010.MainPage" 
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" 
xmlns:ext="clr-namespace:Util" xmlns:local="clr-namespace:QuickStart" 
mc:Ignorable="d" d:DesignHeight="262" d:DesignWidth="399">

    これは、複数の名前空間を追加しなくても、ほとんどの WPF/Silverlight コントロールを使用できるようにするための統合名前空間です。

  5. 次のリソースを UserControl タグの直後に追加します。 XAML は次のようになります。

    XAML
    コードのコピー 
    <UserControl。Resources>
        <!-- テンプレートセレクタ：_tplDirector または _tlpOther を選択します -->
        <local:PersonTemplateSelector x:Key="_personTplSelector" />
        <!-- 役員用のデータテンプレート -->
        <DataTemplate x:Key="_tplDirector" >
            <Border 
                Background="Gold" BorderBrush="Black" 
                BorderThickness="2 2 4 4" CornerRadius="6"
                Margin="20" MaxWidth="200" >
                <StackPanel Orientation="Vertical" >
                    <Border CornerRadius="6 6 0 0" Background="Black" >
                        <StackPanel Orientation="Horizontal">
                            <Ellipse Width="12" Height="12" Fill="Gold" Margin="4" />
                            <TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="16" 

                             Foreground="Gold" />
                        </StackPanel>
                    </Border>
                    <TextBlock Text="{Binding Position}" Padding="6 0" FontSize="14" FontStyle="Italic" 

                     HorizontalAlignment="Right" />
                </StackPanel>
            </Border>
        </DataTemplate>
        <!-- その他の従業員用のデータテンプレート -->
        <DataTemplate x:Key="_tplOther" >
            <Border 
                Background="WhiteSmoke" BorderBrush="Black" 
                BorderThickness="1 1 2 2" CornerRadius="6"
                MaxWidth="200" >
                <StackPanel Orientation="Vertical" >
                    <Border CornerRadius="6 6 0 0" Background="Black" >
                        <TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="14" 

                         Foreground="WhiteSmoke" Padding="4 0 0 0" />
                    </Border>
                    <TextBlock Text="{Binding Notes}" Padding="6 0" FontSize="9。5" 

                     TextWrapping="Wrap" />
                    <TextBlock Text="{Binding Position}" Padding="6 0" FontSize="12" 

                     FontStyle="Italic" HorizontalAlignment="Right" />
                </StackPanel>
            </Border>
        </DataTemplate>
</UserControl。Resources>

  6. Grid タグ内に次の行定義を追加します。

    XAML
    コードのコピー 
    <Grid。RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition />
</Grid.RowDefinitions>

  7. 行定義の直後に次のマークアップを追加して、C1OrgChart にタイトルを追加します。

    XAML
    コードのコピー 
    <!-- サンプルタイトル -->
        <StackPanel Orientation="Horizontal" >
            <TextBlock Text="C1OrgChart クイックスタート" FontSize="16" VerticalAlignment="Bottom" />
            <TextBlock Name="_tbTotal" VerticalAlignment="Bottom" />
        </StackPanel>
 <!-- コントロールパネル -->
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Grid。Row="1" >
    <Button Content="新しいデータ" Padding="8 0" Click="Button_Click" />
    <TextBlock Text=" ズーム:" VerticalAlignment="Center" />
    <Slider x:Name="_sliderZoom" VerticalAlignment="Center" Minimum="。01" Maximum="1" 

     Value="1" Width="200" />
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Grid。Row="2">
    <StackPanel Orientation="Horizontal" >
        <TextBlock Text="方向:" VerticalAlignment="Center" />
        <ComboBox Width="100" SelectedValue="{Binding ElementName=_orgChart, 

         Path=Orientation, Mode=TwoWay}" ItemsSource=

         "{Binding Source={ext:EnumerationExtension EnumType=Orientation}}" />
    </StackPanel>
    <StackPanel Orientation="Horizontal" >
        <TextBlock Text=" 内容の横位置: " VerticalAlignment="Center" />
    <ComboBox Width="80" SelectedValue="{Binding ElementName=_orgChart, 

     Path=HorizontalContentAlignment, Mode=TwoWay}" 

     ItemsSource="{Binding Source={ext:EnumerationExtension EnumType=HorizontalAlignment}}" />
    </StackPanel>
    <StackPanel Orientation="Horizontal" >
        <TextBlock Text=" 内容の縦位置: " VerticalAlignment="Center" />
        <ComboBox Width="80" SelectedValue="{Binding ElementName=_orgChart, 

         Path=VerticalContentAlignment, Mode=TwoWay}" 

         ItemsSource="{Binding Source={ext:EnumerationExtension EnumType=VerticalAlignment}}" />
    </StackPanel>
</StackPanel>

  8. 最後の StackPanel の直後に次の XAML マークアップを追加して、C1OrgChart コントロールを ScrollViewer に入れてアプリケーションに追加します。

    XAML
    コードのコピー 
    <!-- 組織図 -->
<ScrollViewer Grid。Row="3" HorizontalScrollBarVisibility="Auto" 

 VerticalScrollBarVisibility="Auto" Padding="0">
 <c1:C1OrgChart x:Name="_orgChart" Grid。Row="1" Orientation="Horizontal" 

  ItemTemplateSelector="{StaticResource _personTplSelector}" 

  ConnectorStroke="Black" ConnectorThickness="2" >
<!-- スケール変換をスライダに連結する -->
    <c1:C1OrgChart。RenderTransform>
        <ScaleTransform ScaleX="{Binding Value, ElementName=_sliderZoom}" 

         ScaleY="{Binding Value, ElementName=_sliderZoom}" />
    </c1:C1OrgChart。RenderTransform>
</c1:C1OrgChart>
</ScrollViewer>

    これで、「_orgChart」という名前の C1OrgChart コントロールがアプリケーションに追加されます。

これで、アプリケーションのユーザーインターフェイスのセットアップは終了しましたが、C1OrgChart コントロールにはまだコンテンツがありません。次の手順では、C1OrgChart コントロールにコンテンツを追加し、コントロールに対して実行可能ないくつかの操作を確認してみます。

 

 

Copyright © GrapeCity, Inc. All rights reserved.