TreeOptionDialog を作る(1)

はじめに

VisualStudio のオプション等に採用されている、ツリー形式のオプションダイアログを作成してみます。

簡単な仕様を考えてみます

大ざっぱですが、次のような感じで。

  • 当然、ツリーの項目を選択すると対応するページが表示される
  • DotNetMagic の WizardControl みたいに、Window に貼り付けて利用するコントロールにする
  • XAML でツリーの項目(カテゴリと呼ぶことにする)と対応するページを記述できる
  • 面倒なので今回はツリーにアイコンを表示しない
  • コントロール名は「TreeOptionControl」。

XAML を記述します

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TreeOptionControlSample">

    <Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="Width" Value="80"/>
        <Setter Property="Margin" Value="2,0,0,0"/>
    </Style>
                    
    <Style TargetType="{x:Type local:TreeOptionControl}">
        <Setter Property="Background" Value="{x:Static SystemColors.ControlBrush}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:TreeOptionControl}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <TreeView x:Name="TreeViewPart"
                                      Width="150"
                                      Margin="3"
                                      Grid.Column="0"
                                      Grid.Row="0">
                            </TreeView>
                            <Border Margin="3"
                                    BorderBrush="DarkGray"
                                    BorderThickness="0,0,0,1"
                                    Padding="2"
                                    Grid.Column="1"
                                    Grid.Row="0">
                                <ContentControl x:Name="ContentPart"/>
                            </Border>
                            <StackPanel Grid.Column="1"
                                        Grid.Row="1"
                                        Margin="3"
                                        Orientation="Horizontal"
                                        FlowDirection="RightToLeft">
                                <Button x:Name="CancelButtonPart"
                                        Content="キャンセル"
                                        Style="{StaticResource ButtonStyle}"
                                        Command="{x:Static local:TreeOptionControl.CancelCommand}" />
                                <Button x:Name="OKButtonPart"
                                        Content="OK"
                                        Style="{StaticResource ButtonStyle}"
                                        Command="{x:Static local:TreeOptionControl.OKCommand}"/>
                            </StackPanel>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Grid を使って TreeView や StackPanel や Button などを配置しているだけ。

次回に続く

実行画面は次回にお預け。今回は XAML で TreeOptionControl の外観を作成しました。次回はコントロールの中身の作成と、使用例を書きます。