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

公開日:2018-11-28
最終更新:2018-12-14
※この記事は外部サイト(https://www.doraxdora.com/blog/2017/05/13/...)からのクロス投稿です

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アプリについてはまだまだ初心者で勉強中ですが
またなにかあれば投稿したいと思います。

では。

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
@doraxdoraの技術ブログ 主に Java, C#, Python, Javascript の記事を載せていく予定。

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする