実践！Windowsアプリを作る
第3章 機能更新

後に"PackageList"で選択したパッケージに関するライセンス情報をブラウザで表示するようにします。
なので、選択できるパッケージを1つに限定したいと思います。

そのため、<ListView...>タグの属性"SelectionMode"を"Single"に設定しています。

また、選択時に小細工をしたいので、"SelectionChanged"イベントに対するハンドラ"PackageList_SelectionChanged"メソッドを登録しておきます。

<ListView x:Name="PackageList" Grid.Row="5" Grid.ColumnSpan="2" SelectionMode="Single" ScrollViewer.HorizontalScrollBarVisibility="Hidden" SelectionChanged="PackageList_SelectionChanged">
    <ListView.View>
        <GridView>
            <GridViewColumn x:Name="PackageColumn" Header="パッケージ" DisplayMemberBinding="{Binding Name}"/>
            <GridViewColumn x:Name="LicenseColumn" Header="ライセンス" DisplayMemberBinding="{Binding License}"/>
        </GridView>
    </ListView.View>
</ListView>

なお"PackageList_SelectionChanged"メソッドについては後で実装します。

“PackageList"の各列に表示するデータは、<GridViewColumn.../>タグで指定します。

<GridViewColumn.../>要素は<ListView>の子要素である<ListView.View>の更に子要素である<GridView>以下に配置します。

<GridViewColumn.../>タグでは、"Header"属性にヘッダーの名前を設定します。

また、"DisplayMemberBinding"属性に表示するデータを指定します。
今回の場合には、ListViewにセットしたReadOnlyObservableCollection<T>の型パラメーター"T"として以下のクラスを割り当てています。

protected class Package
{
    public string Name { get; set; }
    public string License { get; set; }
    public string Url { get; set; }
}

• Name: パッケージ名
• License: ライセンス [Custom, MIT…]
• Url: ライセンス情報が記載されたURL

従って、<GridViewColumn.../>タグの"DisplayMemberBinding"属性にはPackageクラスのプロパティ"Name"と"License"をバインディングしています。

因みに"PackageList"の"ItemsSource"プロパティに割り当てるReadOnlyObservableCollection<Package>クラスのインスタンスは、"AboutBox.xaml.cs"中、AboutBoxクラスの定数として以下のように指定します。

private static readonly ReadOnlyObservableCollection<Package> Packages = new ReadOnlyObservableCollection<Package>(
    new ObservableCollection<Package>() {
    new Package {Name = "WindowsAPICodePack-Core", License = "Custom", Url = "https://github.com/aybe/Windows-API-Code-Pack-1.1/blob/master/LICENCE"},
    new Package {Name = "WindowsAPICodePack-Shell", License = "Custom", Url = "https://github.com/aybe/Windows-API-Code-Pack-1.1/blob/master/LICENCE"},
    new Package {Name = "MahApps.Metro", License = "MIT", Url = "https://github.com/MahApps/MahApps.Metro/blob/develop/LICENSE"},
    new Package {Name = "MahApps.Metro.IconPacks", License = "MIT", Url = "https://github.com/MahApps/MahApps.Metro.IconPacks/blob/develop/LICENSE"},
    new Package {Name = "ControlzEx", License = "MIT", Url = "https://github.com/ControlzEx/ControlzEx/blob/develop/LICENSE"},
    new Package {Name = "Microsoft.Xaml.Behaviors.Wpf", License = "MIT", Url = "https://github.com/microsoft/XamlBehaviorsWpf/blob/master/LICENSE"},
    new Package {Name = "System.Text.Json", License = "MIT", Url = "https://www.nuget.org/packages/System.Text.Json/4.7.2/license"},
    new Package {Name = "MaterialDesignThemes", License = "MIT", Url = "https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/blob/master/LICENSE"},
    new Package {Name = "MaterialDesignColors", License = "MIT", Url = "https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/blob/master/LICENSE"},
    new Package {Name = "MaterialDesignThemes.MahApps", License = "MIT", Url = "https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/blob/master/LICENSE"},
});

使用するパッケージは固定ですので"static readonly"とし各要素は初期化時に登録しておきます。

<ListView>のヘッダーのデザインは子要素である<ListView.View>の更に子要素である<GridView>以下に配置した<GridView.ColumnHeaderContainerStyle>内で行います。

<ListView x:Name="PackageList" Grid.Row="5" Grid.ColumnSpan="2" SelectionMode="Single" ScrollViewer.HorizontalScrollBarVisibility="Hidden" SelectionChanged="PackageList_SelectionChanged">
    <ListView.View>
        <GridView>
            <GridView.ColumnHeaderContainerStyle>
                <Style TargetType="{x:Type GridViewColumnHeader}">
                    <Setter Property="Background" Value="LightBlue"/>
                </Style>
            </GridView.ColumnHeaderContainerStyle>
            <GridViewColumn x:Name="PackageColumn" Header="パッケージ" DisplayMemberBinding="{Binding Name}"/>
            <GridViewColumn x:Name="LicenseColumn" Header="ライセンス" DisplayMemberBinding="{Binding License}" Width="100"/>
        </GridView>
    </ListView.View>
</ListView>

なお<Style>タグの属性"TargetType"には"GridViewColumnHeader"を指定します。

因みに<GridView.ColumnHeaderContainerStyle>タグが省かれた場合には、何故かヘッダーの高さが異様に大きく取られてしまいます。
それを避けるためには、ヘッダーのデザインを指定しない場合でも以下のように<GridView.ColumnHeaderContainerStyle>タグを追加しておきます。

<GridView.ColumnHeaderContainerStyle>
    <Style/>
</GridView.ColumnHeaderContainerStyle>

また、デフォルトではリストの列幅はリスト全体をカバーするようには広がってくれません。
リスト全体ひ広がって表示させるには、今回に限っては列幅を指定するのが手っ取り早いかと思います。

とりあえずライセンス表示をする列の幅を"100″に固定し、パッケージ名を表示する列を広げる事で対応します。

パッケージ名を表示する列の幅の指定は"AboutBox"が描画される前に指定したいので、"Window_Loaded"イベントハンドラ内で行います。

<Window x:Class="CopyFilesWithSpecifiedName.AboutBox"
            :
            :
         MouseLeftButtonDown="Window_MouseLeftButtonDown" Loaded="Window_Loaded"
        Title="AboutBox" Height="480" Width="640">
    <Border BorderBrush="Black" BorderThickness="1" CornerRadius="10,10,10,10" Background="White">
        <Grid>
            :
            :
        </Grid>
    </Border>
</Window>

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    PackageColumn.Width = PackageList.ActualWidth - LicenseColumn.ActualWidth - SystemParameters.VerticalScrollBarWidth;
}

“PackageList"中、選択されたパッケージに対応したライセンスの情報をブラウザで表示するようにします。

そのためにライセンス表示用のボタンを設置します。

<Button x:Name="LicenseButton" Content="ライセンス表示" Grid.Row="4"  Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="10,0,10,5"
                    Style="{StaticResource MaterialDesignRaisedLightButton}" FontSize="9" Click="LicenseButton_Click"/>

なお"Click"イベントに対するハンドラ"LicenseButton_Click"は以下の通りです。

private void LicenseButton_Click(object sender, RoutedEventArgs e)
{
    try
    {
        var startInfo = new System.Diagnostics.ProcessStartInfo(Packages[PackageList.SelectedIndex].Url);
        startInfo.UseShellExecute = true;
        System.Diagnostics.Process.Start(startInfo);
        AlartTextBox.Text = "";
    }
    catch (System.ComponentModel.Win32Exception noBrowser)
    {
        if (noBrowser.ErrorCode == -2147467259)
        {
            AlartTextBox.Text = noBrowser.Message;
        }
    }
    catch (System.Exception other)
    {
        AlartTextBox.Text = other.Message;
    }
}

基本的にはブラウザでオープンするURIを指定して"System.Diagnostics.Process.Start"メソッドをコールすれば良かったはずなのですが、いつの間にか仕様が変わり、そのままでは例外が発生するようになりました。

新しい方法では以下のようにします。

1. ブラウザでオープンするURIを指定してSystem.Diagnostics.ProcessStartInfoクラスのインスタンスを作成
2. 作成したインスタンスの"UseShellExecute"プロパティを"true"に設定
3. 作成したインスタンスを指定して"System.Diagnostics.Process.Start"メソッドをコール

なお"System.Diagnostics.Process.Start"メソッドは例外が発生するため例外処理を行います。

今回は"PackageList"の下に配置した<TextBlock>の"AlartTextBox"にエラーメッセージを表示させています。

<TextBlock x:Name="AlartTextBox" Grid.Row="6" Grid.ColumnSpan="2" Foreground="Red"/>

なお、"AlartTextBox"のエラーメッセージは、"PackageList"の選択を変更した際にコールされるイベントハンドラ、"PackageList_SelectionChanged"メソッドでクリアするようにしています。

private void PackageList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    AlartTextBox.Text = "";
}

<ListView>も<ListBox>同様、デフォルトでは枠線が表示されません。

今回はコーナーと影をつけた枠線を表示したいのでMaterialDesignThemesの<materialDesign:Card>コンポーネントを使用してみます。

<materialDesign:Card Grid.Row="5" Grid.ColumnSpan="2" Cursor="">
    <ListView x:Name="PackageList" SelectionMode="Single" ScrollViewer.HorizontalScrollBarVisibility="Hidden" SelectionChanged="PackageList_SelectionChanged">
        <ListView.View>
            <GridView>
                <GridView.ColumnHeaderContainerStyle>
                    <Style TargetType="{x:Type GridViewColumnHeader}">
                        <Setter Property="Background" Value="LightBlue"/>
                    </Style>
                </GridView.ColumnHeaderContainerStyle>
                <GridViewColumn x:Name="PackageColumn" Header="パッケージ" DisplayMemberBinding="{Binding Name}"/>
                <GridViewColumn x:Name="LicenseColumn" Header="ライセンス" DisplayMemberBinding="{Binding License}" Width="100"/>
            </GridView>
        </ListView.View>
    </ListView>
</materialDesign:Card>

“PackageList"を配置していたGridの位置に<materialDesign:Card>を配置し、その子要素として従来のListViewを配置します。