1

やりたいこと

ある特定のデータが表示される時は1列に見えるようにしたい。

言語・制約

C#, xaml, WPF

結果イメージ

(画像参照url: https://help.syncfusion.com/wpf/datagrid/merge-cells

結果のイメージとしては上記のようにセルが一つに見えるようにしたいです。

現在はDatagridのItemSourceに表に表示するデータ(List型)を入れて表示している状態です。

DataGridLineVisibility.Horizontal などを利用して線を消した場合、全てに適用されてしまい特定の箇所のみで活性化させることが出来ませんでした。

ある特定のデータが表示された際、列を一列に見せる方法がありましたらご教授頂けると幸いです。
よろしくお願いいたします。

2

1 件の回答 1

1

DataGrid の水平方向のセルの結合は表現できそうにないので、セル間の Border を消す方法を説明します。

ただし、DataGrid の Border をセル単位で設定はできないため、DataGrid の Border を非表示にしてから、セル単位で Border を設定、調整することで実現します。

まず、ViewModel に、セル単位の Border の設定を持たせます。この時、セルに設定する値よってセル単位の Border を調整します。

using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace WpfDataGridDemo;

public class OrdersViewModel
{
    internal static Brush _defaultBorderBrush = Brushes.Black;

    public DataGridGridLinesVisibility GridLinesVisibility { get; set; } = DataGridGridLinesVisibility.Horizontal;
    public Brush DataGridBorderBrush { get; set; } = _defaultBorderBrush;
    public ObservableCollection<Order> Items { get; set; } = new ObservableCollection<Order>();
}

public class Order
{
    private static Thickness _defaultCellThickness = new Thickness(0.3, 0, 0.3, 0);
    private static Brush _defaultCellBorderBrush = OrdersViewModel._defaultBorderBrush;

    private string _customerName = string.Empty;
    private string _customerCity = string.Empty;

    public Order(string id, string customerId, string customerName, string customerCity, string shipCity)
    {
        Id = id;
        CustomerId = customerId;
        CustomerName = customerName;
        CustomerCity = customerCity;        
        ShipCity = shipCity;
    }

    public string Id { get; set; }
    public string CustomerId { get; set; }
    public string CustomerName
    {
        get => _customerName;
        set 
        {
            if (string.IsNullOrEmpty(value))
            {
                CustomerIdCellBorderThickness = new Thickness()
                {
                    Left = CustomerIdCellBorderThickness.Left,
                    Top = CustomerIdCellBorderThickness.Top,
                    Right = 0,
                    Bottom = CustomerIdCellBorderThickness.Bottom,
                };

                CustomerNameCellBorderThickness = new Thickness()
                {
                    Left = 0,
                    Top = CustomerNameCellBorderThickness.Top,
                    Right = CustomerNameCellBorderThickness.Right,
                    Bottom = CustomerNameCellBorderThickness.Bottom,
                };
            }
            
            _customerName = value;
        }
    }

    public string CustomerCity
    {
        get => _customerCity;
        set
        {
            if (string.IsNullOrEmpty(value))
            {
                CustomerNameCellBorderThickness = new Thickness()
                {
                    Left = CustomerNameCellBorderThickness.Left,
                    Top = CustomerNameCellBorderThickness.Top,
                    Right = 0,
                    Bottom = CustomerNameCellBorderThickness.Bottom,
                };

                CustomerCityCellBorderThickness = new Thickness()
                {
                    Left = 0,
                    Top = CustomerCityCellBorderThickness.Top,
                    Right = CustomerCityCellBorderThickness.Right,
                    Bottom = CustomerCityCellBorderThickness.Bottom,
                };
            }

            _customerCity = value;
        }
    }

    public string ShipCity { get; set; }

    public Thickness IdCellBorderThickness { get; set; } = _defaultCellThickness;
    public Brush IdCellBorderBrush { get; set; } = _defaultCellBorderBrush;
    public Thickness CustomerIdCellBorderThickness { get; set; } = _defaultCellThickness;
    public Brush CustomerIdCellBorderBrush { get; set; } = _defaultCellBorderBrush;
    public Thickness CustomerNameCellBorderThickness { get; set; } = _defaultCellThickness;
    public Brush CustomerNameCellBorderBrush { get; set; } = _defaultCellBorderBrush;
    public Thickness CustomerCityCellBorderThickness { get; set; } = _defaultCellThickness;
    public Brush CustomerCityCellBorderBrush { get; set; } = _defaultCellBorderBrush;
    public Thickness ShipCityCellBorderThickness { get; set; } = _defaultCellThickness;
    public Brush ShipCityCellBorderBrush { get; set; } = _defaultCellBorderBrush;
}

このコード例では、Order.CustomerName, Order.CustomerCity に空文字が設定された場合、隣接する Border を非表示(=サイズ0) にしています。

また、OrdersViewModel.DataGridGridLinesVisibility プロパティに、DataGridGridLinesVisibility.Horizontal を設定し、水平方向の Border のみを表示するようにします。

この ViewModel を DataGrid にバインドします。

<Window x:Class="WpfDataGridDemo.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:WpfDataGridDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" Loaded="Window_Loaded"
        DataContext="{Binding Path=OrdersViewModel, RelativeSource={RelativeSource Self}}">
    <Grid>
        <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Path=Items}" GridLinesVisibility="{Binding Path=GridLinesVisibility}" BorderBrush="{Binding Path=DataGridBorderBrush}">
            <DataGrid.Columns>
                <DataGridTemplateColumn Header="OrderId">
                    <DataGridTemplateColumn.CellStyle>
                        <Style TargetType="{x:Type DataGridCell}">
                            <Setter Property="BorderBrush" Value="{Binding Path=IdCellBorderBrush}"/>
                            <Setter Property="BorderThickness" Value="{Binding Path=IdCellBorderThickness}"/>
                        </Style>
                    </DataGridTemplateColumn.CellStyle>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <TextBlock Text="{Binding Path=Id}"  VerticalAlignment="Center" Margin="3,3,3,3"/>
                            </Grid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTemplateColumn Header="CustomerId">
                    <DataGridTemplateColumn.CellStyle>
                        <Style TargetType="{x:Type DataGridCell}">
                            <Setter Property="BorderBrush" Value="{Binding Path=CustomerIdCellBorderBrush}"/>
                            <Setter Property="BorderThickness" Value="{Binding Path=CustomerIdCellBorderThickness}"/>
                        </Style>
                    </DataGridTemplateColumn.CellStyle>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <TextBlock Text="{Binding Path=CustomerId}"  VerticalAlignment="Center" Margin="3,3,3,3"/>
                            </Grid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>                    
                </DataGridTemplateColumn>
                <DataGridTemplateColumn Header="CustomerName">
                    <DataGridTemplateColumn.CellStyle>
                        <Style TargetType="{x:Type DataGridCell}">
                            <Setter Property="BorderBrush" Value="{Binding Path=CustomerNameCellBorderBrush}"/>
                            <Setter Property="BorderThickness" Value="{Binding Path=CustomerNameCellBorderThickness}"/>
                        </Style>
                    </DataGridTemplateColumn.CellStyle>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <TextBlock Text="{Binding Path=CustomerName}"  VerticalAlignment="Center" Margin="3,3,3,3"/>
                            </Grid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>                    
                </DataGridTemplateColumn>
                <DataGridTemplateColumn Header="CustomerCity">
                    <DataGridTemplateColumn.CellStyle>
                        <Style TargetType="{x:Type DataGridCell}">
                            <Setter Property="BorderBrush" Value="{Binding Path=CustomerCityCellBorderBrush}"/>
                            <Setter Property="BorderThickness" Value="{Binding Path=CustomerCityCellBorderThickness}"/>
                        </Style>
                    </DataGridTemplateColumn.CellStyle>                    
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <TextBlock Text="{Binding Path=CustomerCity}"  VerticalAlignment="Center" Margin="3,3,3,3"/>
                            </Grid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>                    
                </DataGridTemplateColumn>
                <DataGridTemplateColumn Header="ShipCity">
                    <DataGridTemplateColumn.CellStyle>
                        <Style TargetType="{x:Type DataGridCell}">
                            <Setter Property="BorderBrush" Value="{Binding Path=ShipCityCellBorderBrush}"/>
                            <Setter Property="BorderThickness" Value="{Binding Path=ShipCityCellBorderThickness}"/>
                        </Style>
                    </DataGridTemplateColumn.CellStyle>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <TextBlock Text="{Binding Path=ShipCity}"  VerticalAlignment="Center" Margin="3,3,3,3"/>
                            </Grid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

DataGrid.GridLinesVisibility に OrdersViewModel.DataGridGridLinesVisibility をバインドし、水平方向の Border のみを表示するようにしています。
DataGridTemplateColumn.CellStyle で、セル毎の Border の設定をバインドしています。

最後に、サンプルデータを ViewModel に設定します。

using System.Windows;

namespace WpfDataGridDemo;

public partial class MainWindow : Window
{
    public OrdersViewModel OrdersViewModel { get; set; } = new OrdersViewModel();

    public MainWindow()
    {
        InitializeComponent();
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {            
        var items = this.OrdersViewModel.Items;
        items.Add(new Order("1001", "A001", "", "", "ベルリン"));
        items.Add(new Order("1003", "H005", "藤原 道長", "京都", "大興"));
        items.Add(new Order("1004", "H011", "藤原 清衡", "岩手", "外が浜"));
        items.Add(new Order("1005", "B544", "", "高知", "シアトル"));
        items.Add(new Order("1006", "H168", "紫式部", "", "福岡"));
        items.Add(new Order("1007", "H322", "藤原 彰子", "京都", "-"));
        items.Add(new Order("1008", "H323", "藤原 頼通", "京都", "-"));
        items.Add(new Order("1009", "H324", "藤原 頼宗", "京都", "-"));
        items.Add(new Order("1010", "H325", "藤原 妍子", "京都", "-"));
    }
}

実行結果は、以下のようになります。
実行結果

実際には、セルは結合されていませんが、セル毎の Border を調整することで、結合されているように見えています。

1
  • 分かりやすく丁寧な説明ありがとうございます!頂いた回答を参考に作成してみます!!
    – user60288
    Commented 4月28日 1:00

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。