datagrid 跟随grid 大小改变而改变_某些场景grid似乎比flex更贴合

本文探讨了在特定场景下,grid布局相对于flex布局的优势。通过介绍`grid-template-columns`、`fr`单位、`repeat()`和`minmax(min, max)`等属性,详细阐述如何使datagrid跟随grid大小改变而改变,实现更灵活的布局效果。" 50114677,5416915,拓扑排序算法验证实践,"['算法实现', '数据结构', '图算法', 'C++编程', '计算机科学教育']
摘要由CSDN通过智能技术生成

flex布局

{ {i}}
.item{ background: #ddd; margin: 5px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; height: 50px; flex-grow: 1; min-width: 100px; } .container{ display: flex; flex-wrap: wrap; }
a68e928e475f53b9f18d18afd35f6589.gif

效果虽好,不过最后一个元素铺满整行的样式却不是需求,希望跟其他元素保持相同比例。

grid布局

{ {i}}

grid-templa

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想根据数据大小判定来改变单元格的背景色,可以使用 DataTrigger 和 Converter 来实现。以下是一个简单的示例: 1. 在 XAML 中添加 DataGrid 控件,并设置 AutoGenerateColumns 属性为 False。 ```xml <DataGrid x:Name="MyDataGrid" AutoGenerateColumns="False"> <DataGrid.Columns> <DataGridTextColumn Header="Name" Binding="{Binding Name}" /> <DataGridTextColumn Header="Age" Binding="{Binding Age}" /> <DataGridTextColumn Header="Score" Binding="{Binding Score}" /> </DataGrid.Columns> </DataGrid> ``` 2. 在代码中创建数据源,并设置 DataGrid 的 ItemsSource 属性。 ```csharp List<Person> people = new List<Person> { new Person { Name = "Tom", Age = 28, Score = 90 }, new Person { Name = "Jerry", Age = 32, Score = 85 }, new Person { Name = "Mickey", Age = 25, Score = 95 } }; MyDataGrid.ItemsSource = people; ``` 3. 在 DataGrid.CellStyle 属性中定义单元格样式,使用 DataTrigger 和 Converter 来改变单元格背景色。 ```xml <DataGrid.CellStyle> <Style TargetType="DataGridCell"> <Setter Property="Background" Value="Transparent" /> <Style.Triggers> <DataTrigger Binding="{Binding Score, Converter={StaticResource ScoreToBrushConverter}}" Value="Red"> <Setter Property="Background" Value="Red" /> </DataTrigger> <DataTrigger Binding="{Binding Score, Converter={StaticResource ScoreToBrushConverter}}" Value="Yellow"> <Setter Property="Background" Value="Yellow" /> </DataTrigger> <DataTrigger Binding="{Binding Score, Converter={StaticResource ScoreToBrushConverter}}" Value="Green"> <Setter Property="Background" Value="Green" /> </DataTrigger> </Style.Triggers> </Style> </DataGrid.CellStyle> ``` 在上述示例中,我们使用了一个 ScoreToBrushConverter,将 Score 转换为对应的颜色值。Converter 的代码如下: ```csharp public class ScoreToBrushConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { int score = (int)value; if (score < 60) { return "Red"; } else if (score < 80) { return "Yellow"; } else { return "Green"; } } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } ``` 在 Converter 中,我们根据 Score 的大小来返回对应的颜色值。在 DataTrigger 中,我们使用了 Converter 来将 Score 转换为颜色值,并根据颜色值来改变单元格的背景色。 需要注意的是,Converter 返回的颜色值可以是 Color、Brush 或字符串类型。在示例中,我们返回的是字符串类型,因为我们使用的是命名颜色,也可以使用 SolidColorBrush 或 LinearGradientBrush 等 Brush 类型来返回。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值