はじめに
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 の外観を作成しました。次回はコントロールの中身の作成と、使用例を書きます。