WPF+blend 如何制作 这种效果的倒计时器！

Question

用WPF写代码还是Blend里画？ Blend里怎么画呢？ = = 求高手。。

Answer 1

回2楼：具体的动画怎么做呢？ blend里有遮罩吗？

Answer 2

我只做过页面打开慢的时候的那种类似倒计时的动画，是在SL中用的。没有用过BLEND做过。网上搜索一下应该有不少例子的。

Answer 3

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
x:Class="WpfApplication12.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
<Storyboard x:Key="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ed:Arc.EndAngle)" Storyboard.TargetName="arc">
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</EventTrigger>
</Window.Triggers> <Grid x:Name="LayoutRoot">
<Ellipse Fill="#FFF7F7F7" Margin="83,80,251,72" Stroke="Black"/>
<ed:Arc x:Name="arc" ArcThickness="1" ArcThicknessUnit="Percent" EndAngle="0" Fill="#FF8F1D1D" Margin="112,109,279,96" Stretch="None" Stroke="Black" StartAngle="0"/>
</Grid>
</Window>

Answer 4

随意用代码画一下。要不到20行代码。
偏偏用这么垃圾的blend。
看看 blend的代码写的一踏糊涂。

Answer 5

还要用
http://schemas.microsoft.com/expression/2010/drawing
不是吧

Answer 6

public class Pie : Shape {
protected override System.Windows.Media.Geometry DefiningGeometry {
get {
StreamGeometry geometry = new StreamGeometry();
geometry.FillRule = FillRule.EvenOdd; using (StreamGeometryContext context = geometry.Open()) {
DrawGeometry(context);
} geometry.Freeze();
return geometry;
}
} private void DrawGeometry(StreamGeometryContext context) {
var startPoint = new Point(CenterX, CenterY);
var endPoint = GetEndPoint();
context.BeginFigure(startPoint, true, true);
context.LineTo(new Point(CenterX, CenterY - Radius), true, true);
context.ArcTo(endPoint, new Size(Radius, Radius), 0, Angle > 180, SweepDirection.Clockwise, true, true);
} private Point GetEndPoint() {
Point result = new Point();
double a = Angle / 180.0f * Math.PI;
result.X = CenterX + Radius * Math.Sin(a);
result.Y = CenterY - Radius * Math.Cos(a);
return result;
} protected override void OnRender(DrawingContext dc) {
//dc.DrawRectangle(Brushes.Yellow, null, new Rect(RenderSize));
base.OnRender(dc);
} public double Radius {
get { return (double)GetValue(RadiusProperty); }
set { SetValue(RadiusProperty, value); }
} public static readonly DependencyProperty RadiusProperty =
DependencyProperty.Register("Radius", typeof(double), typeof(Pie), new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsRender | FrameworkPropertyMetadataOptions.AffectsMeasure));
public double Angle {
get { return (double)GetValue(AngleProperty); }
set { SetValue(AngleProperty, value); }
} public static readonly DependencyProperty AngleProperty =
DependencyProperty.Register("Angle", typeof(double), typeof(Pie), new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsRender | FrameworkPropertyMetadataOptions.AffectsMeasure)); public double CenterX {
get { return (double)GetValue(CenterXProperty); }
set { SetValue(CenterXProperty, value); }
} public static readonly DependencyProperty CenterXProperty =
DependencyProperty.Register("CenterX", typeof(double), typeof(Pie), new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsRender | FrameworkPropertyMetadataOptions.AffectsMeasure));
public double CenterY {
get { return (double)GetValue(CenterYProperty); }
set { SetValue(CenterYProperty, value); }
} public static readonly DependencyProperty CenterYProperty =
DependencyProperty.Register("CenterY", typeof(double), typeof(Pie), new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsRender | FrameworkPropertyMetadataOptions.AffectsMeasure));
}[code=XML]
<Window x:Class="Test21.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Test21"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Ellipse Width="100" Height="100" Stroke="Black" />
        <local:Pie x:Name="pie" Angle="0" Fill="Yellow" HorizontalAlignment="Center" Width="100" Height="100" VerticalAlignment="Center" Stroke="Red" Radius="50" CenterX="50" CenterY="50" />
    </Grid>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="pie" Storyboard.TargetProperty="Angle" To="360" RepeatBehavior="Forever" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
</Window>
[/code]

Answer 7

用BLEND这个最多2分钟就能搞定

Answer 8

"http://schemas.microsoft.com/expression/2010/drawing"  是什么？ 

Answer 9

回8楼： blend里遮罩在哪里？ 怎么画？

Answer 10

你确定装了Blend？
在VS要要添加引用的 Microsoft.Expression.Drawing
路径：C:\Program Files (x86)\Microsoft SDKs\Expression\Blend\.NETFramework\v4.0\Libraries\Microsoft.Expression.Drawing.dll

Answer 11

回14楼： = = 它会显示 ed：Arc那个Arc 有错！ 

Answer 12

回10楼的大侠：local:Pie 老是显示错误 不知道为什么？ 

Answer 13

我就省略了一句...namespace Test12 {
public class Pie : Shape {
  ...
}
}把Pie放在Test12的名字空间下
那么在Xaml才能引用