Merge pull request #214963 from jowang-msft/jowang-msft/managecallupdate1

Update native call how-to docs

Author: v-stsavell

articles/communication-services/how-tos/calling-sdk/includes/install-sdk/install-sdk-windows.md

@@ -9,16 +9,17 @@ ms.author: rifox
 
 ### Creating the Visual Studio project
 
-In Visual Studio 2019, create a new `Blank App (Universal Windows)` project. After entering the project name, feel free to pick any Windows SDK greater than `10.0.17134`. 
+For UWP app, in Visual Studio 2019, create a new `Blank App (Universal Windows)` project. After entering the project name, feel free to pick any Windows SDK greater than `10.0.17134`. 
 
+For WinUI 3 app, create a new project with the `Blank App, Packaged (WinUI 3 in Desktop)` template to set up a single-page WinUI 3 app. [Windows App SDK version 1.2 preview 2](https://learn.microsoft.com/windows/apps/windows-app-sdk/preview-channel#version-12-preview-2-120-preview2) and above is required.
 ### Install the package and dependencies with NuGet Package Manager
 
-Tha Calling SDK APIs and libraries are publicly available via a NuGet package.
+The Calling SDK APIs and libraries are publicly available via a NuGet package.
 The following steps exemplify how to find, download, and install the Calling SDK NuGet package.
 
 1. Open NuGet Package Manager (`Tools` -> `NuGet Package Manager` -> `Manage NuGet Packages for Solution`)
 2. Click on `Browse` and then type `Azure.Communication.Calling` in the search box.
 3. Make sure that `Include prerelease` check box is selected.
-4. Click on the `Azure.Communication.Calling` package.
+4. Click on the `Azure.Communication.Calling` package, select `Azure.Communication.Calling` [1.0.0-beta.33](https://www.nuget.org/packages/Azure.Communication.Calling/1.0.0-beta.33) or newer version.
 5. Select the checkbox corresponding to the CS project on the right-side tab.
 6. Click on the `Install` button.

articles/communication-services/how-tos/calling-sdk/includes/manage-calls/manage-calls-windows.md

@@ -2,7 +2,7 @@
 author: probableprime
 ms.service: azure-communication-services
 ms.topic: include
-ms.date: 09/08/2021
+ms.date: 10/16/2022
 ms.author: rifox
 ---
 [!INCLUDE [Install SDK](../install-sdk/install-sdk-windows.md)]
@@ -21,57 +21,42 @@ he following steps exemplify how to achieve that.
 This simple sample app will contain two buttons. One for placing the call and another to hang up a placed call.
 The following steps exemplify how to add these buttons to the app.
 
-1. In the `Solution Explorer` panel, double click on the file named `MainPage.xaml`.
+1. In the `Solution Explorer` panel, double click on the file named `MainPage.xaml` for UWP, or `MainWindows.xaml` for WinUI 3.
 2. In the central panel, look for the XAML code under the UI preview.
-3. Replace the `<Grid>` to `</Grid>` XAML code by the following excerpt:
+3. Modify the XAML code by the following excerpt:
 ```xml
-<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
-    <Button x:Name="callButton" Click="CallHandler" Margin="10,10,10,10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">Call</Button>
-    <Button x:Name="hangupButton" Click="HangupHandler" Margin="10,10,10,10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">Hang up</Button>
+<TextBox x:Name="CalleeTextBox" Text="Who would you like to call?" TextWrapping="Wrap" VerticalAlignment="Center" Grid.Row="0" Height="40" Margin="10,10,10,10" />
+<StackPanel Orientation="Horizontal">
+    <Button x:Name="CallButton" Content="Start Call" Click="CallButton_Click" VerticalAlignment="Center" Margin="10,0,0,0" Height="40" Width="200"/>
+    <Button x:Name="HangupButton" Content="Hang Up" Click="HangupButton_Click" VerticalAlignment="Center" Margin="10,0,0,0" Height="40" Width="200"/>
 </StackPanel>
 ```
 
-### Register Video Handler
-
-An UI component, like XAML's MediaElement, will require the app registering a configuration for rendering local and remote video feeds.
-Please add the following content between the `Package` tags of the `Package.appxmanifest`:
-
-```xml
-<Extensions>
-    <Extension Category="windows.activatableClass.inProcessServer">
-        <InProcessServer>
-            <Path>RtmMvrUap.dll</Path>
-            <ActivatableClass ActivatableClassId="VideoN.VideoSchemeHandler" ThreadingModel="both" />
-        </InProcessServer>
-    </Extension>
-</Extensions>
-```
-
 ### Setting up the app with Calling SDK APIs
 
 The Calling SDK APIs are in two different namespaces.
 The following steps inform the C# compiler about these namespaces allowing Visual Studio's Intellisense to assist with code development.
 
-1. In the `Solution Explorer` panel, click on the arrow on the left side of the file named `MainPage.xaml`.
-2. Double click on file named `MainPage.xaml.cs` which showed up.
+1. In the `Solution Explorer` panel, click on the arrow on the left side of the file named `MainPage.xaml` for UWP, or `MainWindows.xaml` for WinUI 3.
+2. Double click on file named `MainPage.xaml.cs` or `MainWindows.xaml.cs`.
 3. Add the following commands at the bottom of the current `using` statements.
 
 ```csharp
 using Azure.Communication;
 using Azure.Communication.Calling;
 ```
 
-Please keep `MainPage.xaml.cs` open. The next steps will add more code to it.
+Please keep `MainPage.xaml.cs` or `MainWindows.xaml.cs` open. The next steps will add more code to it.
 
 ## Allow app interactions
 
-The UI buttons previously added need to operate on top of a placed `Call`. It means that a `Call` data member should be added to the `MainPage` class.
+The UI buttons previously added need to operate on top of a placed `Call`. It means that a `Call` data member should be added to the `MainPage` or `MainWindow` class.
 Additionally, to allow the asynchronous operation creating `CallAgent` to succeed, a `CallAgent` data member should also be added to the same class.
 
-Please add the following data members to the `MainPage` class:
+Please add the following data members to the `MainPage` pr `MainWindow` class:
 ```csharp
-CallAgent agent_;
-Call call_;
+CallAgent callAgent;
+Call call;
 ```
 
 ## Create button handlers
@@ -80,12 +65,14 @@ Previously, two UI buttons were added to the XAML code. The following code adds
 The following code should be added after the data members from the previous section.
 
 ```csharp
-private void CallHandler(object sender, RoutedEventArgs e)
+private async void CallButton_Click(object sender, RoutedEventArgs e)
 {
+    // Start call
 }
 
-private void HangupHandler(object sender, RoutedEventArgs e)
+private async void HangupButton_Click(object sender, RoutedEventArgs e)
 {
+    // End the current call
 }
 ```
 
@@ -108,28 +95,22 @@ To create a `CallAgent` instance from `CallClient` you must use `CallClient.Crea
 
 To create `CallAgent`, you must pass a `CommunicationTokenCredential` object and a `CallAgentOptions` object. Keep in mind that `CommunicationTokenCredential` throws if a malformed token is passed.
 
-The following code should be added inside `CallHandler`.
+The following code should be added inside and helper function to be called in app initialization.
 
 ```csharp
-CallClient client = new CallClient();
-CommunicationTokenCredential credentials;
+var callClient = new CallClient();
+this.deviceManager = await callClient.GetDeviceManager();
 
-CallAgentOptions callAgentOptions = new CallAgentOptions
+var tokenCredential = new CommunicationTokenCredential("<AUTHENTICATION_TOKEN>");
+var callAgentOptions = new CallAgentOptions()
 {
-  DisplayName = "<CALLER NAME>"
+    DisplayName = "<DISPLAY_NAME>"
 };
 
-try
-{
-    credentials = new CommunicationTokenCredential("<CREDENTIAL TOKEN>");
-}
-catch (Exception)
-{
-    throw new Exception("Invalid credential token");
-}
+this.callAgent = await callClient.CreateCallAgent(tokenCredential, callAgentOptions);
 ```
 
-`<USER ACCESS TOKEN>` must be replaced by a valid credential token for your resource. Refer to the [user access token](../../../../quickstarts/access-tokens.md) documentation if a credential token has to be sourced.
+`<AUTHENTICATION_TOKEN>` must be replaced by a valid credential token for your resource. Refer to the [user access token](../../../../quickstarts/access-tokens.md) documentation if a credential token has to be sourced.
 
 ## Create CallAgent and place a call
 
@@ -138,34 +119,27 @@ The objects needed for creating a `CallAgent` are now ready. It is time to async
 The following code should be added after handling the exception from the previous step.
 
 ```csharp
-client.CreateCallAgent(creds, callAgentOptions).Completed +=
-async (IAsyncOperation<CallAgent> asyncInfo, AsyncStatus asyncStatus) =>
-{
-    agent_ = asyncInfo.GetResults();
+var startCallOptions = new StartCallOptions();
 
-    CommunicationUserIdentifier target = new CommunicationUserIdentifier("<CALLEE>");
+var callees = new ICommunicationIdentifier[1] { new CommunicationUserIdentifier(CalleeTextBox.Text.Trim()) };
 
-    StartCallOptions startCallOptions = new StartCallOptions();
-    call_ = await agent_.StartCallAsync(new List<ICommunicationIdentifier>() { target }, startCallOptions);
-};
+this.call = await this.callAgent.StartCallAsync(callees, startCallOptions);
+this.call.OnStateChanged += Call_OnStateChangedAsync;
 ```
 
-Replace `<CALLEE>` with any other identity from your tenant. Alternatively, feel free to use `8:echo123` to talk to the Azure Communication Services echo bot.
+Feel free to use `8:echo123` to talk to the Azure Communication Services echo bot.
 
 ## End a call
 
-Once a call is placed, the `Hangup` method of the `Call` object should be used to hang up the call.
+Once a call is placed, the `HangupAsync` method of the `Call` object should be used to hang up the call.
 
 An instance of `HangupOptions` should also be used to inform if the call must be terminated to all its participants.
 
-The following code should be added inside `HangupHandler`.
+The following code should be added inside `HangupButton_Click`.
 
 ```csharp
-HangUpOptions hangupOptions = new HangUpOptions();
-call_.HangUpAsync(hangupOptions).Completed += (IAsyncAction asyncInfo, AsyncStatus asyncStatus) =>
-{
-
-};
+this.call.OnStateChanged -= Call_OnStateChangedAsync;
+await this.call.HangUpAsync(new HangUpOptions());
 ```
 
 ## Run the code