【WPF】Converter を使って DataGrid に表示する値を変更する

公開日:2019-03-26
最終更新:2019-03-26
※この記事は外部サイト(https://www.doraxdora.com/blog/2017/06/20/...)からのクロス投稿です

おはようございます。

前回までに、DataGridにデータを表示していて、
今更気付いたのですが、種別の列がコードのままの表示となっていました。

種別のマスタも作ってあるし、
通常であればテーブル結合して種別コードから種別名をとるんですが、
気になったので他の方法を調べたところ、
DataGridに表示する値を表示前に変換することができるみたいなのでやってみました。

もちろんソースは前回のものを修正します。

【WPF】SQLiteに接続してデータを登録してみる

Converter クラスの作成

次のクラスを新規で作成します。

KindConverter.cs

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

using System.Data.Linq;  
using System.Data.SQLite;  
using System.Data.SQLite.Linq;  

// Converter 用  
// IValueConverter、CultureInfo  
using System.Windows.Data;  
using System.Globalization;  


namespace WpfApp1  
{  
    /// <summary>  
    /// 種別コンバータークラス.  
    /// </summary>  
    public class KindConverter : IValueConverter  
    {  
        /// <summary>  
        /// データ変換処理  
        /// </summary>  
        /// <param name="value"></param>  
        /// <param name="targetType"></param>  
        /// <param name="parameter"></param>  
        /// <param name="culture"></param>  
        /// <returns></returns>  
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)  
        {  
            // 都度DBアクセスするのはどうかと思うが  
            using (var conn = new SQLiteConnection("Data Source=SampleDb.sqlite"))  
            {  
                conn.Open();  
                using (DataContext con = new DataContext(conn))  
                {  
                    // データを取得  
                    Table<Kind> tblCat = con.GetTable<Kind>();  
                    Kind k = tblCat.Single(c => c.KindCd == value as String);  
                    if (k != null)  
                    {  
                        return k.KindName;  
                    }   
                }  
            }  
            return "";  
        }  

        /// <summary>  
        /// データ復元処理  
        /// </summary>  
        /// <param name="value"></param>  
        /// <param name="targetType"></param>  
        /// <param name="parameter"></param>  
        /// <param name="culture"></param>  
        /// <returns></returns>  
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)  
        {  
            using (var conn = new SQLiteConnection("Data Source=SampleDb.sqlite"))  
            {  
                conn.Open();  
                using (DataContext con = new DataContext(conn))  
                {  
                    // データを取得  
                    Table<Kind> tblCat = con.GetTable<Kind>();  
                    Kind k = tblCat.Single(c => c.KindName == value as String);  
                    if (k != null)  
                    {  
                        return k.KindCd;  
                    }  

                }  
            }  
            return "";  
        }  
    }  
}  

画面の修正

画面のXamlにて、対象の列に作成した Converter を適用します。

Converter クラスの利用宣言

MainWindow.xaml

            <Grid.Resources>  
                <local:KindConverter x:Key="KindConv"/>  
            </Grid.Resources>  

Converter クラスの適用

  <DataGridTextColumn Binding="{Binding Kind, Converter={StaticResource KindConv}}" ClipboardContentBinding="{x:Null}" Header="種別" IsReadOnly="True" Width="120"/>  

全体

MainWindow.xaml ```xml
<Grid>  
    <Grid.Resources>  
        <local:KindConverter x:Key="KindConv"/>  
    </Grid.Resources>  
    <Label Content="名前:" Margin="10,10,0,0" Style="{StaticResource lb-normal}"/>  
    <TextBox x:Name="search_name" Margin="56,12,0,0" Style="{StaticResource tx-normal}"/>  
    <Label Content="種別:" Margin="201,10,0,0" Style="{StaticResource lb-normal}"/>  
    <ComboBox x:Name="search_kind" Margin="252,12,0,0" Style="{StaticResource cb-normal}"/>  
    <Button x:Name="search_button" Content="検索" Margin="432,12,0,0" Style="{StaticResource btn-normal}" Click="search_button_Click"/>  

    <DataGrid Name="dataGrid" HorizontalAlignment="Left" Margin="10,43,0,0" Width="497" Height="225" Style="{StaticResource grid-normal}">  
        <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, Converter={StaticResource KindConv}}" ClipboardContentBinding="{x:Null}" Header="種別" IsReadOnly="True" Width="120"/>  
            <DataGridTextColumn Binding="{Binding Favorite}" ClipboardContentBinding="{x:Null}" Header="好物" IsReadOnly="True" Width="*"/>  
        </DataGrid.Columns>  
    </DataGrid>  
    <Button x:Name="add_button" Content="追加" HorizontalAlignment="Left" Margin="10,273,0,0" VerticalAlignment="Top" Width="75" Height="30" Click="add_button_Click"/>  
    <Button x:Name="upd_button" Content="更新" HorizontalAlignment="Left" Margin="90,273,0,0" VerticalAlignment="Top" Width="75" Height="30" Click="upd_button_Click"/>  
    <Button x:Name="del_button" Content="削除" HorizontalAlignment="Left" Margin="172,273,0,0" VerticalAlignment="Top" Width="75" Height="30" Click="del_button_Click"/>  
</Grid>  

`

これで完了です。

無事にマスタから名称を表示できました。

まとめ

簡単に表示内容を変更することができました。

こうやって、何ができるのかを知ることがやっぱり重要ですよね。
引き続き勉強していきます。。

ではでは。

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

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

0件のコメント

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

技術ブログをはじめよう

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

技術ブログを開設する

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

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

Markdownで書ける

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

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

技術ブログ開設

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

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