| ページ一覧 | ブログ | twitter |  書式 | 書式(表) |

MyMemoWiki

差分

ナビゲーションに移動 検索に移動
編集の要約なし
==WPF レイアウト サンプル==
[[WPF][WPF レイアウト]]
===Explorer風===
*GridSplitterでサイズ変更可(行、列)
*ShowGridLines="True" でグリッドレイアウトの分割を可視化
<&lt;DockPanel>&gt; <&lt;Button Content="Menu" DockPanel.Dock="Top"/>&gt; <&lt;Button Content="Status" DockPanel.Dock="Bottom"/>&gt; <&lt;Grid ShowGridLines="True">&gt; <&lt;Grid.ColumnDefinitions>&gt; <&lt;ColumnDefinition MinWidth="100" Width="1*"/>&gt; <&lt;ColumnDefinition Width="Auto"/>&gt; <&lt;ColumnDefinition MinWidth="100" Width="2*"/>&gt; <&lt;/Grid.ColumnDefinitions>&gt; <&lt;Grid.RowDefinitions>&gt; <&lt;RowDefinition MinHeight="100" Height="1*"/>&gt; <&lt;RowDefinition Height="Auto"/>&gt; <&lt;RowDefinition MinHeight="100" Height="1*"/>&gt; <&lt;/Grid.RowDefinitions>&gt; <&lt;Button Grid.Column="0" Grid.Row="0" Content="Left Top"/>&gt; <&lt;GridSplitter Grid.Column="0" Grid.Row="1" Height="5" VerticalAlignment="Center" HorizontalAlignment="Stretch" />&gt; <&lt;Button Grid.Column="0" Grid.Row="2" Content="Left Bottom"/>&gt; <&lt;GridSplitter Grid.Column="1" Width="5" Grid.RowSpan="3" VerticalAlignment="Stretch" HorizontalAlignment="Center"/>&gt; <&lt;Button Grid.Column="2" Grid.Row="0" Grid.RowSpan="3" Content="Content"/>&gt; <&lt;/Grid>&gt; <&lt;/DockPanel>&gt;
===ツリービューを配置===
[[File:1453_wpf_layout02.jpg]]
*TreeView を配置し、スプリットバー移動や、ツリーの展開で動的にスクロールバーが表示されるようにする
<&lt;DockPanel>&gt; <&lt;Button Content="Menu" DockPanel.Dock="Top"/>&gt; <&lt;Button Content="Status" DockPanel.Dock="Bottom"/>&gt; <&lt;Grid ShowGridLines="True">&gt; <&lt;Grid.ColumnDefinitions>&gt; <&lt;ColumnDefinition MinWidth="100" Width="1*"/>&gt; <&lt;ColumnDefinition Width="Auto"/>&gt; <&lt;ColumnDefinition MinWidth="100" Width="2*"/>&gt; <&lt;/Grid.ColumnDefinitions>&gt; <&lt;Grid.RowDefinitions>&gt; <&lt;RowDefinition MinHeight="100" Height="1*"/>&gt; <&lt;RowDefinition Height="Auto"/>&gt; <&lt;RowDefinition MinHeight="100" Height="1*"/>&gt; <&lt;/Grid.RowDefinitions>&gt; <&lt;TreeView Grid.Column="0" ItemsSource="{Binding TreeItems}">&gt; <&lt;TreeView.ItemTemplate>&gt; <&lt;HierarchicalDataTemplate DataType="{x:Type local:TreeEntity}" ItemsSource="{Binding Children}">&gt; <&lt;TextBlock Text="{Binding Name}" />&gt; <&lt;/HierarchicalDataTemplate>&gt; <&lt;/TreeView.ItemTemplate>&gt; <&lt;/TreeView>&gt; <&lt;GridSplitter Grid.Column="0" Grid.Row="1" Height="5" VerticalAlignment="Center" HorizontalAlignment="Stretch" />&gt; <&lt;Button Grid.Column="0" Grid.Row="2" Content="Left Bottom"/>&gt; <&lt;GridSplitter Grid.Column="1" Width="5" Grid.RowSpan="3" VerticalAlignment="Stretch" HorizontalAlignment="Center"/>&gt; <&lt;Button Grid.Column="2" Grid.Row="0" Grid.RowSpan="3" Content="{Binding Name}"/>&gt; <&lt;/Grid>&gt; <&lt;/DockPanel>&gt;
==ツリービューに対するコントロールボックスを追加==
*DocPanel により、ラベルとボタンをそれぞれ、左、右寄せ
*コンテンツとしてテキストを可変サイズにする
<&lt;DockPanel>&gt; <&lt;Button Content="Menu" DockPanel.Dock="Top"/>&gt; <&lt;Button Content="Status" DockPanel.Dock="Bottom"/>&gt; <&lt;Grid ShowGridLines="False">&gt; <&lt;Grid.ColumnDefinitions>&gt; <&lt;ColumnDefinition MinWidth="100" Width="1*"/>&gt; <&lt;ColumnDefinition Width="Auto"/>&gt; <&lt;ColumnDefinition MinWidth="100" Width="2*"/>&gt; <&lt;/Grid.ColumnDefinitions>&gt; <&lt;Grid.RowDefinitions>&gt; <&lt;RowDefinition MinHeight="100" Height="1*"/>&gt; <&lt;RowDefinition Height="Auto"/>&gt; <&lt;RowDefinition MinHeight="100" Height="1*"/>&gt; <&lt;/Grid.RowDefinitions>&gt; <&lt;Grid Grid.Column="0" Grid.Row="0" ShowGridLines="False">&gt; <&lt;Grid.RowDefinitions>&gt; <&lt;RowDefinition Height="Auto"/>&gt; <&lt;RowDefinition Height="*"/>&gt; <&lt;/Grid.RowDefinitions>&gt; <&lt;DockPanel Grid.Row="0">&gt; <&lt;TextBlock Text="Search" Width="Auto" DockPanel.Dock="Left"/>&gt; <&lt;Button Content="Control" Width="Auto" DockPanel.Dock="Right"/>&gt; <&lt;TextBox />&gt; <&lt;/DockPanel>&gt; <&lt;TreeView Grid.Row="1" ItemsSource="{Binding TreeItems}">&gt; <&lt;TreeView.ItemTemplate>&gt; <&lt;HierarchicalDataTemplate DataType="{x:Type local:TreeEntity}" ItemsSource="{Binding Children}">&gt; <&lt;TextBlock Text="{Binding Name}" />&gt; <&lt;/HierarchicalDataTemplate>&gt; <&lt;/TreeView.ItemTemplate>&gt; <&lt;/TreeView>&gt; <&lt;/Grid>&gt; <&lt;GridSplitter Grid.Column="0" Grid.Row="1" Height="5" VerticalAlignment="Center" HorizontalAlignment="Stretch" />&gt; <&lt;Grid Grid.Column="0" Grid.Row="2" ShowGridLines="False">&gt; <&lt;Grid.RowDefinitions>&gt; <&lt;RowDefinition Height="Auto"/>&gt; <&lt;RowDefinition Height="*"/>&gt; <&lt;/Grid.RowDefinitions>&gt; <&lt;DockPanel Grid.Row="0">&gt; <&lt;TextBlock Text="Search" Width="Auto" DockPanel.Dock="Left"/>&gt; <&lt;Button Content="Control" Width="Auto" DockPanel.Dock="Right"/>&gt; <&lt;TextBox />&gt; <&lt;/DockPanel>&gt; <&lt;TreeView Grid.Row="1" ItemsSource="{Binding TreeItems}">&gt; <&lt;TreeView.ItemTemplate>&gt; <&lt;HierarchicalDataTemplate DataType="{x:Type local:TreeEntity}" ItemsSource="{Binding Children}">&gt; <&lt;TextBlock Text="{Binding Name}" />&gt; <&lt;/HierarchicalDataTemplate>&gt; <&lt;/TreeView.ItemTemplate>&gt; <&lt;/TreeView>&gt; <&lt;/Grid>&gt; <&lt;GridSplitter Grid.Column="1" Width="5" Grid.RowSpan="3" VerticalAlignment="Stretch" HorizontalAlignment="Center"/>&gt; <&lt;Button Grid.Column="2" Grid.Row="0" Grid.RowSpan="3" Content="{Binding Name}"/>&gt; <&lt;/Grid>&gt; <&lt;/DockPanel>&gt;
===メニューとステータスバー追加===
[[File:1455_wpf_layout04.jpg]]
<&lt;DockPanel>&gt; <&lt;Menu DockPanel.Dock="Top" Height="Auto">&gt; <&lt;MenuItem Header="ファイル(_F)" />&gt; <&lt;MenuItem Header="編集(_E)" />&gt; <&lt;MenuItem Header="オプション(_O)">&gt; <&lt;MenuItem IsCheckable="True" Header="オプション1" />&gt; <&lt;MenuItem IsCheckable="True" Header="オプション2" />&gt; <&lt;MenuItem IsCheckable="True" Header="オプション3" />&gt; <&lt;/MenuItem>&gt; <&lt;/Menu>&gt; <&lt;StatusBar DockPanel.Dock="Bottom">&gt; <&lt;StatusBarItem Width="60" DockPanel.Dock="Right">&gt;Panel2<&lt;/StatusBarItem>&gt; <&lt;Separator DockPanel.Dock="Right" />&gt; <&lt;StatusBarItem Width="60" DockPanel.Dock="Right">&gt;Panel3<&lt;/StatusBarItem>&gt; <&lt;Separator DockPanel.Dock="Right" />&gt; <&lt;StatusBarItem>&gt;Panel1<&lt;/StatusBarItem>&gt; <&lt;/StatusBar>&gt; <&lt;Grid ShowGridLines="False">&gt; <&lt;Grid.ColumnDefinitions>&gt; <&lt;ColumnDefinition MinWidth="100" Width="1*"/>&gt; <&lt;ColumnDefinition Width="Auto"/>&gt; <&lt;ColumnDefinition MinWidth="100" Width="2*"/>&gt; <&lt;/Grid.ColumnDefinitions>&gt; <&lt;Grid.RowDefinitions>&gt; <&lt;RowDefinition MinHeight="100" Height="1*"/>&gt; <&lt;RowDefinition Height="Auto"/>&gt; <&lt;RowDefinition MinHeight="100" Height="1*"/>&gt; <&lt;/Grid.RowDefinitions>&gt; <&lt;Grid Grid.Column="0" Grid.Row="0" ShowGridLines="False">&gt; <&lt;Grid.RowDefinitions>&gt; <&lt;RowDefinition Height="Auto"/>&gt; <&lt;RowDefinition Height="*"/>&gt; <&lt;/Grid.RowDefinitions>&gt; <&lt;DockPanel Grid.Row="0">&gt; <&lt;TextBlock Text="Search" Width="Auto" DockPanel.Dock="Left"/>&gt; <&lt;Button Content="Control" Width="Auto" DockPanel.Dock="Right"/>&gt; <&lt;TextBox />&gt; <&lt;/DockPanel>&gt; <&lt;TreeView Grid.Row="1" ItemsSource="{Binding TreeItems}">&gt; <&lt;TreeView.ItemTemplate>&gt; <&lt;HierarchicalDataTemplate DataType="{x:Type local:TreeEntity}" ItemsSource="{Binding Children}">&gt; <&lt;TextBlock Text="{Binding Name}" />&gt; <&lt;/HierarchicalDataTemplate>&gt; <&lt;/TreeView.ItemTemplate>&gt; <&lt;/TreeView>&gt; <&lt;/Grid>&gt; <&lt;GridSplitter Grid.Column="0" Grid.Row="1" Height="5" VerticalAlignment="Center" HorizontalAlignment="Stretch" />&gt; <&lt;Grid Grid.Column="0" Grid.Row="2" ShowGridLines="False">&gt; <&lt;Grid.RowDefinitions>&gt; <&lt;RowDefinition Height="Auto"/>&gt; <&lt;RowDefinition Height="*"/>&gt; <&lt;/Grid.RowDefinitions>&gt; <&lt;DockPanel Grid.Row="0">&gt; <&lt;TextBlock Text="Search" Width="Auto" DockPanel.Dock="Left"/>&gt; <&lt;Button Content="Control" Width="Auto" DockPanel.Dock="Right"/>&gt; <&lt;TextBox />&gt; <&lt;/DockPanel>&gt; <&lt;TreeView Grid.Row="1" ItemsSource="{Binding TreeItems}">&gt; <&lt;TreeView.ItemTemplate>&gt; <&lt;HierarchicalDataTemplate DataType="{x:Type local:TreeEntity}" ItemsSource="{Binding Children}">&gt; <&lt;TextBlock Text="{Binding Name}" />&gt; <&lt;/HierarchicalDataTemplate>&gt; <&lt;/TreeView.ItemTemplate>&gt; <&lt;/TreeView>&gt; <&lt;/Grid>&gt; <&lt;GridSplitter Grid.Column="1" Width="5" Grid.RowSpan="3" VerticalAlignment="Stretch" HorizontalAlignment="Center"/>&gt; <&lt;Button Grid.Column="2" Grid.Row="0" Grid.RowSpan="3" Content="{Binding Name}"/>&gt; <&lt;/Grid>&gt; <&lt;/DockPanel>&gt;

案内メニュー