WPF如何在进度条上显示文本答案

【问题标题】：WPF how to display text on progress barWPF如何在进度条上显示文本
【发布时间】：2018-04-18 08:23:15
【问题描述】：

我有一个 DataGrid，其中一列用于显示下载百分比。以下是我的代码：

<DataGridTemplateColumn Header="Percent" IsReadOnly="True" Width="*">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <DockPanel>
                <Button Margin="5,0,0,0" DockPanel.Dock="Right" VerticalContentAlignment="Center" Style="{StaticResource BasicButtonStyle}" Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGrid}}, Path=DataContext.StopButtonClickCommand}" >
                    <Image Height="12" Source="/Client;component/Resources/Images/stop.png" />
                </Button>
                <ProgressBar Value="{Binding Path=Percent, Mode=OneWay}" Minimum="0" Maximum="100" />
                <TextBlock Text="{Binding Path=Percent , StringFormat={}{0}%}" HorizontalAlignment="Center" ></TextBlock>
            </DockPanel>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

我想在进度条上显示文字，同时保持右边的按钮。我应该如何修改我的代码？

【问题讨论】：

标签： c# wpf xaml datagrid progress-bar

【解决方案1】：

将 ProgressBar 和 TextBlock 放在一个容器（网格）中

<Grid>
    <ProgressBar Value="{Binding Path=Percent, Mode=OneWay}" Minimum="0" Maximum="100" />
    <TextBlock Text="{Binding Path=Percent , StringFormat={}{0}%}" HorizontalAlignment="Center" />
</Grid>

【讨论】：

【解决方案2】：

PreogressBar 带有百分比文本显示，文本具有类似“XOR”的效果。

UI xaml 代码：

<Grid>
    <!-- Progress Panel -->
    <ProgressBar x:Name="progressBar" x:Uid="Progress" 
                 HorizontalAlignment="Stretch" VerticalAlignment="Center"
                 MinHeight="32" Margin="4"/>
    <TextBlock x:Name="progressInfo" x:Uid="ProgressInfo" 
               TextAlignment="Center"
               HorizontalAlignment="Center" VerticalAlignment="Center" 
               FontSize="16" FontFamily="Iosevka, Monaco, Inconsolata, Consolas, Segoe UI">
        <TextBlock.Foreground>
            <LinearGradientBrush x:Name="progressInfoLinear" StartPoint="0,0" EndPoint="1,0">
                <GradientStop Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}" Offset="0"></GradientStop>
                <GradientStop Color="{DynamicResource {x:Static SystemColors.WindowTextColorKey}}" Offset="0" x:Name="progressInfoLeft"></GradientStop>
                <GradientStop Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}" Offset="0" x:Name="progressInfoRight"></GradientStop>
                <GradientStop Color="{DynamicResource {x:Static SystemColors.WindowColorKey}}" Offset="1"></GradientStop>
            </LinearGradientBrush>
        </TextBlock.Foreground>
    </TextBlock>
</Grid>

ProgressBar 报告代码：

progress = new Progress<Tuple<double, double>>(i =>
{
    var received = i.Item1;
    var total = i.Item2;
    #region Update ProgressBar
    var percent = total > 0 ? received / total : 0;
    progressBar.Value = percent * 100;
    #endregion
    #region Update Progress Info Text
    progressInfo.Text = $"({progressBar.Value:0.0}%)";
    #endregion
    #region Update Progress Info Text Color Gradient
    var factor = progressBar.ActualWidth / progressInfo.ActualWidth;
    var offset = Math.Abs((factor - 1) / 2);
    progressInfoLinear.StartPoint = new Point(0 - offset, 0);
    progressInfoLinear.EndPoint = new Point(1 + offset, 0);
    progressInfoLeft.Offset = percent;
    progressInfoRight.Offset = percent;
    #endregion
});

【讨论】：