虛擬鋼琴UWP C中的黑鍵實現＃

Question

因此，我挑戰自己在UWP中製作虛擬鋼琴。我已經管理到現在，使基本的用戶界面，其中應放置鍵和使用DataBinding我生成所有的白鍵。

我有2個班。 Sound.cs和SoundManager.cs

在Sounds.cs中，我製作了一個重載構造函數，因此我可以定義名稱，顏色，黑色或白色圖像以及音符的音頻文件。

class Sound 
{ 
    public string Name { get; set; } 
    public string AudioFile { get; set; } 
    public string WhiteImage { get; set; } 
    public string BlackImage { get; set; } 
    public KeyColor Color { get; set; } 

    public Sound(string name, KeyColor color) 
    { 
     Name = name; 
     Color = color; 

     if(color == KeyColor.Black) 
     { 
      BlackImage = string.Format("/Assets/Images/{0}.png", color); 
      AudioFile = string.Format("/Assets/Audio/{0}.wav", name); 
     } 
     else if (color == KeyColor.White) 
     { 
      WhiteImage = string.Format("/Assets/Images/{0}.png", color); 
      AudioFile = string.Format("/Assets/Audio/{0}.wav", name); 
     } 

    } 
} 

public enum KeyColor 
{ 
    Black, 
    White 
} 

在SoundManager.cs我有一個名爲中，我在列表中添加的所有筆記的白鍵和黑鍵以及getSounds方法。

class SoundManager 
{ 

    public static void getSounds(ObservableCollection<Sound> sounds) 
    { 
     var allSounds = WhiteSounds(); 
     sounds.Clear(); 
     allSounds.ForEach(p => sounds.Add(p)); 
    } 


    private static List<Sound> getSounds() 
    { 
     var sounds = new List<Sound>(); 

     sounds.Add(new Sound("C1", KeyColor.White)); 
     sounds.Add(new Sound("C#1", KeyColor.Black)); 
     sounds.Add(new Sound("D1", KeyColor.White)); 
     sounds.Add(new Sound("D#1", KeyColor.Black)); 
     sounds.Add(new Sound("E1", KeyColor.White)); 
     sounds.Add(new Sound("F1", KeyColor.White)); 
     sounds.Add(new Sound("F#1", KeyColor.Black)); 
     sounds.Add(new Sound("G1", KeyColor.White)); 
     sounds.Add(new Sound("G#1", KeyColor.Black)); 
     sounds.Add(new Sound("A1", KeyColor.White)); 
     sounds.Add(new Sound("A#1", KeyColor.Black)); 
     sounds.Add(new Sound("B1", KeyColor.White)); 

     return sounds; 
    }  
} 

在MainPage.xaml我做了GridView，它將顯示所有的可點擊圖像的註釋。

<GridView Grid.Row="1" 
          Grid.RowSpan="2" 
          Name="SoundGridView" 
          SelectionMode="None" 
          ItemClick="SoundGridView_ItemClick" 
          IsItemClickEnabled="True" 
          ItemsSource="{x:Bind Sounds}" 
          ScrollViewer.VerticalScrollMode="Disabled" 
          ScrollViewer.HorizontalScrollMode="Auto" 
          ScrollViewer.HorizontalScrollBarVisibility="Auto" Margin="0,32,32,0" 
          > 

        <GridView.ItemsPanel> 
         <ItemsPanelTemplate> 
          <ItemsWrapGrid Orientation="Vertical"/> 
         </ItemsPanelTemplate> 
        </GridView.ItemsPanel> 


        <GridView.ItemTemplate > 

         <DataTemplate x:DataType="data:Sound"> 
          <RelativePanel> 
           <StackPanel MinHeight="150" MinWidth="50" Margin="0,0,-12,0" MaxHeight="700" Orientation="Horizontal" > 
            <Image x:Name="WhiteKeys" Stretch="Fill" MinHeight="150" MinWidth="50" Source="{x:Bind WhiteImage}"/> 
           </StackPanel> 
           <StackPanel> 
            <Image x:Name="BlackKeys" Stretch="Fill" MinHeight="100" MinWidth="25" Source="{x:Bind BlackImage}"/> 
           </StackPanel> 
          </RelativePanel>         
         </DataTemplate> 
        </GridView.ItemTemplate> 
       </GridView> 

在MainPage.xaml.cs中我做了這是需要這樣我就可以可以綁定聲音在GridView和也我做了圖片的點擊事件的ObservableCollection，所以每當你按下一個音符演奏鍵。

public sealed partial class MainPage : Page 
{ 

    private ObservableCollection<Sound> Sounds;  


    public MainPage() 
    { 
     this.InitializeComponent(); 
     Sounds = new ObservableCollection<Sound>(); 
     SoundManager.GetWhiteSounds(Sounds); 

    }   

    private void SoundGridView_ItemClick(object sender, ItemClickEventArgs e) 
    { 
     var sound = (Sound)e.ClickedItem; 
     MyMediaElement.Source = new Uri(this.BaseUri, sound.AudioFile); 
    } 
} 

所以，我到目前爲止的問題是，當我嘗試在RelativePanel上添加黑鍵時，它不會運行。它拋出我這個樣子Exception Image

不過的厚望，當我刪除從相對面板

       <StackPanel> 
            <Image x:Name="BlackKeys" Stretch="Fill" MinHeight="150" MinWidth="50" Source="{x:Bind BlackImage}"/> 
           </StackPanel> 

有黑鍵的形象，也是我刪除的聲音在黑鍵的StackPanel SoundManager.cs，只留下白鍵的聲音，應用程序運行，但顯然，鋼琴中沒有黑鍵。

我在做什麼錯？看來我正在接近完全錯誤的問題。那麼，有沒有辦法像這樣添加白色和黑色鍵：Expectation and Currently

任何幫助將不勝感激。

Answer 1

如果使用x：綁定，Image的Source需要綁定到BitmapImage的屬性而不是字符串，否則會引發編譯時錯誤。

我們應該可以在Sound類中使用BitmapImage而不是string。

例如：

internal class Sound 
{ 
    public string Name { get; set; } 
    public string AudioFile { get; set; } 
    public BitmapImage WhiteImage { get; set; } 
    public BitmapImage BlackImage { get; set; } 
    public KeyColor Color { get; set; } 

    public Sound(string name, KeyColor color) 
    { 
     Name = name; 
     Color = color; 

     if (color == KeyColor.Black) 
     { 
      BlackImage = new BitmapImage(new Uri("ms-appx:///Assets/Images/Black.png")); 
      AudioFile = string.Format("ms-appx:///Assets/Audio/22.wav", name); 
     } 
     else if (color == KeyColor.White) 
     { 
      WhiteImage = new BitmapImage(new Uri("ms-appx:///Assets/Images/White.PNG")); 
      AudioFile = string.Format("ms-appx:///Assets/Audio/11.wav", name); 
     } 
    } 
} 

public enum KeyColor 
{ 
    Black, 
    White 
} 

如果你想使用字符串類型綁定的圖片，我們可以使用綁定的，而不是X：綁定。我們不需要將字符串轉換爲BitmapImage，我們應該可以使用Image.Source來綁定字符串。