【问题标题】:DataGrid ProgressBar spanning whole row跨越整行的 DataGrid ProgressBar
【发布时间】:2023-03-25 06:11:01
【问题描述】:

我有一个工作进度条显示在一个列中。但需要它来跨越整行。怎样才能做到这一点?

这行得通,单列中的进度条:

 <UserControl.Resources>
        <SolidColorBrush x:Key="DgGridLineBrush" Color="LightGray"  />

        <Style x:Key="ProgressBarStyle" TargetType="ProgressBar">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ProgressBar">
                        <Grid x:Name="PART_Track" >
                            <Rectangle x:Name="PART_Indicator" Fill="{Binding [3]}" HorizontalAlignment="Left" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

<DataGrid x:Name="MbpDg"  HeadersVisibility="Column" AutoGenerateColumns="False" IsReadOnly="True" CanUserAddRows="False" HorizontalAlignment="Right" ColumnHeaderHeight="20" Height="221" Margin="0,1,0,0" VerticalAlignment="Top" Width="164"
      GridLinesVisibility="None" >
<DataGrid.Columns>
    <DataGridTemplateColumn Header="Size" Width="55"> 
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <Grid>
                   <ProgressBar Value="{Binding [2], Mode=OneWay}" Style="{StaticResource ProgressBarStyle}" Minimum="0" Maximum="100"/>
                   <TextBlock Text="{Binding [2], Mode=OneWay}" HorizontalAlignment="Right"/>
                </Grid>
            </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
    <DataGridTextColumn Binding="{Binding [0]}" Header="Price" Width="50"/>
    <DataGridTextColumn Binding="{Binding [1]}" Header="Qty" Width="30*"/>
</DataGrid.Columns> 

我确实看到了this question,但尝试合并它会产生绑定异常。老实说,我真的不知道我在这里做什么。

 <Setter Property="DataGrid.Template">
 <Setter.Value>
     <ControlTemplate TargetType="{x:Type DataGridRow}">
         <Grid>
             <ProgressBar Value="{Binding [2], Mode=OneWay}"  Style="{StaticResource ProgressBarStyle}" Minimum="0" Maximum="100"/>
         </Grid>
     </ControlTemplate>
 </Setter.Value>

编辑: 答案效果很好,但留下了这个“错误”显示了 3 次:

System.Windows.Data Error: 1 : Cannot create default converter to perform 'one-way' conversions between types 'System.Boolean' and 'System.Windows.Controls.SelectiveScrollingOrientation'. Consider using Converter property of Binding. BindingExpression:Path=AreRowDetailsFrozen; DataItem='DataGrid' (Name='MyDg'); target element is 'DataGridDetailsPresenter' (Name=''); target property is 'SelectiveScrollingOrientation' (type 'SelectiveScrollingOrientation')
System.Windows.Data Error: 5 : Value produced by BindingExpression is not valid for target property.; Value='False' BindingExpression:Path=AreRowDetailsFrozen; DataItem='DataGrid' (Name='MyDg'); target element is 'DataGridDetailsPresenter' (Name=''); target property is 'SelectiveScrollingOrientation' (type 'SelectiveScrollingOrientation')

【问题讨论】:

  • 合并单元格会有所帮助,但缺点是需要大量代码
  • 这是Tutorial,但最好换一种方式

标签: c# wpf datagrid progress-bar


【解决方案1】:

您必须对 DataGridRow 进行模板化。首先,添加一个临时 DataGridRow 作为 DataGrid 的子元素,将光标放在该元素上,然后在属性窗口中转到 Miscellaneous -> Template,单击它右侧的小方块并选择“转换为新资源” .这将在您的资源块中创建一个新的 DataGridRow 模板,然后您可以使用样式对其进行设置。 (由于某种原因,它还会使行标题出现在我的机器上,所以要么从模板中删除它,要么在你的 DataGrid 上设置 `RowHeaderWidth='0')。

只要让你的进度条可见,只需将它添加为模板中SelectiveScrollingGrid 的第一个子项(如果你没有删除第一列,那么你还需要将它的 Grid.Column 设置为1).

将所有这些放在一起,您的 DataGrid 声明将如下所示(我添加了一个 ItemsSource 绑定,您可能想要删除它):

<DataGrid x:Name="MbpDg" ItemsSource="{Binding Items}"  HeadersVisibility="Column" AutoGenerateColumns="False" IsReadOnly="True" CanUserAddRows="False" HorizontalAlignment="Left" ColumnHeaderHeight="20" Height="221" Margin="0,1,0,0" VerticalAlignment="Top" Width="164" CanUserResizeRows="False" GridLinesVisibility="None">
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding [2]}" Header="Size" Width="50"/>
        <DataGridTextColumn Binding="{Binding [0]}" Header="Price" Width="50"/>
        <DataGridTextColumn Binding="{Binding [1]}" Header="Qty" Width="30*"/>
    </DataGrid.Columns>
</DataGrid>

在资源块中设置样式:

<Style TargetType="{x:Type DataGridRow}">
    <Setter Property="Template" Value="{DynamicResource DataGridRowControlTemplate1}" />
</Style>

这是模板本身:

<ControlTemplate x:Key="DataGridRowControlTemplate1" TargetType="{x:Type DataGridRow}">
    <Border x:Name="DGR_Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
        <SelectiveScrollingGrid SelectiveScrollingOrientation="None">
            <SelectiveScrollingGrid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </SelectiveScrollingGrid.RowDefinitions>
            <ProgressBar HorizontalAlignment="Stretch" Value="{Binding [2]}" Minimum="0" Maximum="100"/>
            <DataGridCellsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
            <DataGridDetailsPresenter Grid.Row="1" Visibility="{TemplateBinding DetailsVisibility}" />
        </SelectiveScrollingGrid>
    </Border>
</ControlTemplate>

结果:

【讨论】:

  • 太棒了!虽然我留下了“System.Windows.Data Error”(见编辑)。这是可以/应该解决的问题吗?
  • 如果我没记错的话,那么您不需要滚动单元格,在这种情况下,我认为您可以删除 XAML 的整个部分并在 SelectiveScrollingGrid 中明确设置 SelectiveScrollingOrientation="None" (如果需要,您可以随时将其更改为其他内容)。我已经相应地更新了我的代码。
猜你喜欢
  • 2014-12-11
  • 2018-04-29
  • 1970-01-01
  • 1970-01-01
  • 2015-01-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-12-15
相关资源
最近更新 更多