好的 - 这将是一个很长的帖子。所以首先 - 结果：
我在您的代码中进行了很多更改（IMO 某些事情可能会有所改进）。首先 - Slider 的样式（我已经删除了大部分不需要的东西。完整的模板可以在 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——你可以改变颜色、形状等等。我已经将中心元素设置为椭圆，所以它在最后有点圆润。如果你只是玩它，那就最好了。使用样式如下：
<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 的属性
- 我已禁用 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（当有更多计算时）
- 由于该单独的线程，回调内部的更改（在 UI 上）必须通过 Dispatcher 进行。
当您的间隔为 1 秒时，此示例肯定适用于 DispatcherTimer，但如果您计划执行更多计算，则第二个 Timer 可能是更好的选择。 （这只是一种不同的可能性）。