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

Arşiv

Etiketlenen yazılar columndefinition

Windows 10 UWP uygulamasında Page.Resources içinde Style kullanmak

31 January 2016 Yorum yapılmamış

Windows 10 UWP uygulaması yazarken bazen ekranda stil verdiğimiz bir nesnenin stilini aynı tipteki diğer nesnelere de uygulamak isteriz.

Böyle bir durumda içinde bulunduğumuz Page‘in Resources kısmına stillerimizi ortak bir şekilde tanımlamak ve sayfanın içinde aynı tipteki nesnelerde kullanmak iyi bir çözüm yolu olabilir.

Bu makalede örnek olarak, saati gösterecek veya belli bir süreden geri sayım yapabilecek aşağıdaki sayfayı UWP ile tasarlayacağız;

Öncelikle sayfanın kodlarını aşağıdaki hale getirip temizleyelim;

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

</Page>

Sayfaya önce bir StackPanel nesnesi, StackPanel nesnesinin içerisine bir Grid nesnesi, Grid nesnesinin ColumnDefinitions özelliğine de 5 adet ColumnDefinition ekliyoruz.

Aynı şekilde Grid nesnesinin içerisine her Column‘a birer tane denk gelecek şekilde Border nesneleri ekliyoruz, Border nesnelerinin içerisine TextBlock veya StackPanel içerisinde TextBlock ekliyoruz.

Border nesnelerini kullanmamızın sebebi, TextBlock nesnesi tek başına arkaplan rengine sahip olamaz, eğer Border nesnesinin içerisine koyarsak, Border nesnesine verdiğimiz Background özelliği sayesinde bir arkaplan rengi olabilir.

<StackPanel Margin="10">
	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>

		<Border Grid.Column="0">
			<StackPanel Orientation="Horizontal">
				<TextBlock Text="0" />
				<TextBlock Text="0" />
			</StackPanel>
		</Border>
		<Border Grid.Column="1">
			<TextBlock Text=":" />
		</Border>
		<Border Grid.Column="2">
			<StackPanel Orientation="Horizontal">
				<TextBlock Text="0" />
				<TextBlock Text="0" />
			</StackPanel>
		</Border>
		<Border Grid.Column="3">
			<TextBlock Text=":" />
		</Border>
		<Border Grid.Column="4">
			<StackPanel Orientation="Horizontal">
				<TextBlock Text="0" />
				<TextBlock Text="0" />
			</StackPanel>
		</Border>

	</Grid>
</StackPanel>

Böylece tasarım anında ekranımız aşağıdaki gibi gözükecek;

İstediğimiz ekran tasarımına henüz sahip değiliz, fakat yaklaştık. Sayfada birçok nesnenin aynı şekilde gözükmesini istiyoruz, eğer hepsinde aynı özelliklere aynı değerleri verecek olursak aslında bunu elde edebiliriz. Fakat daha sonra değişiklik yapması zor olur, kodun karmaşıklığı artar, vs.

Sayfadaki Page elementinin içerisine Resources elementi ekler ve içerisine istediğimiz nesnelerin ortak sahip olacağı stilleri yazarsak bu problemlerin önüne geçmiş oluruz;

<Page.Resources>
	<Style TargetType="Border">
		<Setter Property="Background" Value="#e67e22" />
		<Setter Property="Padding" Value="10" />
	</Style>
	<Style TargetType="TextBlock">
		<Setter Property="FontSize" Value="20" />
		<Setter Property="Foreground" Value="White" />
		<Setter Property="Margin" Value="10" />
	</Style>
</Page.Resources>

Öncelikle Page.Resources elementini oluşturuyoruz, sayfadaki tüm Border nesneleri için hangi özelliklere hangi değeri atamak istiyorsak, Style elementi içerisinde Setter elementini kullanarak, Property ve Value değerlerine atamalar yapıyoruz.

Aynı şekilde sayfadaki tüm TextBlock nesneleri için de ortak özelliklere değer atamaları yapıyoruz.

Tüm Border ve TextBlock nesnelerine aynı değerleri tek tek atamak yerine, Page.Resources içerisinde ortak bir şekilde atamış olduk. Artık arkarengi değiştirmek istersek, tek bir yerden değiştirebileceğiz;

<Setter Property="Background" Value="#9b59b6" />

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.