XAML kullanan stil uygulamaları
.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI) uygulamaları genellikle aynı görünüme sahip birden çok denetim içerir. Örneğin, bir uygulamanın aynı yazı tipi seçeneklerine ve düzen seçeneklerine sahip birden çok Label örneği olabilir:
<Label Text="These labels"
HorizontalOptions="Center"
VerticalOptions="Center"
FontSize="18" />
<Label Text="are not"
HorizontalOptions="Center"
VerticalOptions="Center"
FontSize="18" />
<Label Text="using styles"
HorizontalOptions="Center"
VerticalOptions="Center"
FontSize="18" />
Bu örnekte, her Label nesne tarafından görüntülenen metnin görünümünü denetlemek için aynı özellik değerlerine Labelsahiptir. Ancak, her denetimin görünümünü ayarlamak tekrarlanabilir ve hataya eğilimli olabilir. Bunun yerine, görünümü tanımlayan bir stil oluşturulabilir ve ardından gerekli denetimlere uygulanabilir.
Stillere giriş
Bir uygulama, bir özellik değerleri koleksiyonunu birden çok görsel öğeye uygulanabilecek tek bir nesnede gruplandırmak için sınıfı kullanılarak Style stillendirilebilir. Bu, yinelenen işaretlemeleri azaltmaya yardımcı olur ve uygulamaların görünümünün daha kolay değiştirilmesini sağlar.
Stiller öncelikli olarak XAML tabanlı uygulamalar için tasarlanmış olsa da, C# dilinde de oluşturulabilir:
- StyleXAML'de oluşturulan nesneler genellikle bir ResourceDictionary denetim, sayfa veya uygulama koleksiyonu koleksiyonuna
ResourcesatananResourcesbir içinde tanımlanır. - Style C# dilinde oluşturulan nesneler genellikle sayfanın sınıfında veya genel olarak erişilebilen bir sınıfta tanımlanır.
Kullanılabilmesi için Style etkinin tanımlanacağı yeri seçme:
- Style denetim düzeyinde tanımlanan örnekler yalnızca denetime ve alt öğelerine uygulanabilir.
- Style sayfa düzeyinde tanımlanan örnekler yalnızca sayfaya ve alt öğelerine uygulanabilir.
- Style uygulama düzeyinde tanımlanan örnekler uygulama genelinde uygulanabilir.
Her Style nesne, bir veya daha fazla Setter nesneden oluşan bir koleksiyon içerir ve her Setter biri ve Property öğesine sahip olur Value. Property, stilin uygulandığı öğenin bağlanabilir özelliğinin adıdır ve Value özelliğine uygulanan değerdir.
Her Style nesne açık veya örtük olabilir:
- Açık Style bir nesne, bir
TargetTypevex:Keydeğeri belirterek ve hedef öğenin Style özelliğini başvuruyax:Keyayarlayarak tanımlanır. Daha fazla bilgi için bkz . Açık stiller. - ÖrtükStyle bir nesne, yalnızca bir
TargetTypebelirtilerek tanımlanır. Nesne Style daha sonra otomatik olarak bu türdeki tüm öğelere uygulanır. Ancak, alt sınıflarınaTargetTypeotomatik Style olarak uygulanmaz. Daha fazla bilgi için bkz . Örtük stiller.
oluştururken StyleTargetType özelliği her zaman gereklidir. Aşağıdaki örnekte açık bir stil gösterilmektedir:
<Style x:Key="labelStyle" TargetType="Label">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="FontSize" Value="18" />
</Style>
uygulamak Styleiçin, hedef nesnenin özelliğinin değeriyle TargetTypeStyleeşleşen bir VisualElement olması gerekir:
<Label Text="Demonstrating an explicit style" Style="{StaticResource labelStyle}" />
Görünüm hiyerarşisindeki daha düşük stiller, yukarıda tanımlananlara göre önceliklidir. Örneğin, uygulama düzeyinde olarak ayarlanacak Label.TextColorRed bir Style ayarı, olarak ayarlayan GreenLabel.TextColor sayfa düzeyinde bir stil tarafından geçersiz kılınacaktır. Benzer şekilde, sayfa düzeyi stili denetim düzeyi stili tarafından geçersiz kılınacaktır. Buna ek olarak, doğrudan bir denetim özelliğinde ayarlanırsa Label.TextColor , bu herhangi bir stilden önceliklidir.
Stiller özellik değişikliklerine yanıt vermez ve uygulama süresi boyunca değişmeden kalır. Ancak uygulamalar, çalışma zamanında dinamik kaynakları kullanarak stil değişikliklerine dinamik olarak yanıt verebilir. Daha fazla bilgi için bkz . Dinamik stiller.
Açık stiller
Sayfa düzeyinde bir Style oluşturmak için, sayfaya bir ResourceDictionary eklenmelidir ve ardından bir veya daha fazla Style bildirim öğesine ResourceDictionaryeklenebilir. , Style bildirimine içinde açıklayıcı bir anahtar veren bir x:Key öznitelik vererek açık hale getirilirResourceDictionary. Daha sonra, özellikleri ayarlanarak Style belirli görsel öğelere açık stiller uygulanmalıdır.
Aşağıdaki örnekte, bir sayfanın içindeki açık stiller gösterilir ve sayfanın ResourceDictionaryLabel nesnelerine uygulanır:
<ContentPage ...>
<ContentPage.Resources>
<Style x:Key="labelRedStyle"
TargetType="Label">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="FontSize" Value="18" />
<Setter Property="TextColor" Value="Red" />
</Style>
<Style x:Key="labelGreenStyle"
TargetType="Label">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="FontSize" Value="18" />
<Setter Property="TextColor" Value="Green" />
</Style>
<Style x:Key="labelBlueStyle"
TargetType="Label">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="FontSize" Value="18" />
<Setter Property="TextColor" Value="Blue" />
</Style>
</ContentPage.Resources>
<StackLayout>
<Label Text="These labels"
Style="{StaticResource labelRedStyle}" />
<Label Text="are demonstrating"
Style="{StaticResource labelGreenStyle}" />
<Label Text="explicit styles,"
Style="{StaticResource labelBlueStyle}" />
<Label Text="and an explicit style override"
Style="{StaticResource labelBlueStyle}"
TextColor="Teal" />
</StackLayout>
</ContentPage>
Bu örnekte , ResourceDictionary sayfanın Label nesnelerinde açıkça ayarlanan üç stili tanımlar. Her Style biri, yazı tipi boyutunu ve yatay ve dikey düzen seçeneklerini ayarlarken metni farklı bir renkte görüntülemek için kullanılır. Her Style biri, işaretleme uzantısı kullanılarak özellikleri ayarlanarak Style farklı Label bir değere StaticResource uygulanır. Buna ek olarak, finalde Label bir Style küme olsa da, özelliği farklı Color bir değerle geçersiz kılarTextColor.
Örtük stiller
Sayfa düzeyinde bir Style oluşturmak için, sayfaya bir ResourceDictionary eklenmelidir ve ardından bir veya daha fazla Style bildirim öğesine ResourceDictionaryeklenebilir. bir Style özniteliği belirtilmeyerek örtük hale x:Key getirilir. Stil daha sonra tam olarak ile eşleşen kapsam görsel öğelerine TargetType uygulanır, ancak değerden TargetType türetilen öğelere uygulanmaz.
Aşağıdaki kod örneği, bir sayfanın içindeki örtük stili gösterir ve sayfanın ResourceDictionaryEntry nesnelerine uygulanır:
<ContentPage ...>
<ContentPage.Resources>
<Style TargetType="Entry">
<Setter Property="HorizontalOptions" Value="Fill" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="BackgroundColor" Value="Yellow" />
<Setter Property="FontAttributes" Value="Italic" />
<Setter Property="TextColor" Value="Blue" />
</Style>
</ContentPage.Resources>
<StackLayout>
<Entry Text="These entries" />
<Entry Text="are demonstrating" />
<Entry Text="implicit styles," />
<Entry Text="and an implicit style override"
BackgroundColor="Lime"
TextColor="Red" />
<local:CustomEntry Text="Subclassed Entry is not receiving the style" />
</StackLayout>
</ContentPage>
Bu örnekte , ResourceDictionary sayfanın Entry nesnelerinde örtük olarak ayarlanmış tekbir örtük stil tanımlar. , Style mavi metni sarı arka planda görüntülerken diğer görünüm seçeneklerini de ayarlamak için kullanılır. Style, bir x:Key öznitelik belirtilmeden sayfalara ResourceDictionary eklenir. Bu nedenle, Style tam olarak özelliğiyle eşleştiklerindenTargetType, örtük olarak tüm Entry nesnelere Style uygulanır. Ancak, Style alt sınıf olan nesnesine CustomEntry uygulanmaz Entry. Buna ek olarak, dördüncü Entry stil ve TextColor özelliklerini farklı Color değerlerle geçersiz kılarBackgroundColor.
Türetilmiş türlere stil uygulama
özelliği, Style.ApplyToDerivedTypes özelliği tarafından başvuruda bulunılan temel türden türetilen denetimlere bir stilin TargetType uygulanmasını sağlar. Bu nedenle, bu özelliğin olarak true ayarlanması, türlerin özelliğinde TargetType belirtilen temel türden türetilmiş olması koşuluyla, birden çok türü hedeflemek için tek bir stili etkinleştirir.
Aşağıdaki örnekte örneklerin arka plan rengini Button kırmızıya ayarlayan örtük bir stil gösterilmektedir:
<Style TargetType="Button"
ApplyToDerivedTypes="True">
<Setter Property="BackgroundColor"
Value="Red" />
</Style>
Bu stilin sayfa düzeyine ResourceDictionary yerleştirilmesi, hem sayfadaki tüm Button nesnelere hem de 'den Buttontüretilen tüm denetimlere uygulanmasına neden olur. Ancak, özellik ayarlanmazsa ApplyToDerivedTypes , stil yalnızca nesnelere Button uygulanır.
Genel stiller
Stiller, uygulamanın kaynak sözlüğüne eklenerek genel olarak tanımlanabilir. Bu stiller daha sonra uygulama genelinde kullanılabilir ve sayfalar ve denetimler arasında stil yinelemesini önlemeye yardımcı olur.
Aşağıdaki örnek, uygulama düzeyinde tanımlanmış bir Style örneği gösterir:
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Styles"
x:Class="Styles.App">
<Application.Resources>
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="HorizontalOptions"
Value="Center" />
<Setter Property="VerticalOptions"
Value="CenterAndExpand" />
<Setter Property="BorderColor"
Value="Lime" />
<Setter Property="CornerRadius"
Value="5" />
<Setter Property="BorderWidth"
Value="5" />
<Setter Property="WidthRequest"
Value="200" />
<Setter Property="TextColor"
Value="Teal" />
</Style>
</Application.Resources>
</Application>
Bu örnekte , ResourceDictionary nesnelerin görünümünü Button ayarlamak için kullanılacak tek bir açık stil buttonStyletanımlar.
Dekont
Genel stiller açık veya örtük olabilir.
Aşağıdaki örnekte, sayfanın nesnelerinde kullanan buttonStyle bir sayfa gösterilmektedir Button :
<ContentPage ...>
<StackLayout>
<Button Text="These buttons"
Style="{StaticResource buttonStyle}" />
<Button Text="are demonstrating"
Style="{StaticResource buttonStyle}" />
<Button Text="application styles"
Style="{StaticResource buttonStyle}" />
</StackLayout>
</ContentPage>
Stil devralma
Stiller, yinelemeyi azaltmak ve yeniden kullanımı etkinleştirmek için diğer stillerden devralabilir. Bu, özelliği mevcut Stylebir olarak ayarlanarak Style.BasedOn elde edilir. XAML'de bu, özelliği daha önce oluşturulmuş Stylebir öğesine başvuran bir StaticResource işaretleme uzantısına ayarlanarak BasedOn elde edilebilir.
Temel stilden devralan stiller, yeni özelliklerin örneklerini içerebilir Setter veya bunları temel stildeki ayarlayıcıları geçersiz kılmak için kullanabilir. Ayrıca, temel stilden devralan stillerin aynı türü veya temel stil tarafından hedeflenen türden türetilen bir türü hedeflemesi gerekir. Örneğin, bir temel stil nesneleri hedeflerseView, temel stili temel alan stiller ve Button gibi Label sınıftan View türetilen nesneleri veya türleri hedefleyebilirView.
Stil, görünüm hiyerarşisindeki stillerden yalnızca aynı düzeyde veya daha üst düzeydeki stillerden devralabilir. Bu şu anlama gelir:
- Uygulama düzeyi stili yalnızca diğer uygulama düzeyindeki stillerden devralabilir.
- Sayfa düzeyi stili, uygulama düzeyindeki stillerden ve diğer sayfa düzeyindeki stillerden devralabilir.
- Denetim düzeyi stili, uygulama düzeyi stillerinden, sayfa düzeyi stillerinden ve diğer denetim düzeyi stillerinden devralabilir.
Aşağıdaki örnekte açık stil devralma gösterilmektedir:
<ContentPage ...>
<ContentPage.Resources>
<Style x:Key="baseStyle"
TargetType="View">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
</Style>
</ContentPage.Resources>
<StackLayout>
<StackLayout.Resources>
<Style x:Key="labelStyle"
TargetType="Label"
BasedOn="{StaticResource baseStyle}">
<Setter Property="FontSize" Value="18" />
<Setter Property="FontAttributes" Value="Italic" />
<Setter Property="TextColor" Value="Teal" />
</Style>
<Style x:Key="buttonStyle"
TargetType="Button"
BasedOn="{StaticResource baseStyle}">
<Setter Property="BorderColor" Value="Lime" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="BorderWidth" Value="5" />
<Setter Property="WidthRequest" Value="200" />
<Setter Property="TextColor" Value="Teal" />
</Style>
</StackLayout.Resources>
<Label Text="This label uses style inheritance"
Style="{StaticResource labelStyle}" />
<Button Text="This button uses style inheritance"
Style="{StaticResource buttonStyle}" />
</StackLayout>
</ContentPage>
Bu örnekte, baseStyle nesneleri hedefler View ve ve VerticalOptions özelliklerini ayarlarHorizontalOptions. baseStyle doğrudan hiçbir denetimde ayarlanmaz. Bunun yerine, labelStylebuttonStyle ek bağlanabilir özellik değerleri ayarlayarak bu değerden devralın. Ve labelStylebuttonStyle nesneleri daha sonra ve LabelButtonüzerinde ayarlanır.
Önemli
Örtük stil, açık bir stilden türetilebilir, ancak açık stil örtük bir stilden türetilmez.
Dinamik stiller
Stiller özellik değişikliklerine yanıt vermez ve uygulama süresi boyunca değişmeden kalır. Örneğin, bir görsel öğesine bir atadıktan Style sonra, nesnelerden biri Setter değiştirilirse, kaldırılırsa veya yeni Setter bir öğe eklenirse, değişiklikler görsel öğesine uygulanmaz. Ancak uygulamalar, çalışma zamanında dinamik kaynakları kullanarak stil değişikliklerine dinamik olarak yanıt verebilir.
biçimlendirme DynamicResource uzantısı, içindeki işaretleme uzantısına StaticResource benzer ve her ikisi de bir sözlük anahtarı kullanarak bir değerinden ResourceDictionarybir değer getirir. Ancak, tek bir sözlük araması gerçekleştirirken StaticResource , DynamicResource sözlük anahtarına bir bağlantı tutar. Bu nedenle, anahtarla ilişkili sözlük girdisi değiştirilirse, değişiklik görsel öğesine uygulanır. Bu, bir uygulamada çalışma zamanı stili değişiklikleri yapılmasını sağlar.
Aşağıdaki örnekte dinamik stiller gösterilmektedir:
<ContentPage ...>
<ContentPage.Resources>
<Style x:Key="baseStyle"
TargetType="View">
<Setter Property="VerticalOptions" Value="Center" />
</Style>
<Style x:Key="blueSearchBarStyle"
TargetType="SearchBar"
BasedOn="{StaticResource baseStyle}">
<Setter Property="FontAttributes" Value="Italic" />
<Setter Property="PlaceholderColor" Value="Blue" />
</Style>
<Style x:Key="greenSearchBarStyle"
TargetType="SearchBar">
<Setter Property="FontAttributes" Value="None" />
<Setter Property="PlaceholderColor" Value="Green" />
</Style>
</ContentPage.Resources>
<StackLayout>
<SearchBar Placeholder="SearchBar demonstrating dynamic styles"
Style="{DynamicResource blueSearchBarStyle}" />
</StackLayout>
</ContentPage>
Bu örnekte, SearchBar nesnesi adlandırılmış blueSearchBarStylebir Style ayarlamak için işaretleme uzantısını kullanırDynamicResource. ardından öğesinin SearchBarStyle tanımı kodda güncelleştirilebilir:
Resources["blueSearchBarStyle"] = Resources["greenSearchBarStyle"];
Bu örnekte tanım, blueSearchBarStyle tanımdaki greenSearchBarStyle değerleri kullanacak şekilde güncelleştirilir. Bu kod yürütürken , SearchBar içinde greenSearchBarStyletanımlanan nesneleri kullanacak Setter şekilde güncelleştirilir.
Dinamik stil devralma
Dinamik bir stilden stil türetme özelliği kullanılarak Style.BasedOn elde edilemiyor. Bunun yerine sınıfı, Style değeri dinamik olarak değişebilen bir sözlük anahtarına ayarlanabilen özelliğini içerir BaseResourceKey .
Aşağıdaki örnekte dinamik stil devralma gösterilmektedir:
<ContentPage ...>
<ContentPage.Resources>
<Style x:Key="baseStyle"
TargetType="View">
<Setter Property="VerticalOptions" Value="Center" />
</Style>
<Style x:Key="blueSearchBarStyle"
TargetType="SearchBar"
BasedOn="{StaticResource baseStyle}">
<Setter Property="FontAttributes" Value="Italic" />
<Setter Property="TextColor" Value="Blue" />
</Style>
<Style x:Key="greenSearchBarStyle"
TargetType="SearchBar">
<Setter Property="FontAttributes" Value="None" />
<Setter Property="TextColor" Value="Green" />
</Style>
<Style x:Key="tealSearchBarStyle"
TargetType="SearchBar"
BaseResourceKey="blueSearchBarStyle">
<Setter Property="BackgroundColor" Value="Teal" />
<Setter Property="CancelButtonColor" Value="White" />
</Style>
</ContentPage.Resources>
<StackLayout>
<SearchBar Text="SearchBar demonstrating dynamic style inheritance"
Style="{StaticResource tealSearchBarStyle}" />
</StackLayout>
</ContentPage>
Bu örnekte, SearchBar nesnesi adlandırılmış tealSearchBarStylebir Style öğesine başvurmak için işaretleme uzantısını kullanırStaticResource. Bu Style , bazı ek özellikleri ayarlar ve başvurmak BaseResourceKeyblueSearchBarStyleiçin özelliğini kullanır. Biçimlendirme DynamicResource uzantısı gerekli değildir, çünkü tealSearchBarStyle bu uzantıdan türetildiği durumlar Style dışında değişmez. Bu nedenle, tealSearchBarStyle bir bağlantı blueSearchBarStyle tutar ve temel stil değiştiğinde güncelleştirilir.
Tanım blueSearchBarStyle kodda güncelleştirilebilir:
Resources["blueSearchBarStyle"] = Resources["greenSearchBarStyle"];
Bu örnekte tanım, blueSearchBarStyle tanımdaki greenSearchBarStyle değerleri kullanacak şekilde güncelleştirilir. Bu kod yürütürken , SearchBar içinde greenSearchBarStyletanımlanan nesneleri kullanacak Setter şekilde güncelleştirilir.
Stil sınıfları
Stil sınıfları, stil devralmaya başvurmadan bir denetime birden çok stilin uygulanmasını sağlar.
Bir stil sınıfı, üzerindeki Style özelliği sınıf adını temsil eden bir string olarak ayarlanarak Class oluşturulabilir. Bunun sağladığı avantaj, özniteliğini kullanarak x:Key açık bir stil tanımlamak yerine, bir öğesine VisualElementbirden çok stil sınıfı uygulanabilmesidir.
Önemli
Farklı türleri hedeflemeleri koşuluyla, birden çok stil aynı sınıf adını paylaşabilir. Bu, aynı adlı birden çok stil sınıfının farklı türleri hedeflemesini sağlar.
Aşağıdaki örnekte üç BoxView stil sınıfı ve bir VisualElement stil sınıfı gösterilmektedir:
<ContentPage ...>
<ContentPage.Resources>
<Style TargetType="BoxView"
Class="Separator">
<Setter Property="BackgroundColor"
Value="#CCCCCC" />
<Setter Property="HeightRequest"
Value="1" />
</Style>
<Style TargetType="BoxView"
Class="Rounded">
<Setter Property="BackgroundColor"
Value="#1FAECE" />
<Setter Property="HorizontalOptions"
Value="Start" />
<Setter Property="CornerRadius"
Value="10" />
</Style>
<Style TargetType="BoxView"
Class="Circle">
<Setter Property="BackgroundColor"
Value="#1FAECE" />
<Setter Property="WidthRequest"
Value="100" />
<Setter Property="HeightRequest"
Value="100" />
<Setter Property="HorizontalOptions"
Value="Start" />
<Setter Property="CornerRadius"
Value="50" />
</Style>
<Style TargetType="VisualElement"
Class="Rotated"
ApplyToDerivedTypes="true">
<Setter Property="Rotation"
Value="45" />
</Style>
</ContentPage.Resources>
</ContentPage>
Bu örnekte, , ve stil sınıflarının Separatorher biri özellikleri belirli değerlere ayarlarBoxView.CircleRounded Stil Rotated sınıfının bir TargetType değeri VisualElementvardır, yani yalnızca örneklere VisualElement uygulanabilir. Ancak, ApplyToDerivedTypes özelliği olarak ayarlanır trueve bu, gibi BoxView' den VisualElementtüretilen tüm denetimlere uygulanabilmesini sağlar. Türetilmiş türe stil uygulama hakkında daha fazla bilgi için bkz . Türetilmiş türlere stil uygulama.
Stil sınıfları, türündeki StyleClassIList<string>denetimin özelliği stil sınıfı adları listesine ayarlanarak kullanılabilir. Denetim türünün stil sınıflarının türüyle eşleşmesi TargetType koşuluyla stil sınıfları uygulanır.
Aşağıdaki örnekte her biri farklı stil sınıflarına ayarlanmış üç BoxView örnek gösterilmektedir:
<ContentPage ...>
<ContentPage.Resources>
...
</ContentPage.Resources>
<StackLayout>
<BoxView StyleClass="Separator" />
<BoxView WidthRequest="100"
HeightRequest="100"
HorizontalOptions="Center"
StyleClass="Rounded, Rotated" />
<BoxView HorizontalOptions="Center"
StyleClass="Circle" />
</StackLayout>
</ContentPage>
Bu örnekte ilki BoxView çizgi ayırıcı olacak şekilde stillendirilirken, üçüncüsü BoxView döngüseldir. İkincisinde BoxView , yuvarlatılmış köşeler veren ve 45 derece döndüren iki stil sınıfı uygulanır:
Önemli
Özelliği türünde IList<string>olduğundan StyleClass bir denetime birden çok stil sınıfı uygulanabilir. Bu durumda, stil sınıfları artan liste sırasına uygulanır. Bu nedenle, birden çok stil sınıfı aynı özellikleri ayarladığında, en yüksek liste konumundaki stil sınıfındaki özellik öncelikli olur.
Geri Bildirim
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz. https://aka.ms/ContentUserFeedback.
Gönderin ve geri bildirimi görüntüleyin