【WPF】DataGrid でセルフォーカス時の枠線を消し去る

C#@WPFのクライアントアプリケーションにて
データグリッドのセルフォーカス時の枠線を表示しない方法を紹介します。

サンプルアプリの作成
まずは単純にデータグリッドに手っ取り早くデータを表示する
サンプルアプリケーションを作成します。

Visual Studio にて、WPFアプリケーションプロジェクトを新規で作成し、生成されたメインウィンドウの Xaml に次のコードを記述します。

MainWindow.xaml

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="一覧" Height="350" Width="525">
    <Grid>
        <DataGrid Name="dataGrid" HorizontalAlignment="Left" Height="300" Margin="10,10,0,0" VerticalAlignment="Top" Width="497" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding No}" ClipboardContentBinding="{x:Null}" Header="No" IsReadOnly="True" Width="50"/>
                <DataGridTextColumn Binding="{Binding Name}" ClipboardContentBinding="{x:Null}" Header="名前" IsReadOnly="True" Width="100"/>
                <DataGridTextColumn Binding="{Binding Sex}" ClipboardContentBinding="{x:Null}" Header="性別" IsReadOnly="True"/>
                <DataGridTextColumn Binding="{Binding Age}" ClipboardContentBinding="{x:Null}" Header="年齢" IsReadOnly="True"/>
                <DataGridTextColumn Binding="{Binding Kind}" ClipboardContentBinding="{x:Null}" Header="種別" IsReadOnly="True" Width="120"/>
                <DataGridTextColumn Binding="{Binding Favorite}" ClipboardContentBinding="{x:Null}" Header="好物" IsReadOnly="True" Width="120"/>
            </DataGrid.Columns>
        </DataGrid>

    </Grid>
</Window>

クラスを追加し、次のように記述します。
データグリッドにバインドするデータを保持するための単純なクラスです。

Cat.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WpfApp1
{
    class Cat
    {
        public int No { get; set; }
        public String Name { get; set; }
        public String Sex { get; set; }
        public String Age { get; set; }
        public String Kind { get; set; }
        public String Favorite { get; set; }
    }
}

MainWindowのクラスファイルには次のように記述します。

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp1
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            // とりあえずサクっとデータをバインドする
            this.dataGrid.ItemsSource = new[]
            {
                new Cat { No = 1, Name = "そら", Sex = "♂", Age = "6", Kind = "キジトラ", Favorite = "犬の人形"},
                new Cat { No = 2, Name = "りく", Sex = "♂", Age = "5", Kind = "長毛種（不明）", Favorite = "人間"},
                new Cat { No = 3, Name = "うみ", Sex = "♀", Age = "4", Kind = "ミケ（っぽい）", Favorite = "高級ウェットフード"},
                new Cat { No = 4, Name = "こうめ", Sex = "♀", Age = "2", Kind = "サビ", Favorite = "横取りフード"}
            };
        }
    }
}

ひとまずこれで一覧を表示することができるはず。

サンプルアプリの起動
VisualStudio より、「デバッグなしで起動」を実行します。

初期表示でデータが表示されます。
通常だと、セルを選択すると次のような表示になります。
（列単位で読み取りのみとしているので編集はできません）

セルを選択すると、選択行がハイライトされ、選択されたセルの枠線が太線で表示されます。
個人的にこれが気に食わない・・。

複数選択した際もセルの枠線が太くなります。
修正する
データグリッドのスタイルをいじり次のようにしたいと思います。

セルの枠線を消す
行ごとのハイライト
複数選択不可
行の高さを広げる
最後の列をぴったりグリッドに合わせる

修正後ソース

MainWindow.xaml

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="一覧" Height="350" Width="525">
    <Grid>
        <DataGrid Name="dataGrid" HorizontalAlignment="Left" Height="300" Margin="10,10,0,0" VerticalAlignment="Top" Width="497" AutoGenerateColumns="False"
                  AlternationCount="1" AlternatingRowBackground="#B2CEEBF7" SelectionMode="Single" Grid.Row="1" 
                  HorizontalGridLinesBrush="Gray" VerticalGridLinesBrush="Gray" >
            <DataGrid.CellStyle>
                <Style TargetType="DataGridCell">
                    <!-- セルフォーカス時の枠線を消す -->
                    <Setter Property="BorderThickness" Value="0"/>
                    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                    <!-- 行高さを大きくした際に、セル内容の縦配置を真ん中にする -->
                    <Setter Property="Height" Value="25"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type DataGridCell}">
                                <Grid Background="{TemplateBinding Background}">
                                    <ContentPresenter VerticalAlignment="Center" Margin="4,4,4,4" />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </DataGrid.CellStyle>
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding No}" ClipboardContentBinding="{x:Null}" Header="No" IsReadOnly="True" Width="50"/>
                <DataGridTextColumn Binding="{Binding Name}" ClipboardContentBinding="{x:Null}" Header="名前" IsReadOnly="True" Width="100"/>
                <DataGridTextColumn Binding="{Binding Sex}" ClipboardContentBinding="{x:Null}" Header="性別" IsReadOnly="True" Width="40"/>
                <DataGridTextColumn Binding="{Binding Age}" ClipboardContentBinding="{x:Null}" Header="年齢" IsReadOnly="True" Width="40"/>
                <DataGridTextColumn Binding="{Binding Kind}" ClipboardContentBinding="{x:Null}" Header="種別" IsReadOnly="True" Width="120"/>
                <DataGridTextColumn Binding="{Binding Favorite}" ClipboardContentBinding="{x:Null}" Header="好物" IsReadOnly="True" Width="*"/>
            </DataGrid.Columns>
        </DataGrid>

    </Grid>
</Window>

具体的な修正部分については、ソースを見比べてみてください。

これを実行すると次のような表示に変更されます。

少し見やすくなりましたかね。
まとめ
WPFアプリは、Windowsフォームと違い （ほんとかな？）
WEBのように色々とスタイルが変更できるので、出来るだけ見やすく使いやすくしたいですね。

WPFアプリについてはまだまだ初心者で勉強中ですがまたなにかあれば投稿したいと思います。

ではでは。