1. DataGrid の簡単な使用
DataGrid の使用は、実際には TreeView の使用と似ていますが、バックグラウンド組織のオブジェクト構造が異なります. DataGrid は通常、再帰的な構造を必要としません. データ グリッドがバインドされているデータ ソースは、属性によって表されますコラム わからなくても大丈夫です コード。
ここに画像の説明を挿入
</TabItem>
<TabItem Header="Message" />
<TabItem Header=" " />
<TabItem Header=" "/>
<TabItem Header=" " />
<TabItem Header=" " />
<TabItem Header=" " />
</TabControl>
</Grid>
private string name;
/// <summary>
/// 名字
/// </summary>
public string Name
{
get => name;
set
{
name = value;
OnPropertyChanged();
}
}
private int number;
/// <summary>
/// 数量
/// </summary>
public int Number
{
get => number;
set
{
number = value;
OnPropertyChanged();
}
}
private double price;
/// <summary>
/// 价格
/// </summary>
public double Price
{
get => price;
set
{
price = value;
OnPropertyChanged();
}
}
3 つの列に対応する 3 つの属性、古い規則、書き込みインターフェイス、および ViewModel (コードは非常に単純で、自分で記述します)
public ObservableCollection<DataGridModel> DataGridModels { get; set; } = new ObservableCollection<DataGridModel>();
public DataGridViewModel()
{
Create();
}
private void Create()
{
DataGridModels.Add(new DataGridModel()
{
Name = "苹果",
Number = 5,
Price = 1.5
});
DataGridModels.Add(new DataGridModel()
{
Name = "香蕉",
Number = 2,
Price = 15
});
DataGridModels.Add(new DataGridModel()
{
Name = "菠萝",
Number = 3,
Price = 10
});
}
書いて直接実行して効果を確認する
オブジェクトは行に対応し、属性は列に対応します. TreeView の各レベルに対応するオブジェクトに似ています. デフォルトのスタイルはビットです. . . では、次は美化しましょう。
最初に列名を中国語に美化 --> 名前、数量、価格 (すべての列を含む DataGrid の下に列があり、列を変更するスタイルも一般的にそこにあります)
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Name}" Header="名称" />
<DataGridTextColumn Binding="{Binding Number}" Header="数量" />
<DataGridTextColumn Binding="{Binding Price}" Header="价格" />
</DataGrid.Columns>
走る、
ヒス、なぜそれが 2 回表示されるのですか。. . (小さな問題) 公式 Web サイトを見て、DataGrids がデフォルトで自動的に列を作成することを見つけます。これが、データ ソースをバインドして最初に列を表示するだけである AutoGenerateColumns="False" であり、このプロパティを False に設定するだけです。
次に、他の列タイプ (チェックボックス、コンボボックス、ハイパーリンク) を作成します。
(最後の行をダブルクリックして別の行に切り替えると、行が追加されます)、直接 CanUserAddRows="False" を設定して、行を作成できないようにします。
OK、次にインターレースされた色の変化を設定します: AlternatingRowBackground="LightBlue" (ターゲット行の色を設定)、AlternationCount="2" (色が変化する行間の間隔を設定、最小値は 2)
最後に、行とセルのスタイル設定
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Setter Property="Background" Value="SkyBlue" />
</Style>
</DataGrid.RowStyle>
<DataGrid.CellStyle>
<Style TargetType="DataGridCell">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.CellStyle>
実行結果を図に示します