【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アプリについてはまだまだ初心者で勉強中ですが、またなにかあれば投稿したいと思います。
では。
[itemlink post_id="13141″]
[itemlink post_id="13142″]