WPF Stil – WPF’de kontrollere kendi stillerimizi nasıl tanımlayabiliriz ve bu tanımlanan stilleri nasıl kullanabiliriz gibi konular üzerinde duracağız bu makalemizde ve bazı kontrollere örnek stiller oluşturarak sonuçları göstereceğiz.
WPF Stil – Özel Stil Nasıl Oluşturulur
Her Kontrol İçin Ayrı Özel Stil Oluşturma
İlk örneğimizi buton nesnesi üzerinde anlatacağız. Tanımladığımız her nesne için birbirinden farklı stiller oluşturabilmekteyiz ve ilk örneğimizde herhangi bir butona özel stil tanımlaması nasıl yapabiliriz bunu göreceğiz.
XAML(MainWindow.xaml)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <Window x:Class="MHG.WPF.Style.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:MHG.WPF.Style" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Grid> <Button x:Name="btnTest" Content="KAYDET"> <Button.Style> <Style> <Setter Property="Button.Width" Value="50"></Setter> <Setter Property="Button.Height" Value="50"></Setter> <Setter Property="Button.Margin" Value="10"></Setter> </Style> </Button.Style> </Button> </Grid> </Window> |
Üstteki kodda gördüğünüz gibi btnTest adlı buton’a özel bir stil tanımlaması yaptık fakat her buton için ayrı stil tanımlaması yapmak hem yönetilebilirliği çıkılmaz hale getirecektir hemde tasarım tutarlılığı sağlanamamış olacaktır.
Window.Resource ile Aynı Sayfada Birden Fazla Buton İçin Tek Özel Tasarım Oluşturma
Şimdi aynı stil tanımlamasını Window.Resorce bloğuna yapıp birden fazla butonda oluşturduğumuz tek stili nasıl kullanacağımızı göreceğiz.
XAML(MainWindow.xaml)
1 2 3 4 5 6 7 8 9 10 11 | <Window.Resources> <Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="Height" Value="50"/> <Setter Property="Width" Value="100" /> <Setter Property="Margin" Value="10" /> </Style> </Window.Resources> <Grid> <Button x:Name="btnTest" Content="KAYDET" Style="{ StaticResource ButtonStyle }"></Button> </Grid> |
Üstteki kodda işaretli kısımlara gözattığınızda Window.Resource
kod blokları altına ButtonStyle
keyine sahip bir stil oluşturulduğunu ve bu oluşturulan stilin TargetType
özelliğinde belirtildiği gibi sadece Button
türü kontroller için hazırlanmış bir stil olduğuna dikkat ediyoruz. Sayfamıza hemen bir Button
oluşturuyoruz ve ButtonStyle
keyine sahip stili Button’un Style
özelliğine {StaticResource ButtonStyle}
yazarak kullanabiliyoruz.
Not: Window.Resource blokları içerisine tanımlanan stiller sadece tanımlandığı sayfa içerisinde kullanılabilmektedir. Eğer tüm sayfalarda etkili olmasını istediğiniz stiller yazmak isterseniz App.xaml adlı dosya içerisinde ilgili stil tanımlarını yapmalısınız bununla ilgili detaylı altta bulabilirsiniz.
App.xaml Dosyası İçerisinde Tüm Window’larda Kullanabileceğimiz Özel Stiller Oluşturma
XAML(App.xaml)
1 2 3 4 5 6 7 8 9 10 11 | <Application x:Class="MHG.WPF.Style.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:MHG.WPF.Style" StartupUri="MainWindow.xaml"> <Application.Resources> <Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="Margin" Value="10" /> </Style> </Application.Resources> </Application> |
Application.Resource blokları arasına gerekli stil tanımlamalarını yapıyoruz.
XAML(MainWindow.xaml)
1 2 3 4 5 6 7 8 9 10 11 12 | <Window x:Class="MHG.WPF.Style.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:MHG.WPF.Style" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Grid> <Button x:Name="btnTest" Content="KAYDET" Style="{ StaticResource ButtonStyle }"></Button> </Grid> </Window> |
Gördüğünüz gibi App.xaml dosyası içerisinde tanımladığımız stili istediğimiz herhangi bir Xaml Window sayfasında kullanabilirsiniz.
Şimdi ise OOP’da yer alan inheritance kavramını stillerdede nasıl kullanıldığını göreceğiz birden fazla stilinizde aynı özellikler tekrar ediyorsa o zaman stillerinize BasedOn özelliğini kullarak inherit edebilirsiniz. Ufak bir örnek ile bunu nasıl yapabileceğimizi göreceğiz.
XAML(MainWindow.xaml)
1 2 3 4 5 6 7 8 9 10 11 12 | <Window x:Class="MHG.WPF.Style.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:MHG.WPF.Style" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Grid> <Button x:Name="btnTest" Content="KAYDET" Style="{DynamicResource ButtonStyle}"></Button> </Grid> </Window> |
XAML(App.xaml)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <Application x:Class="MHG.WPF.Style.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:MHG.WPF.Style" StartupUri="MainWindow.xaml"> <Application.Resources> <Style x:Key="BaseStyle" TargetType="Button"> <Setter Property="Height" Value="50"/> <Setter Property="Width" Value="100" /> </Style> <Style x:Key="ButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseStyle}"> <Setter Property="FontWeight" Value="Bold" /> </Style> </Application.Resources> </Application> |
Üstteki örnekte gördüğünüz gibi Width ve Height değerleri BaseStyle key’li stilde tanımlıdır. ButtonStyle adlı stil BaseStyle’daki tanımlı özellikleri BaseOn adlı özelliğine geçilerek inherit edilmiş oluyor. Böylelikle aynı özellik ve değerlere sahip stilleri birden fazla stilinize kolaylıkla inherit edebilirs kod kalabalığından kurtulup, yönetilebilirliği kolaylaştırır ve okunabilirliği arttırılmış olur.
Bu makalemizde WPF Stil’leri nasıl oluşturulur ve nasıl kullanılır bunları gördük alternatif birçok yöntemlerle beraber.
Projenin Son haline git bağlantısından erişebilirsiniz: https://github.com/muratoner/wpf