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

Arşiv

Etiketlenen yazılar rowdefinition

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 8 için Blog RSS Reader uygulaması

08 May 2014 Yorum yapılmamış

Blog’ların RSS adreslerine bağlanacak, makalelerin listesini getirecek ve seçilen makaleyi okumamızı sağlayacak Windows 8 uygulaması geliştireceğiz.

Öncelikle BlogReader isimli Windows 8 projesini oluşturalım ve MainPage.xaml dosyasına aşağıdaki kodları yazarak ekran tasarımımızı yapalım;

<Page
	x:Class="BlogReader.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:BlogReader"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d">

	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="300" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>


		<ListView Name="BlogPostListView" Margin="20" Grid.Column="1" SelectionChanged="BlogPostListView_SelectionChanged">
			<ListView.ItemTemplate>
				<DataTemplate>
					<StackPanel>
						<TextBlock Text="{Binding Title}" FontSize="14" Margin="5,0,0,0" TextWrapping="Wrap" />
						<TextBlock Text="{Binding Description}" FontSize="12" Margin="15,0,0,0" />
					</StackPanel>
				</DataTemplate>
			</ListView.ItemTemplate>
		</ListView>

		<Grid Margin="20" Grid.Column="2">
			<Grid.RowDefinitions>
				<RowDefinition Height="40"/>
				<RowDefinition Height="*"/>
			</Grid.RowDefinitions>

			<TextBlock Name="PostTitleText" Text="{Binding Title}" FontSize="20" Grid.Row="0" TextWrapping="Wrap" />
			<WebView Name="ContentView" Grid.Row="1" Margin="0,50,0,0" />
		</Grid>
	</Grid>

	<Page.TopAppBar>
		<AppBar Name="topBar">
			<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
				<Button Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}" Click="Refresh_Click" />
			</StackPanel>
		</AppBar>
	</Page.TopAppBar>
</Page>

Böylece iki sütunlu bir Grid içerisinde soldaki sütunda Blog’un RSS adresinden çekeceğimiz makalelerin listesini göstereceğiz, sağdaki sütunda ise makale listesinden seçilen makalenin başlığını ve içeriğini göstereceğiz.

Ekranın TopAppBar‘ında verileri tekrar çekecek olan Refresh (Tazele) Button nesnesi yer alacak.

Projemize BlogPost isminde bir sınıf ekleyelim ve rss adresindeki bilgiyi parse ettiğimizde elde edeceğimiz veriyi tutacağımız property‘leri tanımlayalım;

public class BlogPost
{
	public string Title { get; set; }
	public string Author { get; set; }
	public string Content { get; set; }
	public DateTime PubDate { get; set; }
}

Artık MainPage.xaml.cs dosyasına gidebilir ve sayfa ekrana ilk geldiğinde yapılacak işleri OnNavigatedTo() methodunun içerisine yazabiliriz.

Öncelikle rss adresindeki veriyi parse ettiğimizde elde edeceğimiz BlogPost‘ların listesi için bir değişken tanımlaması yapıyoruz;

var postList = new List<BlogPost>();

Şimdi Windows.Web.Syndication namespace’inde tanımlı SyndicationClient tipinde bir değişken tanımlayabilir ve RetreiveFeedAsync() methodunu kullanarak belli bir adresteki rss verisini parse edebiliriz.

var client = new SyndicationClient();

var feed = await client.RetrieveFeedAsync(new Uri("http://feeds.feedburner.com/muammerbenzes"));

Not : Bu örnekte sevgili Muammer Benzeş‘in blogunun rss adresini kullandık, başka blogların rss adresleri için özel bir kod yazmaya gerek yok.

Parse ettiğimiz rss verisinin içerisinde dönerek BlogPost listesine teker teker ekliyoruz;

foreach (var item in feed.Items)
{
	var post = new BlogPost();

	post.Title = item.Title.Text;
	post.PubDate = item.PublishedDate.DateTime;
	post.Author = item.Authors[0].Name.ToString();
	if (feed.SourceFormat == SyndicationFormat.Atom10)
	{
		post.Content = item.Content.Text;
	}
	else if (feed.SourceFormat == SyndicationFormat.Rss20)
	{
		post.Content = item.Summary.Text;
	}

	postList.Add(post);
}

Tek yapmamız gereken ekrandaki BlogPostListView nesnesine elimizdeki BlogPost listesini bağlamak.

BlogPostListView.ItemsSource = postList;

BlogPostListView nesnesinden bir blog post seçildiğinde ekranın sağ tarafında başlığı ve içeriği ile göstermek için aşağıdaki method’u da MainPage.xaml.cs dosyasına eklememiz gerekiyor;

private void BlogPostListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
	if (e.AddedItems.Count > 0)
	{
		var post = e.AddedItems[0] as BlogPost;
		if (post != null)
		{
			PostTitleText.Text = post.Title;
			ContentView.NavigateToString(post.Content);
		}
	}
	else
	{
		PostTitleText.Text = "";
		ContentView.NavigateToString("");
	}
}

Böylece BlogPostListView nesnesinden herhangi bir blog post seçilirse ekranın sağ tarafında seçilen blog post’un başlığı ve içeriği görüntüleniyor olacak.

Windows Phone 8 için Share Task’larının kullanımı

20 December 2012 Yorum yapılmamış

Windows Phone 8 için share task‘ları kullanacağımız bir uygulama geliştireceğiz.

Bu uygulamanın geliştirilmesi sırasında ShareStatusTask, ShareLinkTask, ShareMediaTask, CameraCaptureTask gibi yapıları kullandığımız kodlar yazacağız.

Öncelikle ShareTasks isimli yeni bir Windows Phone App projesi oluşturalım;

Share Tasks Windows Phone Application Project

Proje oluşturduktan sonra gelen Windows Phone Platform versiyon seçim penceresinde Windows Phone OS 8.0 seçeneğinin seçili olduğundan emin olmalıyız;

Windows Phone 8.0 SDK

Ekran tasarımı için MainPage.xaml dosyasını aşağıdaki gibi güncelleyelim;

<Grid x:Name="LayoutRoot" Background="Transparent">
	<Grid.RowDefinitions>
		<RowDefinition Height="Auto" />
		<RowDefinition Height="Auto" />
		<RowDefinition Height="Auto" />
		<RowDefinition Height="Auto" />
		<RowDefinition Height="Auto" />
		<RowDefinition Height="Auto" />
		<RowDefinition Height="Auto" />
		<RowDefinition Height="Auto" />
		<RowDefinition Height="Auto" />
		<RowDefinition Height="Auto" />
		<RowDefinition Height="Auto" />
	</Grid.RowDefinitions>

	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="125"  />
		<ColumnDefinition Width="*" />
	</Grid.ColumnDefinitions>

	<TextBlock Text="SHARE TASKS" Style="{StaticResource PhoneTextNormalStyle}" Margin="15,0" Grid.Row="0" Grid.ColumnSpan="2" />

	<TextBlock Text="share status" Margin="10,0,0,10" Style="{StaticResource PhoneTextExtraLargeStyle}" Grid.Row="1" Grid.ColumnSpan="2" />
	<TextBlock Text="STATUS" Margin="30,20,0,0" Style="{StaticResource PhoneTextTitle3Style}" Grid.Row="2" Grid.Column="0" />
	<TextBox Margin="0,0,0,0" Name="txtShareStatus_Status" Grid.Row="2" Grid.Column="1" />
	<Button Content="PAYLAŞ" Name="btnShareStatus" Margin="0,0,0,0" Grid.Row="3" Grid.ColumnSpan="2" Click="btnShareStatus_Click" />

	<TextBlock Text="share link" Margin="10,0,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}" Grid.Row="4" Grid.ColumnSpan="2" />
	<TextBlock Text="TITLE" Margin="30,20,0,0" Style="{StaticResource PhoneTextTitle3Style}" Grid.Row="5" Grid.Column="0" />
	<TextBox Margin="0,0,0,0" Name="txtShareLink_Title" Grid.Row="5" Grid.Column="1" />
	<TextBlock Text="MESSAGE" Margin="30,20,0,0" Style="{StaticResource PhoneTextTitle3Style}" Grid.Row="6" Grid.Column="0" />
	<TextBox Margin="0,0,0,0" Name="txtShareLink_Message" Grid.Row="6" Grid.Column="1" />
	<TextBlock Text="LINK URL" Margin="30,20,0,0" Style="{StaticResource PhoneTextTitle3Style}" Grid.Row="7" Grid.Column="0" />
	<TextBox Margin="0,0,0,0" Name="txtShareLink_Url" InputScope="Url" Grid.Row="7" Grid.Column="1" />
	<Button Content="PAYLAŞ" Name="btnShareLink" Margin="0,0,0,0" Grid.Row="8" Grid.ColumnSpan="2" Click="btnShareLink_Click" />

	<TextBlock Text="share media" Margin="10,0,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}" Grid.Row="9" Grid.ColumnSpan="2" />
	<Button Content="KAMERA ÇEK ve PAYLAŞ" Name="btnShareMedia" Margin="0,0,0,0" Grid.Row="10" Grid.ColumnSpan="2" Click="btnShareMedia_Click" />
</Grid>

Butonlara basıldığında tetiklenecek method’ları MainPage.xaml.cs dosyasına ekleyelim;

private void btnShareStatus_Click(object sender, RoutedEventArgs e)
{
	var Status = txtShareStatus_Status.Text;

	ShareStatusTask task = new ShareStatusTask();
	task.Status = Status;

	task.Show();
}

private void btnShareLink_Click(object sender, RoutedEventArgs e)
{
	var Title = txtShareLink_Title.Text;
	var Message = txtShareLink_Message.Text;
	var Url = txtShareLink_Url.Text;

	ShareLinkTask task = new ShareLinkTask();
	task.Title = Title;
	task.Message = Message;
	task.LinkUri = new Uri(Url, UriKind.RelativeOrAbsolute);

	task.Show();
}

private void btnShareMedia_Click(object sender, RoutedEventArgs e)
{
	CameraCaptureTask task = new CameraCaptureTask();
	task.Completed += CameraCaptureTask_Completed;

	task.Show();
}

private void CameraCaptureTask_Completed(object sender, PhotoResult e)
{
	ShareMediaTask task = new ShareMediaTask();
	task.FilePath = e.OriginalFileName;

	task.Show();
}

ShareStatusTask, ShareLinkTask, ShareMediaTask sınıflarından yeni bir örnek oluşturulup, Show() method’u çağırıldığı zaman, telefonuna bağlı hesaplardan oluşan bir liste ekrana gelir ve seçilen hesap üzerinden paylaşım gerçekleştirilir.

Uygulamayı çalıştırdığımızda ve Paylaş butonlarından birine bastığınızda aşağıdaki aşağıdaki ekran görüntülerini görüyor olmamız lazım;

Share Tasks Windows Phone 8 Application Share Tasks Windows Phone 8 Application

Projenin kodlarını buradan indirebilirsiniz.