如何在wpf中创建自定义形状的进度条?

问题描述 投票:-1回答:2

好吧,我将自定义一个进度条或加载C#WPF,而不是一个矩形,它应该有一些小的锐度在最后。看起来像这样的enter image description here

加载完成后,锐度会消失

目前,这就是我所做的。

enter image description here

如何实现自定义加载栏?

这是我的代码,XAML

<Window x:Class="loadingbarSolution.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="{x:Type ProgressBar}"
       TargetType="{x:Type ProgressBar}">

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ProgressBar">
                        <Border BorderBrush="#D9DCE1" BorderThickness="0" Background="#FF0C0B0B" CornerRadius="0" Padding="0">
                            <Grid x:Name="PART_Track">
                                <Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left" Fill="#FF2BA9FF" />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>


        </Style>

    </Window.Resources>
        <Grid>
        <ProgressBar x:Name="IMSIProgressBar" 
                     HorizontalAlignment="Left" 
                     Height="20" Margin="82,136,0,0" 
                     VerticalAlignment="Top" 
                     Width="200" 
                     BorderThickness="1" Background="#FF0C0B0B"/>
    </Grid>
</Window>

我该怎么办?

c# wpf xaml templates progress-bar
2个回答
2
投票

返回代码:

class MyCustomConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return new Thickness(0, 0, -(double)value, 0);
    }

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

模板:

<ControlTemplate TargetType="ProgressBar">
    <ControlTemplate.Resources>
        <local:MyCustomConverter x:Key="sttc"/>
    </ControlTemplate.Resources>
    <Border BorderBrush="#D9DCE1" BorderThickness="0" Background="#FF0C0B0B" CornerRadius="0" Padding="0" ClipToBounds="True">
        <Grid x:Name="PART_Track" Margin="{TemplateBinding Height ,Converter={StaticResource sttc}}">
            <Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left" Fill="#FF2BA9FF" RenderTransformOrigin="0,0">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <SkewTransform AngleX="-45"/>
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>
        </Grid>
    </Border>
</ControlTemplate>

0
投票

你可以在模板中使用Polygon

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="ProgressBar">
            <Border BorderBrush="#D9DCE1" BorderThickness="0" Background="#FF0C0B0B" CornerRadius="0" Padding="0">
                <Grid x:Name="PART_Track">
                    <Grid x:Name="PART_Indicator" HorizontalAlignment="Left" Background="#FF2BA9FF">
                        <Polygon Points="0,20 20,0 20,20" Stroke="#FF0C0B0B" Fill="#FF0C0B0B" HorizontalAlignment="Right" />
                    </Grid>
                </Grid>
            </Border>
        </ControlTemplate>
    </Setter.Value>
</Setter>

每当Value == Maximum,你将不得不隐藏它,例如使用转换器。

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.