android 中win10 使用uwp控件實(shí)現(xiàn)進(jìn)度條Marquez效果

更新時(shí)間：2017年06月15日 11:05:34 作者：lindexi_gd

這篇文章主要介紹了android 中win10 使用uwp控件實(shí)現(xiàn)進(jìn)度條Marquez效果,需要的朋友可以參考下

本文將告訴大家，如何做一個(gè)帶文字的進(jìn)度條，這個(gè)進(jìn)度條可以用在游戲，現(xiàn)在我做的掛機(jī)游戲就使用了他。

如何做上圖的效果，實(shí)際需要的是兩個(gè)控件，一個(gè)是顯示文字的 TextBlock 一個(gè)是進(jìn)度條。

那么如何讓文字和左邊的距離變化？使用 TranslateTransform

看起來(lái) Marquez 的界面就是：

 <ProgressBar x:Name="Mcdon" Maximum="100" Minimum="0" Value="20"
   VerticalAlignment="Stretch"></ProgressBar>
 <TextBlock x:Name="scrohn" Text="100/100"
   VerticalAlignment="Center">
  <TextBlock.RenderTransform>
  <TranslateTransform X="0"></TranslateTransform>
  </TextBlock.RenderTransform>
 </TextBlock>

進(jìn)度條的名字就是 Marquez ，寫完界面，后臺(tái)也不難

需要使用幾個(gè)依賴屬性設(shè)置最大值、當(dāng)前值、最小值

 /// <summary>
 /// 標(biāo)識(shí) <see cref="Maximum" /> 的依賴項(xiàng)屬性。
 /// </summary>
 public static readonly DependencyProperty MaximumProperty = DependencyProperty.Register(
  "Maximum", typeof(double), typeof(Marquez), new PropertyMetadata(100d, (s, e) =>
  {
  var t = s as Marquez;
  if (t == null)
  {
   return;
  }
  Scrhrentran(t.scrohn, t.ActualWidth, t.Value, (double) e.NewValue, t.Mcdon);
  }));
 /// <summary>
 /// 標(biāo)識(shí) <see cref="Minimum" /> 的依賴項(xiàng)屬性。
 /// </summary>
 public static readonly DependencyProperty MinimumProperty = DependencyProperty.Register(
  "Minimum", typeof(double), typeof(Marquez), new PropertyMetadata(default(double)));
 /// <summary>
 /// 標(biāo)識(shí) <see cref="Value" /> 的依賴項(xiàng)屬性。
 /// </summary>
 public static readonly DependencyProperty ValueProperty = DependencyProperty.Register(
  "Value", typeof(double), typeof(Marquez), new PropertyMetadata(20d, (s, e) =>
  {
  var t = s as Marquez;
  if (t == null)
  {
   return;
  }
  Scrhrentran(t.scrohn, t.ActualWidth, (double) e.NewValue, t.Maximum, t.Mcdon);
  }));
 /// <summary>
 /// 獲取或設(shè)置
 /// </summary>
 public double Value
 {
  get { return (double) GetValue(ValueProperty); }
  set { SetValue(ValueProperty, value); }
 }
 /// <summary>
 /// 獲取或設(shè)置最小值
 /// </summary>
 public double Minimum
 {
  get { return (double) GetValue(MinimumProperty); }
  set { SetValue(MinimumProperty, value); }
 }
 /// <summary>
 /// 獲取或設(shè)置最大值
 /// </summary>
 public double Maximum
 {
  get { return (double) GetValue(MaximumProperty); }
  set { SetValue(MaximumProperty, value); }
 }

所有值變化時(shí)，需要修改文字和進(jìn)度條，因?yàn)檫M(jìn)度條沒(méi)有綁定值到代碼，Scrhrentran 函數(shù)修改所有值。

為什么不使用綁定，因?yàn)榻壎ㄈ菀字貜?fù)，而且有些值不是簡(jiǎn)單綁定就可以，這個(gè)控件使用綁定還是可以做到，如果自己感興趣，可以修改他綁定。

從屬性可以看到，值變化自動(dòng)調(diào)用 Scrhrentran 于是函數(shù)需要修改進(jìn)度條的值，修改進(jìn)度條很簡(jiǎn)單，只需要使用下面代碼

 private static void Scrhrentran(TextBlock scrohn, double w, double v, double t, ProgressBar mcdon)
  {
   mcdon.Value = v;
   mcdon.Maximum = t;
  }

可以看到，上面的代碼沒(méi)修改最小值，因?yàn)樽钚≈禌](méi)有在依賴屬性寫，我不寫最小值因?yàn)槲蚁胫v下如何獲得依賴屬性修改。

依賴屬性是很好用的，他自己就帶了綁定，如果想用綁定，那么可以使用依賴屬性，依賴屬性可以使用 dep 和tab打出來(lái)，一般的依賴屬性是比較長(zhǎng)的，最小值用的就是 vs 自帶的依賴屬性，也就是經(jīng)常這樣寫。

/// <summary>
 /// 標(biāo)識(shí) Minimum 的依賴項(xiàng)屬性。
 /// </summary>
 public static readonly DependencyProperty MinimumProperty = DependencyProperty.Register(
  "Minimum", typeof(double), typeof(Marquez), new PropertyMetadata(default(double)));
  /// <summary>
 /// 獲取或設(shè)置最小值
 /// </summary>
 public double Minimum
 {
  get { return (double) GetValue(MinimumProperty); }
  set { SetValue(MinimumProperty, value); }
 }

實(shí)際依賴屬性是上面的靜態(tài)屬性，他使用了注冊(cè)，注冊(cè)的第一個(gè)參數(shù)表示變量的名字，因?yàn)槭亲约荷傻?，就是字符串，但是字符串有?wèn)題，如果我修改了 Minimum 名稱，那么字符串就無(wú)法使用，為了在修改名稱可以使用，我建議使用 nameof 這個(gè)可以獲得變量名稱。

其中第二個(gè)參數(shù)是類型，第三個(gè)是類，這個(gè)參數(shù)指定是哪個(gè)類，如果復(fù)制了別人的依賴屬性，容易出錯(cuò)，因?yàn)樗念悰](méi)有修改為自己的類。最后一個(gè)屬性是指定默認(rèn)值，在這個(gè)屬性可以指定屬性修改時(shí)的函數(shù)。

 public static readonly DependencyProperty MinimumProperty = DependencyProperty.Register(
  "Minimum", typeof(double), typeof(Marquez), new PropertyMetadata(default(double), (s, e) =>
  {
  } ));

現(xiàn)在就可以在里面寫屬性修改的函數(shù)，第一個(gè)參數(shù) s 是哪個(gè)觸發(fā)，也就是 Marquez ，使用第一個(gè)參數(shù)就可以獲得 Marquez，第二個(gè)參數(shù)是獲得之前的值和當(dāng)前的值，通過(guò)e.NewValue可以獲得修改后的值。

但是不可以通過(guò)這個(gè)函數(shù)修改 e.NewValue 的值。

于是這個(gè)控件比較難的地方就是修改文字，下面來(lái)開(kāi)始做這部分。

顯示文字可以使用下面代碼

 scrohn.Text = v.ToString("F") + "/" + t.ToString("F");

可以看到，只看代碼是不知道 v 是什么， t 是什么，所以在命名時(shí)最好不要這樣寫，建議寫為 value 和 maximum，這樣看代碼就可以知道兩個(gè)值。

修改文字之前，判斷RenderTransform

 var sc = scrohn.RenderTransform as TranslateTransform;

在value為最大值，文字顯示在中間，于是文字最大的就是 w / 2 ，w就是控件寬度。但是還需要乘以現(xiàn)在的 v / t

于是算法就是 sc.X = w / 2 * v / t ，但是因?yàn)槲淖钟袑挾龋@示的是文字左邊，所以需要減去文字，但是可能讓文字在控件看不到，因?yàn)閟c.X < 0，于是代碼就是

 sc.X = w / 2 * v / t - scrohn.ActualWidth / 2;
  if (sc.X < 0)
  {
   sc.X = 0;
  }

總的代碼放在github：https://github.com/lindexi/UWP/tree/master/uwp/control/Progress

以上所述是小編給大家介紹的android 中win10 使用uwp控件實(shí)現(xiàn)進(jìn)度條Marquez效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: