2013年01月15日

[C# WPF]DataGridの列幅を同期する

今回は2つのDataGridの列幅を同期するサンプルを紹介します。

一方のDataGridの列幅をもう一方のDataGrid列幅に
Bindする方法が思いつきますが実はそれではダメです。


<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<DataGrid x:Name="dataGrid1" AutoGenerateColumns="False" Margin="5">
<DataGrid.Columns>
<DataGridTextColumn x:Name="Column1" Header="Data1"/>
<DataGridTextColumn x:Name="Column2" Header="Data2"/>
<DataGridTextColumn x:Name="Column3" Header="Data3"/>
<DataGridTextColumn x:Name="Column4" Header="Data4"/>
<DataGridTextColumn x:Name="Column5" Header="Data5"/>
</DataGrid.Columns>
</DataGrid>
<GridSplitter Grid.Row="1" Height="3" HorizontalAlignment="Stretch" VerticalAlignment="Top"/>
<DataGrid x:Name="dataGrid2" Grid.Row="1" AutoGenerateColumns="False" Margin="5">
<DataGrid.Columns>
<DataGridTextColumn Header="Data1"
Width="{Binding ActualWidth, ElementName=Column1}"/>
<DataGridTextColumn Header="Data2"
Width="{Binding ActualWidth, ElementName=Column2}"/>
<DataGridTextColumn Header="Data3"
Width="{Binding ActualWidth, ElementName=Column3}"/>
<DataGridTextColumn Header="Data4"
Width="{Binding ActualWidth, ElementName=Column4}"/>
<DataGridTextColumn Header="Data5"
Width="{Binding ActualWidth, ElementName=Column5}"/>
</DataGrid.Columns>
</DataGrid>
</Grid>


ElementNameで同期する対象列の名前を指定してActualWidthをBindしています。
この方法で同期できそうですができません。

実行結果です。
1.jpg

DataGrid列はソースコードでBindするコードを書かなければ同期できません。


public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();

dataGrid1.BindDataGridColumnsWidth(dataGrid2);
}
}

public static class DataGridEx
{
public static void BindDataGridColumnWidth(this DataGridColumn col1, DataGridColumn col2)
{
var b = new Binding("Width");
b.Source = col2;
b.Mode = BindingMode.TwoWay;
b.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged;
BindingOperations.SetBinding(col1, DataGridColumn.WidthProperty, b);
}

public static void BindDataGridColumnsWidth(this DataGrid dg1, DataGrid dg2)
{
for (int i = 0; i < dg1.Columns.Count; i++)
{
dg1.Columns[i].BindDataGridColumnWidth(dg2.Columns[i]);
}
}
}


列を指定してBindする処理とDataGridの全ての列をBindする処理を
拡張メソッドを使って作ってみました。

実行結果です。
1.jpg


posted by cw at 21:30| Comment(0) | TrackBack(0) | Tips | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。