使用XAML和C#为Windows phone 8 App构建自定义进度条
zap*_*p92 5 c# wpf xaml windows-phone-8
我想做一个随时间减少的酒吧.
使用的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秒而从右向左缩小.并且高度也随着时间的推移而减少我希望图像高度是固定的.
这是我案件中发生的事情的形象.
我希望条的宽度从右到左减小.但它从两端减少.请帮帮我.
提前致谢.
好吧——这将是一篇很长的文章。所以首先 - 结果：
我对你的代码做了很多改变（我认为有些事情可能会得到改进）。首先 - 滑块的样式（我已经删除了您的目的不需要的大部分内容。您可以在 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>
一些事情：
- 我更改了 UIElements 的内容并将它们绑定到实现 INotifyPropertyChanged 的属性
- 我已禁用滑块进行命中测试 - 因此用户将无法通过触摸来更改它
后面的其余代码：
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（当会有更多计算时）
- 由于该单独的线程，回调内（在 UI 上）的更改必须通过 Dispatcher 进行。
当您的间隔为 1 秒时，此示例肯定可以DispatcherTimer正常工作，但如果您计划执行更多计算，第二个计时器可能是更好的选择。（这只是一种不同的可能性）。