XAMLギャラリー: エクスプローラースタイル(ExplorerStyle)

コンピュータ

ソースコード

<Window x:Class="【プロジェクト名】.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Height="600" Width="800"
        WindowStartupLocation="CenterScreen"
        Title="XAMLギャラリー: エクスプローラースタイル(ExplorerStyle)">
    <Grid>
        <Grid.RowDefinitions>
            <!-- 一番上:高さ5のプログレスバー -->
            <RowDefinition Height="5"/>
            <!-- メニューバー -->
            <RowDefinition Height="Auto"/>
            <!-- アドレスバー -->
            <RowDefinition Height="Auto"/>
            <!-- メイン:2ペイン -->
            <RowDefinition Height="*"/>
            <!-- ステータスバー -->
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <!-- 上部プログレスバー(常時表示の細い帯) -->
        <ProgressBar Grid.Row="0"
                     Minimum="0" Maximum="100" Value="45"
                     Height="5"
                     IsIndeterminate="False"/>

        <!-- メニューバー -->
        <Menu Grid.Row="1">
            <Menu.FontSize>14</Menu.FontSize>
            <MenuItem Header="_ファイル">
                <MenuItem Header="新規" />
                <MenuItem Header="開く..." />
                <Separator/>
                <MenuItem Header="終了" />
            </MenuItem>
            <MenuItem Header="_編集">
                <MenuItem Header="コピー" />
                <MenuItem Header="貼り付け" />
            </MenuItem>
            <MenuItem Header="_表示">
                <MenuItem Header="更新" />
            </MenuItem>
            <MenuItem Header="_ヘルプ">
                <MenuItem Header="バージョン情報" />
            </MenuItem>
        </Menu>

        <!-- アドレスバー -->
        <Border Grid.Row="2" BorderBrush="#DDD" BorderThickness="0,1,0,1">
            <Grid Margin="8">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>  <!-- 上へ -->
                    <ColumnDefinition Width="8"/>
                    <ColumnDefinition Width="Auto"/>  <!-- 更新 -->
                    <ColumnDefinition Width="12"/>
                    <ColumnDefinition Width="*"/>     <!-- カレントディレクトリ -->
                    <ColumnDefinition Width="12"/>
                    <ColumnDefinition Width="260"/>   <!-- 検索 -->
                </Grid.ColumnDefinitions>

                <Button Grid.Column="0" Padding="10,4" Content="上へ" Background="Transparent" FontSize="16"/>
                <Button Grid.Column="2" Padding="10,4" Content="更新" Background="Transparent" FontSize="16"/>

                <!-- カレントディレクトリ -->
                <DockPanel Grid.Column="4" LastChildFill="True">
                    <TextBlock Text="アドレス:" VerticalAlignment="Center" Margin="0,0,8,0"/>
                    <TextBox Text="C:\Users\YourName\Documents"
                             VerticalContentAlignment="Center"
                             Padding="6,3"/>
                </DockPanel>

                <!-- 検索 -->
                <DockPanel Grid.Column="6" LastChildFill="True">
                    <TextBlock Text="検索:" VerticalAlignment="Center" Margin="0,0,8,0"/>
                    <TextBox Text="*.png"
                             VerticalContentAlignment="Center"
                             Padding="6,3"/>
                </DockPanel>
            </Grid>
        </Border>

        <!-- メイン:2ペイン -->
        <Grid Grid.Row="3">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="260"/>
                <ColumnDefinition Width="5"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <!-- 左:ディレクトリツリービュー(ダミー) -->
            <Border Grid.Column="0" BorderBrush="#DDD" BorderThickness="0,0,1,0">
                <DockPanel>
                    <TreeView Margin="8,0,8,8">
                        <TreeViewItem Header="PC">
                            <TreeViewItem Header="C:\">
                                <TreeViewItem Header="Users">
                                    <TreeViewItem Header="YourName" />
                                </TreeViewItem>
                                <TreeViewItem Header="Program Files" />
                            </TreeViewItem>
                            <TreeViewItem Header="D:\" />
                        </TreeViewItem>
                        <TreeViewItem Header="ネットワーク" />
                    </TreeView>
                </DockPanel>
            </Border>

            <!-- 仕切り(ドラッグで幅変更) -->
            <GridSplitter Grid.Column="1"
                          Width="5"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Stretch"
                          Background="#EEE"
                          ShowsPreview="True"/>

            <!-- 右:ファイルリストビュー(ダミー) -->
            <Border Grid.Column="2">
                <DockPanel>
                    <ListView Margin="8,0,8,8">
                        <ListView.View>
                            <GridView>
                                <GridViewColumn Header="名前" Width="320" DisplayMemberBinding="{Binding Name}" />
                                <GridViewColumn Header="種類" Width="120" DisplayMemberBinding="{Binding Type}" />
                                <GridViewColumn Header="サイズ" Width="120" DisplayMemberBinding="{Binding Size}" />
                                <GridViewColumn Header="更新日時" Width="180" DisplayMemberBinding="{Binding Modified}" />
                            </GridView>
                        </ListView.View>


                    </ListView>
                </DockPanel>
            </Border>
        </Grid>

        <!-- ステータスバー -->
        <StatusBar Grid.Row="4">
            <StatusBar.FontSize>12</StatusBar.FontSize>
            <StatusBarItem>
                <TextBlock Text="準備完了"/>
            </StatusBarItem>
            <Separator/>
            <StatusBarItem>
                <TextBlock Text="選択: 0件"/>
            </StatusBarItem>
            <Separator/>
            <StatusBarItem HorizontalAlignment="Right">
                <TextBlock Text="C:\Users\YourName\Documents"/>
            </StatusBarItem>
        </StatusBar>
    </Grid>
</Window>

実行例

コメント