Question

所以，我挑战自己在UWP制作虚拟钢琴。到目前为止，我已经设法制作基本UI，其中应放置键并使用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中，我创建了所需的ObservableCollection，这样我就可以在GridView中绑定声音，并且还为图像创建了单击事件，因此每按一次键都会播放一个音符。

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

时

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

我还删除了SoundManager.cs中黑键的声音，只留下白键的声音，app运行但显然钢琴中没有黑键。

我做错了什么？我似乎完全错误地接近了这个问题。那么，有没有办法像这样添加白键和黑键：Expectation and Currently

非常感谢任何帮助。

Answer 1

如果使用x：Bind，Source的{{1}}需要绑定到Image的属性而不是字符串，否则会抛出编译时错误。

我们应该可以在Sound类中使用BitmapImage代替BitmapImage。

例如：

string

如果要使用字符串类型绑定Image，我们可以使用Binding而不是x：Bind。我们不需要将字符串转换为BitmapImage，我们应该能够使用Image.Source来绑定字符串。

虚拟钢琴UWP C中的黑键实现＃

1 个答案: