Bing Service Into UWP App Using UWP Community Toolkit

Introduction

This article is divided into two sections. The first part explains about the installation of UWP Service Tool kit while the second part explains about integrating Bing service into the application.

Install the UWP Service
Integrate Bing Service into main application

Install the UWP Toolkit

UWP Community Toolkit is a collection of helper functions, custom controls, and app services. It simplifies and demonstrates common developer tasks building UWP apps.

More info available here.

Adding helper reference into our project.

Steps

Create a new project (ex: Toolkit)
Right click -> Manage NuGet Packages
Search “Microsoft.Toolkit.Uwp”
Select the “Microsoft.Toolkit.Uwp.Services” & Install

Bing Service - Below are major classes and functions used to get the Bing Search records

BingSearchConfig
BingService
BingService.Instance.RequestAsync

BingSearchConfig class is used to configure the query , BingService class is used to connect to the Bing server, BingService.Instance.RequestAsync function is used to request to the Bing server to get the searched data.

var searchConfig = new BingSearchConfig
{
Query = "Vinoth",
Country = BingCountry.India
};
BingService.Instance.RequestAsync(searchConfig, 30);

Note - Country property is used to query search based on the country & Bing supported country list is available in BingCountry Enum. We will see a simple example, and search the same keywords at a time in two different countries.

Code sample

//To Load Bing supported country list
private void LoadCountry()
{
var lstCountry = new List<string>();
for (int i = (int)BingCountry.UnitedArabEmirates; i < (int) BingCountry.SouthAfrica; i++)
{
var item = (BingCountry) i;
lstCountry.Add(item.ToString());
}
Cblang.ItemsSource = lstCountry;
Cblang.SelectedIndex = 0;
}

//Search query
private async Task<List<BingResult>> LoadSearch(string searchText,string selCountry)
{
if (Cblang.SelectedItem != null)
{
var searchConfig = new BingSearchConfig
{
Query = searchText
};
BingCountry bingCountry = (BingCountry)Enum.Parse(typeof(BingCountry), selCountry, true);
searchConfig.Country = bingCountry;
return await BingService.Instance.RequestAsync(searchConfig, 30);
}
return null;
}

private async void BtnSearch_OnClick(object sender, RoutedEventArgs e)
{
if (Cblang.SelectedItem != null)
{
var selCountry = Cblang.SelectedItem.ToString();
//Country Based Search
ListView.ItemsSource = await LoadSearch(TxtSearch.Text, selCountry);
//Default search query based on India
ListView1.ItemsSource = await LoadSearch(TxtSearch.Text, "India");
}
}

Xaml Code

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="85*"/>
</Grid.RowDefinitions>
<StackPanel>
<StackPanel>
<TextBlock Text="Search"/>
<TextBox x:Name="TxtSearch" PlaceholderText="Type keyword and Start Search"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Language"/>
<ComboBox x:Name="Cblang"></ComboBox>
<Button x:Name="BtnSearch" Content="Search" Click="BtnSearch_OnClick"></Button>
</StackPanel>
</StackPanel>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ListView x:Name="ListView" Grid.Column="0">
<ListView.ItemTemplate>
<DataTemplate x:DataType="bing:BingResult">
<Grid Margin="0,5,10,5">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="{x:Bind Title}" Grid.Row="0" Grid.Column="0" FontWeight="Bold" TextTrimming="CharacterEllipsis"></TextBlock>
<TextBlock Text="{x:Bind Published}" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right"/>
<TextBlock Text="{x:Bind Summary}" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" TextWrapping="Wrap"></TextBlock>
<HyperlinkButton Content="{x:Bind Link}" NavigateUri="{x:Bind Link}" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"></HyperlinkButton>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView x:Name="ListView1" Grid.Column="1">
<ListView.ItemTemplate>
<DataTemplate x:DataType="bing:BingResult">
<Grid Margin="0,5,10,5">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="{x:Bind Title}" Grid.Row="0" Grid.Column="0" FontWeight="Bold" TextTrimming="CharacterEllipsis"></TextBlock>
<TextBlock Text="{x:Bind Published}" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right"/>
<TextBlock Text="{x:Bind Summary}" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" TextWrapping="Wrap"></TextBlock>
<HyperlinkButton Content="{x:Bind Link}" NavigateUri="{x:Bind Link}" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"></HyperlinkButton>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Grid>

Output : We are searching the same keyword in two different countries and we get two different outputs based on the country.

Mobile

The above code is just an example. Hope you enjoyed and understood it.