WPF：ListView 内的进度条未垂直对齐

Question

我有 ListView 和简单的 Progress-Bar:

<ListView.Resources>
    <DataTemplate x:Key="MyDataTemplate">
        <Grid Margin="-6">
            <ProgressBar Name="prog" Maximum="100" Value="{Binding Progress}" 
                         Width="{Binding Path=Width, ElementName=ProgressCell}" 
                         Height="16" Margin="0" Background="#FFD3D0D0" Style="{StaticResource CustomProgressBar}" VerticalAlignment="Bottom" HorizontalAlignment="Stretch"/>
            <TextBlock Text="{Binding Path=Value, ElementName=prog, StringFormat={}{0}%}" VerticalAlignment="Center"
                       HorizontalAlignment="Center" FontSize="11" Foreground="Black" />
        </Grid>
    </DataTemplate>
    <ControlTemplate x:Key="ProgressBarTemplate">
        <Label  HorizontalAlignment="Center" VerticalAlignment="Center" />
    </ControlTemplate>
</ListView.Resources>

<Style x:Key="CustomProgressBar" TargetType="ProgressBar" >
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ProgressBar">
                <Border BorderBrush="Transparent" BorderThickness="1" Background="LightGray" CornerRadius="0" Padding="0">
                    <Grid x:Name="PART_Track">
                        <Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left" Fill="#FF15669E" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

如图所示：

Progress-Bar 没有垂直对齐，我尝试更改所有 VerticalAlignment 属性，但仍然没有垂直对齐

我的列表视图：

    <ListView Name="lvPcapFiles" Margin="16,455,0,40" Background="Transparent" BorderThickness="0" 
              ItemsSource="{Binding dataList}" >
        <ListView.ItemContainerStyle>
            <Style TargetType="{x:Type ListViewItem}">
                <Setter Property="Foreground" Value="White"/>
                <Setter Property="SnapsToDevicePixels" Value="True"/>
                <Setter Property="Padding" Value="4,1"/>
                <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="BorderBrush" Value="Transparent"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                <Style.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsMouseOver" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter Property="BorderBrush" Value="White"/>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Selector.IsSelectionActive" Value="False"/>
                            <Condition Property="IsSelected" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter Property="BorderBrush" Value="Blue"/>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Selector.IsSelectionActive" Value="True"/>
                            <Condition Property="IsSelected" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter Property="BorderBrush" Value="#FF15669E"/>
                    </MultiTrigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.Resources>
            <DataTemplate x:Key="MyDataTemplate">
                <Grid Margin="-6">
                    <ProgressBar Name="prog" Maximum="100" Value="{Binding Progress}" 
                                 Width="{Binding Path=Width, ElementName=ProgressCell}" 
                                 Height="16" Margin="0" Background="#FFD3D0D0" Style="{StaticResource CustomProgressBar}" />
                    <TextBlock Text="{Binding Path=Value, ElementName=prog, StringFormat={}{0}%}" VerticalAlignment="Center"
                               HorizontalAlignment="Center" FontSize="11" Foreground="Black" />
                </Grid>
            </DataTemplate>
            <ControlTemplate x:Key="ProgressBarTemplate">
                <Label  HorizontalAlignment="Center" VerticalAlignment="Center" />
            </ControlTemplate>
        </ListView.Resources>
        <ListView.View>
            <GridView ColumnHeaderContainerStyle="{StaticResource ListViewHeaderStyle}">
                <!-- file name column -->
                <GridViewColumn Width="500" Header="File name" DisplayMemberBinding="{Binding FileName}" />

                <!-- duration column -->
                <GridViewColumn Width="60" Header="Duration" DisplayMemberBinding="{Binding Duration}" />

                <!-- packets column -->
                <GridViewColumn Width="80" Header="Packets" DisplayMemberBinding="{Binding Packets}" />

                <!-- checksum 
                <GridViewColumn Width="80" Header="Checksum " DisplayMemberBinding="{Binding BadChecksumExist}" /> -->

                <!-- progress column -->
                <GridViewColumn x:Name="ProgressCell"  Width="50" Header="Progress" CellTemplate="{StaticResource MyDataTemplate}" />
            </GridView>
        </ListView.View>
    </ListView>

    <!-- remove listview headers -->
    <Style x:Key="ListViewHeaderStyle" TargetType="{x:Type GridViewColumnHeader}">
        <Setter Property="Visibility" Value="Collapsed" />
    </Style>

Answer 1

从您的 ListViewItem 样式中删除这一行：

<Style TargetType="{x:Type ListViewItem}">

    <!-- remove this line -->
    <Setter Property="VerticalContentAlignment" 
            Value="{Binding VerticalContentAlignment, 
                            RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>

WPF：ListView 内的进度条未垂直对齐

WPF: Progress Bar inside ListView is not aligned vertically

wpf

listview

progress-bar