Question

我需要您的帮助来创建条状进度条，而不会限制其高度。

我已经有一个剥离的进度条，但是当高度太大时，剥离看起来非常糟糕，我找不到解决该问题的方法。

这是我目前的风格：

    <Style x:Key="NormalStyle" TargetType="{x:Type ProgressBar}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ProgressBar}">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Determinate" />
                                <VisualState x:Name="Indeterminate" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="PART_Track" Margin="0" BorderThickness="0" CornerRadius="7" />
                        <Border x:Name="PART_Indicator" Margin="0" BorderThickness="0" CornerRadius="5" HorizontalAlignment="Left"
                                    Background="{DynamicResource LPercentBackground1Color}" ClipToBounds="True">
                            <Border x:Name="DiagonalDecorator" Width="5000">
                                <Border.Background>
                                    <DrawingBrush TileMode="Tile" Stretch="Fill"  Viewbox="0,0,1,1" Viewport="0,0,36,34" ViewportUnits="Absolute">
                                        <DrawingBrush.RelativeTransform>
                                            <TranslateTransform X="0" Y="0" />
                                        </DrawingBrush.RelativeTransform>
                                        <DrawingBrush.Drawing>
                                            <GeometryDrawing Brush="{DynamicResource LPercentBackground2Color}" Geometry="M0,0 -18,0 -36,34 -18,34 Z" />
                                        </DrawingBrush.Drawing>
                                    </DrawingBrush>
                                </Border.Background>
                            </Border>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

这是一个不错的酒吧，但高度最小：https://imgur.com/oieZqBC。太大时，这是我的进度栏：https://imgur.com/909N3sx

Answer 1

如果您不想限制Height，那么一种可能性就是缩放图纸。

随时批评所有丑陋;）

您将需要一个转换器将实际的宽度/高度转换为比例因子：

public class MyConverter : MarkupExtension, IValueConverter
{
    public override object ProvideValue(IServiceProvider serviceProvider) => this;

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) =>
        (double)value / double.Parse((string)parameter);

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) =>
        throw new NotImplementedException();
}

在xaml中，您必须将比例转换绑定到父级Border的大小：

<Border x:Name="DiagonalDecorator">
    <Border.Background>
        <DrawingBrush TileMode="Tile"
                      Viewport="0,0,33,33"
                      ViewportUnits="Absolute">
            <DrawingBrush.RelativeTransform>
                <ScaleTransform ScaleX="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type Border}}, ConverterParameter=1000, Converter={local:MyConverter}}"
                                ScaleY="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Border}}, ConverterParameter=32, Converter={local:MyConverter}}" />
            </DrawingBrush.RelativeTransform>
            <DrawingBrush.Drawing>
                <GeometryDrawing Brush="Black"
                                 Geometry="M0,0 -18,0 -36,34 -18,34 Z" />
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Border.Background>
</Border>

如果您不希望x缩放，则设置ScaleX="1"或其他常数因子。

播放转换器参数，直到对看到的内容满意为止。将边框上方放入空白窗口将产生以下结果：

如何创建条纹进度条？

1 个答案: