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

2017年5月13日2020年10月20日C#,開発

おはようございます。

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

1. サンプルアプリの作成
2. サンプルアプリの起動
3. 修正する
4. まとめ

サンプルアプリの作成

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

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>

<Windowx: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.Columns>

</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; }
    }
}

usingSystem;

usingSystem.Collections.Generic;

usingSystem.Linq;

usingSystem.Text;

usingSystem.Threading.Tasks;

namespaceWpfApp1

{

classCat

{

publicintNo{get;set;}

publicStringName{get;set;}

publicStringSex{get;set;}

publicStringAge{get;set;}

publicStringKind{get;set;}

publicStringFavorite{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 = "横取りフード"}
            };
        }
    }
}

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;

namespaceWpfApp1

{

/// <summary>

/// MainWindow.xaml の相互作用ロジック

/// </summary>

publicpartial classMainWindow:Window

{

publicMainWindow()

{

InitializeComponent();

// とりあえずサクっとデータをバインドする

this.dataGrid.ItemsSource=new[]

{

newCat{No=1,Name="そら",Sex="♂",Age="6",Kind="キジトラ",Favorite="犬の人形"},

newCat{No=2,Name="りく",Sex="♂",Age="5",Kind="長毛種（不明）",Favorite="人間"},

newCat{No=3,Name="うみ",Sex="♀",Age="4",Kind="ミケ（っぽい）",Favorite="高級ウェットフード"},

newCat{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>