android 中win10 使用uwp控件實現(xiàn)進度條Marquez效果
本文將告訴大家,如何做一個帶文字的進度條,這個進度條可以用在游戲,現(xiàn)在我做的掛機游戲就使用了他。
如何做上圖的效果,實際需要的是兩個控件,一個是顯示文字 的 TextBlock 一個是進度條。
那么如何讓 文字和左邊的距離變化?使用 TranslateTransform
看起來 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>
進度條的名字就是 Marquez ,寫完界面,后臺也不難
需要使用幾個依賴屬性設(shè)置最大值、當(dāng)前值、最小值
/// <summary> /// 標(biāo)識 <see cref="Maximum" /> 的依賴項屬性。 /// </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)識 <see cref="Minimum" /> 的依賴項屬性。 /// </summary> public static readonly DependencyProperty MinimumProperty = DependencyProperty.Register( "Minimum", typeof(double), typeof(Marquez), new PropertyMetadata(default(double))); /// <summary> /// 標(biāo)識 <see cref="Value" /> 的依賴項屬性。 /// </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); } }
所有值變化時,需要修改文字和進度條,因為進度條沒有綁定值到代碼,Scrhrentran 函數(shù)修改所有值。
為什么不使用綁定,因為綁定容易重復(fù),而且有些值不是簡單綁定就可以,這個控件使用綁定還是可以做到,如果自己感興趣,可以修改他綁定。
從屬性可以看到,值變化自動調(diào)用 Scrhrentran 于是函數(shù)需要修改進度條的值,修改進度條很簡單,只需要使用下面代碼
private static void Scrhrentran(TextBlock scrohn, double w, double v, double t, ProgressBar mcdon) { mcdon.Value = v; mcdon.Maximum = t; }
可以看到,上面的代碼沒修改最小值,因為最小值沒有在依賴屬性寫,我不寫最小值因為我想講下如何獲得依賴屬性修改。
依賴屬性是很好用的,他自己就帶了綁定,如果想用綁定,那么可以使用依賴屬性,依賴屬性可以使用 dep 和tab打出來,一般的依賴屬性是比較長的,最小值用的就是 vs 自帶的依賴屬性,也就是經(jīng)常這樣寫。
/// <summary> /// 標(biāo)識 Minimum 的依賴項屬性。 /// </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); } }
實際依賴屬性是上面的靜態(tài)屬性,他使用了注冊,注冊的第一個參數(shù)表示變量的名字,因為是自己生成的,就是字符串,但是字符串有問題,如果我修改了 Minimum 名稱,那么字符串就無法使用,為了在修改名稱可以使用,我建議使用 nameof 這個可以獲得變量名稱。
其中第二個參數(shù)是 類型,第三個是類,這個參數(shù)指定是哪個類,如果復(fù)制了別人的 依賴屬性,容易出錯,因為他的類沒有修改為自己的類。最后一個屬性是指定默認值,在這個屬性可以指定屬性修改時的函數(shù)。
public static readonly DependencyProperty MinimumProperty = DependencyProperty.Register( "Minimum", typeof(double), typeof(Marquez), new PropertyMetadata(default(double), (s, e) => { } ));
現(xiàn)在就可以在里面寫屬性修改的函數(shù),第一個參數(shù) s 是哪個觸發(fā),也就是 Marquez ,使用第一個參數(shù)就可以獲得 Marquez,第二個參數(shù)是獲得之前的值和當(dāng)前的值,通過e.NewValue可以獲得修改后的值。
但是不可以通過這個函數(shù)修改 e.NewValue 的值。
于是這個控件比較難的地方就是修改文字,下面來開始做這部分。
顯示文字可以使用下面代碼
scrohn.Text = v.ToString("F") + "/" + t.ToString("F");
可以看到,只看代碼是不知道 v 是什么, t 是什么,所以在命名時最好不要這樣寫,建議寫為 value 和 maximum,這樣看代碼就可以知道兩個值。
修改文字之前,判斷RenderTransform
var sc = scrohn.RenderTransform as TranslateTransform;
在value為最大值,文字顯示在中間,于是文字最大的就是 w / 2 ,w就是控件寬度。但是還需要乘以現(xiàn)在的 v / t
于是算法就是 sc.X = w / 2 * v / t ,但是因為文字有寬度,顯示的是文字左邊,所以需要減去文字,但是可能讓文字在控件看不到,因為sc.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控件實現(xiàn)進度條Marquez效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Android使用CountDownTimer實現(xiàn)倒計時效果
這篇文章主要為大家詳細介紹了Android使用CountDownTimer實現(xiàn)倒計時效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-09Android MVP模式ListView中嵌入checkBox的使用方法
這篇文章主要介紹了Android MVP模式ListView中嵌入checkBox的使用方法,如何在ListView中嵌入checkBox配合使用,感興趣的小伙伴們可以參考一下2016-08-08Android RecyclerView添加FootView和HeadView
這篇文章主要介紹了Android RecyclerView添加FootView和HeadView的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10Android開發(fā)實現(xiàn)去除bitmap無用白色邊框的方法示例
這篇文章主要介紹了Android開發(fā)實現(xiàn)去除bitmap無用白色邊框的方法,結(jié)合實例形式給出了Android去除bitmap無用白色邊框的具體操作步驟與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-11-11Android?Flutter實現(xiàn)彈簧動畫交互的示例詳解
物理模擬可以讓應(yīng)用程序的交互感覺逼真和互動,本文章實現(xiàn)了演示了如何使用彈簧模擬將小部件從拖動的點移回中心,感興趣的可以了解一下2023-04-04Android socket實現(xiàn)原理詳解 服務(wù)端和客戶端如何搭建
這篇文章主要為大家詳細介紹了Android socket實現(xiàn)原理詳解,以及服務(wù)端和客戶端的搭建方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08