使用XAML和C＃为Windows Phone 8 App构建自定义进度栏

Question

我正在尝试制作随时间减少的酒吧。

使用的xaml是

     <Grid x:Name="LayoutRoot" Background="Transparent">
      <TextBlock  Text="Timer :-" FontSize="35" Width="120" Height="70" Margin="138,167,222,531" ></TextBlock>
    <TextBlock x:Name="clock" FontSize="35" Width="100" Height="70" Margin="259,169,121,529" ></TextBlock>

    <Image x:Name="bar" Width="350" Height="20" Source="Assets/progress_bar_bg.png" Margin="65,271,65,477" ></Image>
    <Image x:Name="gbar"  Width="350" Height="20" Source="Assets/green_progress_bar.png" Margin="65,271,65,477" ></Image>

</Grid>

我的C＃代码是

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Navigation;
    using Microsoft.Phone.Controls;
    using System.Windows.Threading;
    using Microsoft.Phone.Shell;

    namespace PhoneApp1
    {
        public partial class ProgressBar : PhoneApplicationPage
        {
    public ProgressBar()
    {
        InitializeComponent();

        newTimer.Interval = TimeSpan.FromSeconds(1);
        newTimer.Tick += OnTimerTick;
        newTimer.Start();
        clock.Text = " 00:60";
    }

    DispatcherTimer newTimer = new DispatcherTimer();
    int counter = 60;

    int width = 350;
    double i=5.8;

    void OnTimerTick(Object sender, EventArgs args)
    {
        counter--;

        if (counter < 0)
        {
            newTimer.Stop();
            counter = 60;
        }
        else
        {


                gbar.Width = width - i;

                clock.Text = " 00:" + counter.ToString();
                i=i+5.8;

            }
        }
    }
}

我减小了宽度，以便应减小图像green_progress_bar.png的大小，但是问题是，随着时间从60秒减少到0秒，它希望从两端减小，我希望它应该从右向左减小。 而且高度也随着时间减少，我想固定图像高度。

这就是我的情况。

我希望条的宽度从右到左减小，但从两端开始减小。 请帮帮我。

提前致谢。

Answer 1

设置两个图像的HorizontalAlignment="Left" 。 默认情况下它是中心。

Answer 2

好的-这将是一篇很长的文章。 所以首先-结果：

我对您的代码进行了很多更改（IMO可能会有所改进）。 首先-滑块的样式（我已经切掉了大部分不需要的东西。可以在MSDN上或通过使用Blend找到完整的模板）：

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="SliderStyle1" TargetType="Slider">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Maximum" Value="10"/>
        <Setter Property="Minimum" Value="0"/>
        <Setter Property="Value" Value="0"/>
        <Setter Property="Background" Value="{StaticResource PhoneChromeBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Slider">
                    <Grid Background="Transparent">
                        <Grid x:Name="HorizontalTemplate" Margin="{StaticResource PhoneHorizontalMargin}">
                            <Rectangle x:Name="HorizontalTrack" Fill="{TemplateBinding Background}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50"/>
                            <Rectangle x:Name="HorizontalFill" Fill="GreenYellow" Height="12" IsHitTestVisible="False" Margin="0,22,0,50">
                                <Rectangle.Clip>
                                    <RectangleGeometry Rect="0, 0, 6, 12"/>
                                </Rectangle.Clip>
                            </Rectangle>
                            <Ellipse x:Name="HorizontalCenterElement" HorizontalAlignment="Left" Height="12" Margin="0,16,0,44" Width="12" Fill="GreenYellow">
                                <Ellipse.RenderTransform>
                                    <TranslateTransform/>
                                </Ellipse.RenderTransform>
                            </Ellipse>
                        </Grid>                            
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>

上面的代码中最重要的事情是： HorizontalTrack ， HorizontalFill和HorizontalCenterElement您可以更改颜色，形状等。 我已将centerelement设置为椭圆形，因此最后将其稍微弄圆了。 最好的是，如果您只是玩它。 使用样式是这样的：

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="6*"/>
        </Grid.RowDefinitions>
        <Button x:Name="buttonStart" VerticalAlignment="Top" Content="Start" Grid.Row="0"/>
        <TextBlock Name="clock" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding ClockText}" Grid.Row="1"/>
        <Slider Name="gbar" VerticalAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Stretch" 
                Grid.Row="2" Style="{StaticResource SliderStyle1}" IsHitTestVisible="False"
                Value="{Binding ValueLeft, Mode=TwoWay}" Maximum="{Binding MaxValue}"/>

    </Grid>
</Grid>

一些事情：

• 我更改了UIElement的内容，并将其绑定到实现INotifyPropertyChanged的属性
• 我已禁用Slider进行命中测试-因此用户将无法通过触摸来更改它

后面的其余代码：

public partial class MainPage : PhoneApplicationPage, INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public void RaiseProperty(string property = null)
    { if (this.PropertyChanged != null)                this.PropertyChanged(this, new PropertyChangedEventArgs(property)); }

    private TimeSpan timeLeft = TimeSpan.FromSeconds(60);
    public TimeSpan TimeLeft
    {
        get { return timeLeft; }
        set
        {
            timeLeft = value;
            RaiseProperty("ClockText");
            RaiseProperty("ValueLeft");
        }
    }

    public string ClockText { get { return timeLeft.ToString("m\\:ss"); } }

    public double ValueLeft { get { return TimeLeft.Ticks; } }

    private double maxValue = TimeSpan.FromSeconds(60).Ticks;
    public double MaxValue // number of seconds
    {
        get { return maxValue; }
        set
        {
            TimeLeft = TimeSpan.FromSeconds(value);
            maxValue = TimeLeft.Ticks;
            RaiseProperty("MaxValue");
        }
    }

    System.Threading.Timer newTimer;
    private bool timerStarted = false;

    public MainPage()
    {
        InitializeComponent();
        this.DataContext = this;
        newTimer = new Timer(OnTimerTick);
        buttonStart.Click += buttonStart_Click;
    }

    private void buttonStart_Click(object sender, RoutedEventArgs e)
    {
        if (!timerStarted)
        {
            buttonStart.Content = "STOP";
            MaxValue = 60;
            timerStarted = true;
            newTimer.Change(TimeSpan.FromSeconds(0), TimeSpan.FromSeconds(1)); // start timer right now and invoke every second
        }
        else
        {
            buttonStart.Content = "Start";
            timerStarted = false;
            newTimer.Change(0, Timeout.Infinite); // stop the timer
        }
    }

    void OnTimerTick(object state)
    { Dispatcher.BeginInvoke(() => TimeLeft -= TimeSpan.FromSeconds(1)); }
}

这里的几件事：

• 我已经组织了属性，以便现在当我更改TimeLeft时，TextBlock和Slider会更新-绑定
• 我已将DispatcherTimer更改为System.Threading.Timer-它在单独的线程上运行，因此不会阻塞UI（当会有更多计算时）
• 由于存在单独的线程，因此必须通过Dispatcher进行Callback（在UI上）内部的更改。

当您的间隔为1秒时，此示例肯定可以与DispatcherTimer一起使用，但是如果您打算执行更多计算，则第二个Timer可能是一个更好的选择。 （这只是另一种可能性）。

Answer 3

问题在于图像拉伸，可以通过Stretch="None"禁用它

<Image x:Name="gbar" Stretch="None" Width="350" Height="20" Source="Assets/green_progress_bar.png" />

另外，尽量不要使用Margin进行精确定位， Grid和StackPanel应该会有所帮助。

我不建议自己制作进度条，而是强烈建议为Microsoft ProgressBar控件上色/设计，就像我们在http://highrobotics.com/we-did-it/wpf-themes.aspx中所做的那样