كيف نسستخدم عناصر Style للتحكم بمظهر التطبيق

قمنا في موضوع سابق لي بتغيير شكل الزر بواسطة كود Style في الملف App.xaml وكان الكود هو

<Style x:Key="RoundButton" TargetType="Button">
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="Button">
			  <Grid>
					<Ellipse Width="{TemplateBinding Width}" 
							 Height="{TemplateBinding Height}">
						<Ellipse.Fill>
							<RadialGradientBrush GradientOrigin=".2,.2">
								<GradientStop Offset=".2" Color="White"/>
								<GradientStop Offset="1" Color="Blue" />
							</RadialGradientBrush>
						</Ellipse.Fill>
					</Ellipse>
					<ContentPresenter  Content="{TemplateBinding Content}"
									   HorizontalAlignment="Center" 
									   VerticalAlignment="Center" />
				</Grid>  
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

وقمنا بربطه بالزر حتى أخذ الشكل الجديد بواسطة الكود

<Button Width="200" Height="200" Content="Hello VB"
		Style="{StaticResource RoundButton}" FontSize="15">

</Button>

حيث تزودنا Silverlight و WPF بآلية دعم للأشكال تمكننا من تغليف خصائص التحكم واستخدامها كمصادر قابلة لإعادة الاستخدام مما يمكننا من تخزين هذه المصادر في ملفات منفصلة عن صفحتنا وإعادة استخدامها عبر العديد من التحكمات والصفحات في التطبيق وإضافة إلى إمكانية تحديد الخصائص الأساسية يمكن لهذه الأشكال Style أن تعيد استخدام قوالب الأشكال الخاصة بالتحكمات مما يمكننا من إعادة تشكيل كامل مظهر هذه التحكمات بالشكل الذي نريده

فإن كان لدينا تحكمان Border و TextBlock تم تعريفهما كما يلي

<Border Grid.Column="0" Grid.Row="0" CornerRadius="30" Background="Blue" 
		Margin="10" Height="50">
	<TextBlock Text="Test" Foreground="Yellow" Margin="3" FontSize="20" 
			 HorizontalAlignment="Center" VerticalAlignment="Center" ></TextBlock>
</Border>

فيمكننا إنشاء شكل Style ضمن الملف app.xaml ليغلف إعدادات كلا التحكمين كما يلي

<Style x:Key="MyBorder" TargetType="Border">
	<Setter Property="CornerRadius" Value="30"/>
	<Setter Property="Background" Value="Blue"/>
	<Setter Property="Margin" Value="10"/>
	<Setter Property="Height" Value="50"/>
</Style>

<Style x:Key="MyTextBlock" TargetType="TextBlock">
	<Setter Property="Foreground" Value="Yellow"/>
	<Setter Property="FontSize" Value="20"/>
	<Setter Property="Margin" Value="3"/>
	<Setter Property="HorizontalAlignment" Value="Center"/>
	<Setter Property="VerticalAlignment" Value="Center"/>
</Style>

حيث أصبح الآن بإمكاننا إعادة استخدام هذه الأشكال مع أكثر من تحكم كما يلي

<Border Grid.Column="0" Grid.Row="0" Style="{StaticResource MyBorder}">
	<TextBlock Text="Test" Style="{StaticResource MyTextBlock}"></TextBlock>
</Border>

كما يمكننا استخدام Style للتحكم بمظهر العديد من التحكمات الأخرى الشبكة مثلا

<Style x:Key="TopGrid" TargetType="Grid">
	  <Setter Property="Background" Value="#FF5C7590" />
</Style>

أو StackPanel

<Style x:Key="DiggPanel" TargetType="StackPanel">
	<Setter Property="Margin" Value="10"/>
	<Setter Property="Width" Value="55"/>
	<Setter Property="Height" Value="55"/>
	<Setter Property="Background">
		<Setter.Value>
			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
				<GradientStop Color="#FFFFF098"/>
				<GradientStop Color="#FFFFF9D4" Offset="1"/>
			</LinearGradientBrush>
		</Setter.Value>
	</Setter>
</Style>

أو الزر

<Style x:Key="CloseButton" TargetType="Button">
	<Setter Property="HorizontalAlignment" Value="Right"/>
	<Setter Property="Width" Value="50"/>
	<Setter Property="Height" Value="25"/>
	<Setter Property="Template">
		<Setter.Value>
				<ControlTemplate>
					<Border x:Name="brd1" Width="22" Height="22" CornerRadius="15">
					<TextBlock x:Name="txt1" Foreground="#222" TextAlignment="center" Text="r" FontSize="11" VerticalAlignment="center" FontFamily="Webdings"/>
						<Border.Background>
							<RadialGradientBrush GradientOrigin=".3, .3">
								<GradientStop Color="#FFF" Offset=".15"/>
								<GradientStop Color="#777" Offset="1"/>
							</RadialGradientBrush>
						</Border.Background>
					</Border>
				</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

أو HyperLinkButton

<Style x:Key="TitleLink" TargetType="HyperlinkButton">
	<!--<Setter Property="TextWrapping" Value="Wrap"/>-->
	<Setter Property="HorizontalAlignment" Value="Left"/>
	<Setter Property="FontSize" Value="16"/>
	<Setter Property="Foreground" Value="White"/>
	<Setter Property="Width" Value="500"/>
	<Setter Property="Grid.Row" Value="0"/>
	<Setter Property="Grid.Column" Value="1"/>
	<Setter Property="Grid.ColumnSpan" Value="2"/>
</Style>

وبنفس الأسلوب يمكننا تخصيص مظهر أي تحكم نريده

ويتم وضع الاستايل في الملف App.xaml وذلك بعد <Application.Resources> و قبل </Application.Resources> مثال

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
			 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
			 x:Class="SilverlightApplication5.App"
			 >
	<Application.Resources>

		<Style x:Key="MyBorder" TargetType="Border">
			<Setter Property="CornerRadius" Value="30"/>
			<Setter Property="Background" Value="Blue"/>
			<Setter Property="Margin" Value="10"/>
			<Setter Property="Height" Value="50"/>
		</Style>

		<Style x:Key="MyTextBlock" TargetType="TextBlock">
			<Setter Property="Foreground" Value="Yellow"/>
			<Setter Property="FontSize" Value="20"/>
			<Setter Property="Margin" Value="3"/>
			<Setter Property="HorizontalAlignment" Value="Center"/>
			<Setter Property="VerticalAlignment" Value="Center"/>

		</Style>

	</Application.Resources>
</Application>

كيف نسستخدم عناصر Style للتحكم بمظهر التطبيق

مواضيع مشابهة

عدد الزوار حالياً