毛玻璃效果

產品實現上模仿計算器的毛玻璃，效果較為微弱避免干擾主要資訊閱讀效果。該套效果僅適用於WIN10，實現步驟：

①前端初始Grid層加入兩個層

第一個Grid用於實現毛玻璃效果

第二個Grid用於展示介面資訊，背景RGB為220，220，220

<Page>
  <Grid>
     <Grid x:Name="BlurLayer"/>     
     <Grid Background="#D8FFFFFF">
       <TextBlock Text="Hello World"/>
     </Grid>
  </Grid>
</Page>
 

②後端定義毛玻璃效果實現方法

private void BlurInitialize(UIElement blurLayer)
        {
            Visual hostVisual = ElementCompositionPreview.GetElementVisual(blurLayer);
            Compositor compositor = hostVisual.Compositor;
            var backdropBrush = compositor.CreateHostBackdropBrush();
            var glassVisual = compositor.CreateSpriteVisual();
            glassVisual.Brush = backdropBrush;
            ElementCompositionPreview.SetElementChildVisual(blurLayer, glassVisual);
            var bindSizeAnimation = compositor.CreateExpressionAnimation("hostVisual.Size");
            bindSizeAnimation.SetReferenceParameter("hostVisual", hostVisual);
            glassVisual.StartAnimation("Size", bindSizeAnimation);
        }
 

③專案初始化後加載毛玻璃效果

  public MainPage()
   {
    this.InitializeComponent();
    CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true; //將Grid區域覆蓋到頂部標題頭
    var view = ApplicationView.GetForCurrentView();
    view.TitleBar.ButtonBackgroundColor = Colors.Transparent; //將右上角縮小、放大、關閉鍵的背景設為透明
    view.TitleBar.ButtonInactiveBackgroundColor = Colors.Transparent; //失去焦點時將右上角縮小、放大、關閉鍵的背景設為透明
    BlurInitialize(BlurLayer); //指定Grid載入毛玻璃效果
   }
 

其他控制元件用VS自帶的屬性手動設定即可。完成基本佈局後，下一步就是對列表資料進行初始化

選擇框

<ComboBox x:Name="WebSelect" SelectionChanged="WebSelect_SelectionChanged"/>

①後端加入指定資料

foreach (string i in webList) WebSelect.Items.Add(i);

②選中指定資料

WebSelect.SelectedIndex = 0;

③選中項發生變化後可能會調整一些資料。有個坑是SelectedIndex會觸發SelectionChanged事件，如果頁面有多個選擇框，SelectionChanged事件加入如下邏輯可避免相互關聯的選擇框初始化時，另一個選中值為空導致的異常

if (WebSelect.SelectedValue != null && OhterSelect.SelectedValue != null)

文字框

①TextBox輸入時內容下方可能會出現紅色波浪線，如果不需要則在對應元素上加入IsSpellCheckEnabled="False" 

②修改文字框值：text.Text = "Data processing";

圖片

<Image x:Name="ResultIcon"  Source="../Assets/Success.png"/>

①產品中按鈕執行完畢後如果成功為笑臉，失敗為震驚。它們取自不同的圖片（圖片地址寫法是微軟上看到的格式，我把圖片預設放到它自帶的Assets中）

BitmapImage image = new BitmapImage();
image.UriSource = new Uri("ms-appx:/Assets/Success.png", UriKind.RelativeOrAbsolute);
ResultIcon.Source = image;

資料繫結

<TextBlock Text="{x:Bind m.countryNum, Mode=TwoWay}"/>

繫結可以方便的同步前後端對應資料項的值，Mode包括：

OneTime：一次

OneWay：資料來源作用於目標屬性，但目標屬性不作用於資料來源

TwoWay：雙向

使用這個功能時天真地以為XAML加入Bind後系統就能自動完成資料同步，但還需要委託或通知才行

①繼承INotifyPropertyChanged，重寫一個泛類可以讓未來Viewmodel有欄位擴增時直接使用一個通用方法

 public abstract class NotifyPropertyChangedBase : INotifyPropertyChanged
        {
            public event PropertyChangedEventHandler PropertyChanged;

            protected async void OnPropertyChanged([CallerMemberName] string propName = "")
            {
                await Window.Current.Dispatcher.RunAsync(CoreDispatcherPriority.High, () => { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName)); });
            }
        }

②ViewModel繼承通知並在屬性改變時進行通知

public ViewModel : NotifyPropertyChangedBase
{
private string _game = string.Empty;
public string game { get { return _game; } set { if (value != _game) { _game = value; OnPropertyChanged(); } } }
}