画像にテキスト要素を重ねる
今回はC#のWPFでDataGridのセルに表示している画像にテキスト要素を重ねるプログラムにポンコツ２人組が挑戦してみました。 適当な画像ファイル「sample.jpg」と「sample2.jpg」を用意してプロジェクトのルートディレクトリに追加してください。 このサンプルでは赤でベタ塗した画像と青でベタ塗した画像を使用しました。
※この記事は2023/10/25時点の情報です。
※本サイトはプロモーションが含まれています。
MainWindow.xaml
このXAMLコードでは、DataGridのカスタムテンプレートカラムを定義して、画像とテキストを重ねて表示しています。
<Window x:Class="ImageTextOverlay.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DataGrid Image Text Overlay" Height="400" Width="600">
<Grid>
<DataGrid x:Name="dataGrid" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTemplateColumn Header="画像">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<Image Source="{Binding ImagePath}" Stretch="Fill"/>
<TextBlock Text="{Binding Text}" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="テキスト" Binding="{Binding Text}" />
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>
MainWindow.xaml.cs
Itemオブジェクトのリストを作成し、データをDataGridにバインドしています。
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 ImageTextOverlay
{
/// <summary>
/// MainWindow.xaml の相互作用ロジック
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
// Sample data
List<Item> items = new List<Item>
{
new Item { ImagePath = "sample.jpg", Text = "テキスト1" },
new Item { ImagePath = "sample2.jpg", Text = "テキスト2" }
};
dataGrid.ItemsSource = items;
}
}
}
Item.cs
サンプルデータをセットするためのクラスです。
画像パスとテキストの項目を持っています。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace ImageTextOverlay
{
public class Item
{
public string ImagePath { get; set; }
public string Text { get; set; }
}
}以下がアプリケーションを実行した画面です。 ベタ塗の赤と青の画像の上にテキスト1とテキスト2の文字が重ねて表示されていますね！
