One of my favorite UWP applications is Ambie<\/a>, an open source, white-noise sound application built by one of my colleagues, Daniel Paulino<\/a>:<\/p>\n Ambie is an awesome app, so let’s try to imitate it!<\/p>\n What if instead of soothing atmospheric noises and a level of iterative polish, Ambie had obnoxious animal noises and was built in 30 minutes?<\/p>\n As simple as this demo app is, it shows some cool things you can do right away with UWP:<\/p>\n Before we’re ready to crash course through making our soundboard, we have to get a few things set up.<\/p>\n If you’re not on a Windows 10\/11 machine, you can download a VM with an already set up development environment here.<\/a><\/p>\n To setup the dev environment on your Windows 10\/11 machine, let’s download and set up Visual Studio. You can follow a guide to get set up on Windows here.<\/a><\/p>\n Once you have Visual Studio installed, go ahead and launch it. At the start screen, select “Create a new project.”<\/p>\n This will take you to a list of templates, go ahead and search for “UWP” and then select “Blank App (Universal Windows).”<\/p>\n Now go ahead and create your project!<\/p>\n If you’re brand new to UWP and XAML, I highly recommend checking out this Getting Started With UWP<\/a> guide. It will walk you through how to get started building UWP applications.<\/p>\n Additionally, you can check out the Github repository<\/a> for this project. It contains all of the code, split out into different parts and commented thoroughly.<\/p>\n Now, let’s hop into the specifics of how this app was built.<\/p>\n A Visual Studio UWP application comes with a whole set of files that allows your application to be installed and launched properly from the get go, but for now, you can find all of the code we are covering in just two files:<\/p>\n Together, these two files make up our Let’s take a look at the core elements that make up the MainPage of our Soundboard app:<\/p>\n First, in MainPage.xaml<\/strong>, we’re using GridView control that will dynamically display our sounds:<\/p>\n GridView controls have an These Great, we have the look of our soundboard, but now we need some functionality. Let’s add a click listener function to our GridView’s Our click listener calls two different functions depending on whether or not Text-To-Speech mode is enabled. The first plays audio from a file:<\/p>\n While the second uses the Sweet! That’s the core functionality of our soundboard. You can check out the rest of the code that makes it all come together on the github repository<\/a>.<\/p>\n Check out the documentation for MediaPlayerElement here<\/a> and the documentation for SpeechSynthesizer here<\/a> if you want to play with these APIs a bit more.<\/p>\n Get out there and start building your own Windows apps!<\/p>\n Here are some links to check out with resources on building for UWP:<\/p>\n Thanks for tuning in! Feel free to reach out on my socials linked above if you have any questions.<\/p>\n","protected":false},"excerpt":{"rendered":" This article walks through getting setup with Universal Windows Platform development and showcases how to build a fun Soundboard starter application.<\/p>\n","protected":false},"author":73101,"featured_media":208,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[5,8],"class_list":["post-432","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ifdef-windows","tag-uwp","tag-windows"],"acf":[],"blog_post_summary":" This article walks through getting setup with Universal Windows Platform development and showcases how to build a fun Soundboard starter application.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/ifdef-windows\/wp-json\/wp\/v2\/posts\/432","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/ifdef-windows\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/ifdef-windows\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ifdef-windows\/wp-json\/wp\/v2\/users\/73101"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ifdef-windows\/wp-json\/wp\/v2\/comments?post=432"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/ifdef-windows\/wp-json\/wp\/v2\/posts\/432\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ifdef-windows\/wp-json\/wp\/v2\/media\/208"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/ifdef-windows\/wp-json\/wp\/v2\/media?parent=432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ifdef-windows\/wp-json\/wp\/v2\/categories?post=432"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/ifdef-windows\/wp-json\/wp\/v2\/tags?post=432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/devblogs.microsoft.com\/ifdef-windows\/wp-content\/uploads\/sites\/61\/2021\/10\/Ambie.png\")
<\/p>\nUWP Animal Soundboard<\/h2>\n
![\"\"](\"https:\/\/devblogs.microsoft.com\/ifdef-windows\/wp-content\/uploads\/sites\/61\/2021\/10\/AnimalSoundboard.png\")
<\/p>\n\n
Getting Started<\/h2>\n
Setting Up Your Development Environment<\/h3>\n
Creating a Blank UWP App<\/h3>\n
Resources<\/h3>\n
So what makes this soundboard tick?<\/h2>\n
\n
MainPage<\/code> class. When you run your app (by clicking the little green arrow at the top of Visual Studio), it will automatically navigate to this page.<\/p>\n<GridView x:Name=\"SoundView\"\r\n ItemsSource=\"{x:Bind Sounds}\"\r\n ItemTemplate=\"{StaticResource SoundTemplate}\"\r\n IsItemClickEnabled=\"True\"\r\n ItemClick=\"SoundItemClick\"\r\n SelectionMode=\"Single\"\/><\/code><\/pre>\nItemsSource<\/code> property that allows us to send it a whole collection of items to display. Our GridView’s ItemSource<\/code> is bound to an ObservableCollection<\/code> that’s declared in our code-behind MainPage.xaml.cs<\/strong> file:<\/p>\npublic ObservableCollection<SoundItem> Sounds { get; set; }<\/code><\/pre>\nObservableCollections<\/code> are “observable” by the UI, that is, if the collection changes, so will the UI. Awesome! Our ObservableCollection<\/code> is a collection of SoundItems<\/code>:<\/p>\npublic class SoundItem\r\n{\r\n public string AudioFilename { get; set; }\r\n public string PreviewText { get; set; }\r\n public string TextToSpeech { get; set; }\r\n\r\n public SoundItem(string audio, string prev, string tts)\r\n {\r\n this.AudioFilename = audio;\r\n this.PreviewText = prev;\r\n this.TextToSpeech = tts;\r\n }\r\n}<\/code><\/pre>\nSoundItem<\/code> objects store the data that will be consumed by our GridView to display our sound items. But wait, how does it know how<\/em> to display them? That’s where we provide a DataTemplate<\/code> to our GridViews ItemTemplate<\/code> property:<\/p>\n<Page.Resources>\r\n <DataTemplate x:Key=\"SoundTemplate\" x:DataType=\"local:SoundItem\">\r\n <Border Background=\"White\" Height=\"200\" Width=\"200\" Margin=\"10,10,10,10\" CornerRadius=\"30\">\r\n <TextBlock FontSize=\"50\" VerticalAlignment=\"Center\" HorizontalAlignment=\"Center\" Text=\"{x:Bind PreviewText}\"\/>\r\n <\/Border>\r\n <\/DataTemplate>\r\n<\/Page.Resources> <\/code><\/pre>\nItemClick<\/code> property:<\/p>\nprivate void SoundItemClick(object sender, ItemClickEventArgs e)\r\n{\r\n SoundItem currentSoundItem = e.ClickedItem as SoundItem;\r\n if (this.IsTextToSpeech)\r\n {\r\n this.ReadTextToSpeech(currentSoundItem);\r\n }\r\n else\r\n {\r\n this.PlaySoundItem(currentSoundItem);\r\n }\r\n}<\/code><\/pre>\nprivate async void PlaySoundItem(SoundItem sound)\r\n{\r\n MediaPlayerElement mediaPlayerElement = new MediaPlayerElement();\r\n Windows.Storage.StorageFolder folder = await Windows.ApplicationModel.Package.Current.InstalledLocation.GetFolderAsync(\"Assets\");\r\n Windows.Storage.StorageFile file = await folder.GetFileAsync(sound.AudioFilename);\r\n mediaPlayerElement.Source = MediaSource.CreateFromStorageFile(file);\r\n mediaPlayerElement.MediaPlayer.Play();\r\n\r\n}<\/code><\/pre>\nSpeechSynthesizer<\/code> API to play some text-to-speech audio:<\/p>\nprivate async void ReadTextToSpeech(SoundItem sound)\r\n{\r\n MediaPlayerElement mediaPlayerElement = new MediaPlayerElement();\r\n var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();\r\n synth.Options.SpeakingRate = .7;\r\n Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync(sound.TextToSpeech);\r\n mediaPlayerElement.Source = MediaSource.CreateFromStream(stream, stream.ContentType);\r\n mediaPlayerElement.MediaPlayer.Play();\r\n}<\/code><\/pre>\nNext Steps<\/h2>\n
\n