将进度条扭转90度

时间：2011-10-26 11:44:17

标签： c# wpf progress-bar

我正在申请能量流动。我想用进度条显示能量流动。我需要在某个时刻转动进度条并且仍然不断地流动。有没有办法将进度条上的一个点旋转90度？例如L形。

知道如何去做吗？

3 个答案:

答案 0 :(得分：3)

好的，我完成了。所以编辑这个页面。我想这就是你需要的。

创建一个新的WPF项目并进行编辑。

Xaml代码MainWindow.xaml：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:WpfApplication1"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <my:PointConverter x:Key="PointConverter" />
        <Storyboard x:Key="Storyboard1" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(RangeBase.Value)" Storyboard.TargetName="progress">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="100"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <ProgressBar Name="progress" Width="200" Height="200" Value="100">
            <ProgressBar.Template>
                <ControlTemplate TargetType="{x:Type ProgressBar}">
                    <Rectangle Fill="#FF1FFF00"/>
                </ControlTemplate>
            </ProgressBar.Template>
            <ProgressBar.Clip>
                <PathGeometry>
                    <PathFigure StartPoint="{Binding ElementName=progress, Path=Value, Converter={StaticResource PointConverter}, ConverterParameter=1}">
                        <LineSegment Point="{Binding ElementName=progress, Path=Value, Converter={StaticResource PointConverter}, ConverterParameter=2}"/>
                        <LineSegment Point="{Binding ElementName=progress, Path=Value, Converter={StaticResource PointConverter}, ConverterParameter=3}"/>
                        <LineSegment Point="{Binding ElementName=progress, Path=Value, Converter={StaticResource PointConverter}, ConverterParameter=4}"/>
                        <LineSegment Point="{Binding ElementName=progress, Path=Value, Converter={StaticResource PointConverter}, ConverterParameter=5}"/>
                        <LineSegment Point="{Binding ElementName=progress, Path=Value, Converter={StaticResource PointConverter}, ConverterParameter=6}"/>
                    </PathFigure>
                </PathGeometry>
            </ProgressBar.Clip>
        </ProgressBar>
    </Grid>
</Window>

将此类添加到MainWindow.xaml.cs文件中：

public class PointConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        try
        {
            double val = (double)value;
            int num = int.Parse("" + parameter);
            if (num == 1)
            {
                if (val < 50) return new Point(200 - val * 4, 200);
                else return new Point(0, 200 - (val - 50) * 4);
            }
            else if (num == 2)
            {
                if (val < 50) return new Point(200 - val * 4, 200);
                else return new Point(0, 200);
            }
            else if (num == 3)
            {
                return new Point(200, 200);
            }
            else if (num == 4)
            {
                return new Point(200, 100);
            }
            else if (num == 5)
            {
                if (val < 25) return new Point(200 - val * 4, 100);
                else return new Point(100, 100);
            }
            else if (num == 6)
            {
                if (val < 25) return new Point(200 - val * 4, 100);
                else if (val < 75) return new Point(100, 100);
                else return new Point(100, 200 - (val - 50) * 4);
            }
        }
        catch { }

        return new Point();
    }

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

答案 1 :(得分：1)

我创建了一个带有混合的简单动画：一个L形路径和一个DoubleKeyFrame动画，它会改变GradientStop偏移，使L看起来像是被填充。

通过一些额外的努力，您还可以旋转画笔，使其路径跟随弯曲abd，您获得更好的填充效果。动画在框架Loaded Event上触发，并且出于演示原因永远重复。

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="WpfApplication.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">

  <Window.Resources>
    <Storyboard x:Key="Storyboard1">
      <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.StartPoint)" Storyboard.TargetName="ColorFill">
        <EasingPointKeyFrame KeyTime="0" Value="0.025,0.954"/>
      </PointAnimationUsingKeyFrames>
      <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.EndPoint)" Storyboard.TargetName="ColorFill">
        <EasingPointKeyFrame KeyTime="0" Value="0.97,0.004"/>
      </PointAnimationUsingKeyFrames>
      <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="ColorFill">
        <EasingColorKeyFrame KeyTime="0" Value="White"/>
      </ColorAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="ColorFill">
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.046"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.11"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.184"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.251"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.343"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.445"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.542"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.65"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0.798"/>
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.897"/>
        <EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="0.969"/>
        <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
  </Window.Resources>
  <Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
      <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
    </EventTrigger>
  </Window.Triggers>

  <Grid x:Name="LayoutRoot" Margin="0,0,-195.6,-162">
    <Path Data="M105.8,91" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="1" Margin="105.8,91,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="1"/>
    <Path x:Name="ColorFill" Data="M187.2,0.5 L234.4,0.5 C242.07676,0.5 248.3,6.7232418 248.3,14.399999 L248.3,187.2 248.3,234.39999 C248.3,234.87979 248.2757,235.35391 248.22824,235.82118 248.18079,236.28847 248.11018,236.7489 248.0176,237.20132 247.92503,237.65376 247.81046,238.09818 247.67509,238.53343 247.53971,238.96867 247.38351,239.39476 247.20767,239.8105 247.03183,240.22624 246.83633,240.63165 246.62235,241.02556 246.40836,241.41946 246.1759,241.80188 245.9261,242.17162 245.67631,242.54137 245.40919,242.89844 245.12592,243.24168 244.84264,243.58493 244.54321,243.91435&#xa;244.22878,244.22878 243.91436,244.54321 243.58494,244.84264 243.24169,245.12592 242.89845,245.40919 242.54137,245.6763 242.17162,245.9261 241.80188,246.17589 241.41947,246.40836 241.02557,246.62234 240.63166,246.83633 240.22625,247.03183 239.81051,247.20767 239.39477,247.38351 238.96869,247.5397 238.53343,247.67508 238.09818,247.81046 237.65376,247.92502 237.20134,248.01761 236.74891,248.11018 236.28847,248.18079 235.82119,248.22824 235.35392,248.2757&#xa;234.8798,248.3 234.4,248.3 L187.2,248.3 14.400009,248.3 C6.7232513,248.3 0.5,242.07675 0.5,234.39999 L0.5,187.2 C0.5,179.52324 6.7232513,173.3 14.400009,173.3 L173.3,173.3 173.3,14.399999 C173.3,6.7232418 179.52324,0.5 187.2,0.5 z" HorizontalAlignment="Left" Margin="-5.4,267.4,0,89.8" RenderTransformOrigin="0.847266882902349,0.499999993867046" Stretch="Fill" Stroke="Black" Width="248.8">
      <Path.Fill>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
          <GradientStop Color="Green" Offset="0"/>
          <GradientStop Color="White" Offset="1"/>
        </LinearGradientBrush>
      </Path.Fill>

      <Path.RenderTransform>
        <TransformGroup>
          <ScaleTransform/>
          <SkewTransform/>
          <RotateTransform Angle="90"/>
          <TranslateTransform/>
        </TransformGroup>
      </Path.RenderTransform>
    </Path>
  </Grid>
</Window>

答案 2 :(得分：0)

这可以使用VisualBrush来完成。

可能需要一段时间才能做到正确，但我会按如下方式处理：

  1. 添加一个ProgressBar，根据需要连接

  2. 使用VisualBrush，引用ProgressBar作为其Visual，设置基于Path的不透明蒙版，大小足以覆盖左半部分ProgressBar（用渐变混合或-45度对角线右手边缘）绘制'L形条'的水平部分

  3. 使用第二个VisualBrush，同时引用ProgressBar作为其Visual，设置基于Path的不透明蒙版，大到足以覆盖右半部分ProgressBar（带有渐变混合或45度对角线左手边缘），绘制'L形条'的垂直部分

相关问题
最新问题