Textbox | Engin Polat\'ın Windows 8 , Windows Phone 8 ve C# içerikli programcılık sitesi

Arşiv

Etiketlenen yazılar textbox

Windows 10 UWP uygulamalarında TTS için Speech Synthesis kullanımı

10 March 2016 Yorum yapılmamış

Uygulamalarımıza TTS (text-to-speech, yani yazıdan-sese) özelliği ekleyerek belirlediğimiz metinlerin sese dönüştürülmesini sağlayabiliriz.

Windows 8.1 ve Windows Phone 8.1 zamanından beri kullanımımıza açık olan SpeechSynthesis namespace‘i aracılığıyla uygulamamıza TTS desteği ekleyebiliriz.

Hemen yeni bir proje oluşturarak kodlamaya başlayalım;

MainPage.xaml dosyasını açarak sese dönüştürmek istediğimiz metni yazabileceğimiz bir TextBox, bir de Button nesnesi ekleyelim.

Bir metnin sese dönüştürülerek okunması için uygulamamıza ses dosyalarını oynatabilecek bir nesne eklememiz yeterlidir. Bunu için MainPage.xaml dosyasına bir tane de MediaElement nesnesi ekleyelim.

<Page
	x:Class="SpeechSynthesisOrnek.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:SpeechSynthesisOrnek">

	<StackPanel Margin="20">
		<TextBox x:Name="Cumle" Header="Söylenecek Cümle" />
		<Button Content="Söyle" Click="Button_Click" />

		<MediaElement x:Name="mediaElement" />
	</StackPanel>

</Page>

Böylece uygulamanın başlangıç ekranı aşağıdaki gibi gözükmeli;

MainPage.xaml.cs dosyasında Button_Click() methodu aracılığıyla, butona tıklandığında yapılacak işleri yazıyoruz;

private async void Button_Click(object sender, RoutedEventArgs e)
{
	var synth = new SpeechSynthesizer();
	var synthStream = await synth.SynthesizeTextToStreamAsync(Cumle.Text);
	mediaElement.SetSource(synthStream, synthStream.ContentType);
}

Bu methodun içerisinde öncelikle SpeechSynthesizer sınıfından yeni bir değişken oluşturduk.

SynthesizeTextToStreamAsync() methoduna okunmasını istediğimiz metni string tipinde parametre olarak verdik ve geri dönen SpeechSynthesisStream tipindeki cevabı bir değişkene atadık.

Son olarak, ekranda yeralan MediaElement nesnesinin SetSource() methoduna SpeechSynthesisStream tipindeki değişkenimizi parametre olarak vererek, oluşan sesin oynatılmasını sağladık.

Böylece, ekrandaki TextBox nesnesine yazılan cümle, Button nesnesine tıklandığında uygulama tarafından okunacak ve bizler de duyabileceğiz.

Windows 10 UWP uygulamasında Log için Slack kullanmak

22 February 2016 Yorum yapılmamış

Bu makaleyi okumadan önce Windows 10 UWP uygulamasında {x:Bind} kullanarak basit DataBinding makalesini okumanızı tavsiye ederim.

Slack, http://www.slack.com adresinde hizmet veren, son yılların en başarılı uygulamalarından birisi. Kendi sitelerinde yazana göre;

Slack is a messaging app for teams that is on a mission to make your working life simpler, more pleasant, and more productive

Geçen hafta aldığım çok ilginç bir email‘de bir uygulamada loglama için Slack kullanabilir miyiz? sorusu vardı.

Bu makalede Windows 10 UWP uygulamasında Slack entegrasyonu yapacağız, fakat aynı yöntemler ile rahatlıkla bir web uygulamasında veya web service‘inde aynı entegrasyon kurulabilir.

Öncelikle Slack üzerinde ücretsiz olarak bir hesap, hesabı oluşturduktan sonra yeni bir Channel oluşturmamız gerekiyor. Örneğin SlackLoggerApp-Logs isimli bir channel oluşturmak için;

Yeni bir public channel oluşturunca Slack sayfasında aşağıdaki gibi bir mesaj gözükmeli;

Got it! butonuna tıkladığımızda bizi channel‘in sayfasına yönlendirmeli;

https://{hesap}.slack.com/apps/build/custom-integration adresine giderek yazacağımız uygulamanın entegre olacağı Slack web servisini oluşturuyoruz. Bunun için Incoming WebHooks seçeneğini seçerek ilerlememiz lazım;

Gelen ekranda uygulamamızı geliştirirken ihtiyaç duyacağımız tüm bilgiler yer alıyor. Özellikle Webhook URL ve Sending Messages alanındaki bilgilere kesinlikle ihtiyacımız olacak;

Bu noktaya geldikten sonra Visual Studio‘yu açalım ve yeni bir Blank App (Universal App) projesi oluşturalım;

Projeyi oluşturduktan sonra MainPage.xaml dosyasını açalım ve aşağıdaki kodları yazalım;

<Page
	x:Class="SlackLogger.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:SlackLogger">

	<StackPanel Background="#1abc9c" Padding="10">
		<TextBox Header="Adınız" Margin="5" BorderBrush="Transparent" Text="{x:Bind FirstName, Mode=TwoWay}" />
		<TextBox Header="Soyadınız" Margin="5" BorderBrush="Transparent" Text="{x:Bind LastName, Mode=TwoWay}" />
		<TextBox Header="EMail Adresiniz" Margin="5" BorderBrush="Transparent" Text="{x:Bind EMail, Mode=TwoWay}" />
		<TextBox Header="Mesajınız" Margin="5" Height="300" BorderBrush="Transparent" Text="{x:Bind MessageBody, Mode=TwoWay}" />
		<Button Content="Gönder" Margin="5" Height="40" HorizontalAlignment="Stretch" Click="{x:Bind Send}" />
	</StackPanel>

</Page>

Önce bir StackPanel nesnesi oluşturduk, içerisine 4 adet Textbox 1 adet Button nesnesi ekledik.

Textbox nesnelerinin Header özelliklerine verdiğimiz değerler ile birer başlığa sahip olmalarını sağladık.

BorderBrush özelliklerine verdiğimiz Transparent değer sayesinde çerçevelerin gözükmemesini sağladık.

Son olarak, Text özelliklerine ve Click olayına {x:Bind} tipinde değerler vererek Databinding yapıyoruz. Burada önemli olan nokta, Textbox‘ların Text özelliklerine yaptığımız Databinding‘de Mode özelliğine TwoWay değerini vererek, iki yönlü Databinding yapmak. Böylece ekranda bir değer değiştirildiği zaman Databinding yapıldığı property‘nin değeri otomatik olarak güncellenecek.

Böylece çalıştırdığımızda aşağıdaki gibi gözüken bir uygulama elde edeceğiz;

Databinding için FirstName, LastName, EMail ve MessageBody property‘lerini, ayrıca Send() methodunu yazmamız lazım. MainPage.xaml.cs dosyasını açalım ve aşağıdaki kodları ekleyelim;

public string FirstName { get; set; }
public string LastName { get; set; }
public string EMail { get; set; }
public string MessageBody { get; set; }

private async void Send()
{
	var client = new HttpClient();

	var payload = "{\"text\": \"" + FirstName + " " + LastName + "(" + EMail + ") : " + MessageBody + "\"}";

	await client.PostAsync(new Uri("https://hooks.slack.com/services/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"), new HttpStringContent(payload));
}

Böylece Gönder butonuna basıldığında Slack‘te oluşturduğumuz public channel‘ın web service‘ine istediğimiz bilgiyi gönderebileceğiz. Bu makaledeki örnekte Ad Soyad (EMail) : Message formatında bilgiyi Windows.Web.Http namespace‘i altında yeralan HttpClient sınıfının PostAsync() methoduna HttpStringContent tipinde gönderiyoruz.

Gönder butonuna bastığımızda, Slack, aşağıdaki notification‘ı gösterecek;

Eğer Slack‘teki public channel‘ın sayfasını açacak olursak, orada da mesajı görebileceğiz;

Windows 10 UWP Uygulamalarında InkCanvas ile imza almak

10 February 2016 2 yorum

Geçen hafta email ile aldığım bir soruyu cevaplamak üzere bu makaleyi yazıyorum.

Windows 10 UWP uygulamalarında eğer kullanıcının imzasını ekran üzerinde almak isterseniz InkCanvas sınıfını kullanabilirsiniz.

Hemen Visual Studio açıp yeni bir proje oluşturarak nasıl yapabileceğimizi inceleyelim;

Öncelikle MainPage.xaml dosyasını açalım ve içerisini aşağıdaki gibi değiştirerek, ekran tasarımımızı yapalım;

<Page
	x:Class="InkCanvasOrnek.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:InkCanvasOrnek">

	<Grid Background="#f1c40f" Padding="20">
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
			<RowDefinition Height="Auto" />
		</Grid.RowDefinitions>

		<TextBox Header="Adınız" Grid.Row="0" />
		<TextBox Header="Soyadınız" Grid.Row="1" />
		<TextBlock Text="İmzanız" Margin="0, 4, 0, 8 " Grid.Row="2" />
		<InkCanvas x:Name="ink" Grid.Row="3" />
		<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Content="Kaydet" Padding="10" Grid.Row="4" />
	</Grid>

</Page>

Eğer uygulamamızı Windows 10 Mobile Emulator‘ünde açacak olursak aşağıdaki gibi gözükmeli;

Dokunmatik ekran ve Mouse ile InkCanvas‘ın kullanılabilmesi için MainPage.xaml.cs dosyasında bulunan constructor‘da InkPresenter property‘sinde yeralan InputDeviceTypes özelliğine CoreInputDeviceTypes enum’ında bulunan Mouse ve Touch değerlerini aşağıdaki şekilde eklememiz gerekli;

ink.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Touch;

Böylece uygulamada imza atmak için bir boşluk oluşturmuş olduk;

Eğer istersek, InkCanvas sınıfının InkPresenter property’sinde yeralan UpdateDefaultDrawingAttributes() methoduna yeni bir InkDrawingAttributes sınıfından değişken tanımlayabilir ve InkCanvas üzerine yapılan çizimlerin kalemini değiştirebiliriz;

var attr = new InkDrawingAttributes();
attr.Color = Colors.Red;
attr.PenTip = PenTipShape.Circle;
attr.Size = new Size(3, 18);
ink.InkPresenter.UpdateDefaultDrawingAttributes(attr);

Not : Taklit etmeye çalıştığım Picasso‘nun çok bilinen imzası aşağıdaki gibidir, ne dersiniz, benzetebilmiş miyim?

Windows Phone ekrandaki formu temizleme

12 August 2013 Yorum yapılmamış

Windows Phone için geliştirdiğiniz uygulamaya bir form eklediniz ve çok fazla giriş kutusu var (TextBox, PasswordBox, CheckBox, vs.)

Ekleyeceğiniz Temizle butonu aracılığıyla ekrandaki tüm giriş kutularını temizlemek istiyorsunuz. Page şablonunun varsayılan halinde yeralan LayoutRoot isimli Grid üzerinden temizleme yapabilirsiniz;

foreach (var element in LayoutRoot.Children)
{
	if (element is TextBox)
	{
		(element as TextBox).Text = "";
	}
}

Fakat tasarımına uymamasından dolayı LayoutRoot isimli Grid ekranda olmayabilir ve daha genel bir yöntemle tüm giriş kutularını temizlemek isteyebilirsiniz.

Aşağıdaki gibi bir kendini çağıran fonksiyon (recursive function) aracılığıyla bu işi yaptırabilirsiniz;

private void ClearTextbox(DependencyObject element)
{
	var elementChildCount = VisualTreeHelper.GetChildrenCount(element);

	if (elementChildCount > 0)
	{
		for (var iLoop = 0; iLoop < elementChildCount; iLoop++)
		{
			var innerElement = VisualTreeHelper.GetChild(element, iLoop);

			if (innerElement is TextBox)
			{
				(innerElement as TextBox).Text = "";
			}
			else
			{
				ClearTextbox(innerElement);
			}
		}
	}
}

VisualTreeHelper sınıfının static GetChildrenCount() methodu ile ilgili nesnenin içinde başka bir nesne olup olmadığını kontrol ediyoruz, eğer nesne başka nesne içeriyorsa, döngü aracılığı ile dönerek GetChild() methodu sayesinde her elemanı buluyoruz.

Bulduğumuz nesne eğer bir TextBox ise, basitçe Text özelliğini boşaltıyoruz, değilse fonksiyonu tekrar çağırıp elde ettiğimiz nesneyi veriyoruz. Böylece her nesnenin içerdiği elemanları teker teker bulup içeriklerini temizleyebiliyoruz.

Kullanmak için;

private void TemizleButton_OnClick(object sender, RoutedEventArgs e)
{
	ClearTextbox(this);
}

Windows Phone için Bing arama uygulaması

02 August 2013 1 yorum

Windows Phone uygulamamıza internetten arama özelliği eklememiz gerektiği durumda, Bing arama motorunun API desteği olduğu için bunu yapabilmemiz çok zor olmayacaktır.

Windows Azure Markeplace üzerinden erişebileceğiniz Bing Search API – Web Results Only API sayfasından Bing Web Search API kullanım bilgilerine erişebiliriz, gerekli yetkiyi alabiliriz.

İlk olarak Sign In linkine tıklayarak oturum açalım ve aylık 5000 aramayı ücretsiz yapabilmemize olanak sağlayacak Sign Up butonuna tıklayarak gerekli yetkiyi alalım.

Sign Up butonuna tıkladığınızda ekrana sözleşme şartlarını kabul etmenizi sağlayacak bir ekran gelecek. Basitçe ileri-ileri diyerek geçebileceğiniz ekranlardan sonra aylık 5000 aramayı ücretsiz yapabileceğiniz yetkiyi almış olacaksınız.

Gelelim Windows Phone 8 projemize;

MainPage.xaml dosyasını açarak tasarımı aşağıdaki gibi olacak şekilde değiştirelim;

<phone:PhoneApplicationPage
	x:Class="BingSearchSample.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	FontFamily="{StaticResource PhoneFontFamilyNormal}"
	FontSize="{StaticResource PhoneFontSizeNormal}"
	Foreground="{StaticResource PhoneForegroundBrush}"
	SupportedOrientations="Portrait" Orientation="Portrait"
	shell:SystemTray.IsVisible="True">

	<StackPanel>
		<StackPanel Orientation="Horizontal" Margin="10,0,0,0">
			<Image Source="/Assets/bing-logo.png" Width="120" Height="45" />
			<TextBox Name="SearchKey" Width="350" InputScope="Search" KeyUp="SearchKey_OnKeyUp" />
		</StackPanel>

		<phone:LongListSelector Name="SearchResultList" Height="655" SelectionChanged="SearchResultList_OnSelectionChanged">
			<phone:LongListSelector.ItemTemplate>
				<DataTemplate>
					<StackPanel Margin="0,0,0,30">
						<TextBlock Text="{Binding Title}" Style="{StaticResource PhoneTextTitle2Style}" />
						<TextBlock Text="{Binding Description}" Style="{StaticResource PhoneTextSmallStyle}" TextWrapping="Wrap" />
						<TextBlock Text="{Binding DisplayUrl}" Style="{StaticResource PhoneTextAccentStyle}" />
					</StackPanel>
				</DataTemplate>
			</phone:LongListSelector.ItemTemplate>
		</phone:LongListSelector>
	</StackPanel>

	<phone:PhoneApplicationPage.ApplicationBar>
		<shell:ApplicationBar>
			<shell:ApplicationBarIconButton IconUri="/Assets/feature.search.png" Text="ara" Click="SearchButton_OnClick"></shell:ApplicationBarIconButton>
		</shell:ApplicationBar>
	</phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>

Bir StackPanel içerisine Bing logosu ve arama kelimesinin girileceği TextBox nesnesini ekliyoruz;

<StackPanel Orientation="Horizontal" Margin="10,0,0,0">
	<Image Source="/Assets/bing-logo.png" Width="120" Height="45" />
	<TextBox Name="SearchKey" Width="350" InputScope="Search" KeyUp="SearchKey_OnKeyUp" />
</StackPanel>

SearchKey isimli TextBox nesnesinin InputScope özelliğine Search değerini veriyoruz, böylece TextBox‘a giriş yaparken klavye’de arama butonu gözüküyor olacak;

Sayfaya ApplicationBar, içerisine de ApplicationBarIconButton ekliyoruz, icon olarak feature.search.png dosyasını kullanacağız.

SDK ile birlikte bilgisayarınıza yüklenen örnek icon‘lara aşağıdaki yol ile ulaşabilirsiniz;

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons

Arama kutusuna kelime girerken arama butonuna basıldığında veya ApplicationBar‘daki arama butonuna basınca Bing üzerinde arama yapacağız, TextBox‘ın KeyUp event’ini ve ApplicationBarIconButton‘ın Click event’ini yakalıyoruz;

private void SearchKey_OnKeyUp(object sender, KeyEventArgs e)
{
	if (e.Key == Key.Enter)
	{
		SearchBing();
	}
}

private void SearchButton_OnClick(object sender, EventArgs e)
{
	SearchBing();
}

Asıl arama olayının döneceği SearchBing() method’unu yazmadan önce projemizde yapmamız gereken düzenlemeler var.

Projenin References‘ına sağ tuşla tıklayıp Nuget Package Manager penceresini açalım ve Microsoft.Data.Services.Client paketini aratalım, OData Client for Windows Phone Apps paketini projeye ekleyelim;

Bing Search API – Web Results Only sayfasından bulabileceğiniz .NET C# Class Library class dosyasını indirip projeye ekliyoruz.

Gelelim SearchBing() method’una;

private void SearchBing()
{
	SystemTray.SetProgressIndicator(this, new ProgressIndicator
	{
		IsVisible = true,
		IsIndeterminate = true,
		Text = "Bing üzerinden arama yapılıyor..."
	});

	var searchUri = new Uri("https://user:[AccountKey]@api.datamarket.azure.com/bing/search");

	var container = new BingSearchContainer(searchUri);
	var query = container.Web(SearchKey.Text, null, null, null, null, null, null, null);

	query.BeginExecute(ar =>
	{
		var state = ar.AsyncState as DataServiceQuery<WebResult>;

		if (state != null)
		{
			var result = state.EndExecute(ar);

			if (result != null)
			{
				Dispatcher.BeginInvoke(() =>
				{
					SearchResultList.ItemsSource = result.ToList();

					SystemTray.SetProgressIndicator(this, null);
				});
			}
		}
	}, query);
}

İlk olarak SystemTray sınıfının static SetProgressIndicator method’unu çağırıyoruz, böylece arama başladığında ekranın üstünde ilerleme çubuğu belirecek;

Bing Search API – Web Results Only sayfasından elde edeceğiniz AccountKey ile Bing Search Uri oluşturuyoruz.

BingSearchContainer sınıfından yeni bir instance oluşturup, Web() method’unu çağırıyoruz, parametre olarak arama kelimemizi veriyoruz.

BeginExecute() method’u ile aramayı başlatıyoruz, gerekli kontrolleri yaptıktan sonra arama sonuç listesini Dispatcher.BeginInvoke içerisinde ekrandaki LongListSelector nesnesine bağlıyoruz.

Son olarak, LongListSelector içerisinde listelenen öğelerden birine tıklandığında ilgili adrese gitmesi için SelectionChanged event’ini yakalıyoruz;

var item = SearchResultList.SelectedItem as WebResult;

if (item != null)
{
	var webBrowserTask = new WebBrowserTask { Uri = new Uri(item.Url, UriKind.Absolute) };
	webBrowserTask.Show();
}