XAML - สไตล์

เฟรมเวิร์ก XAML มีกลยุทธ์มากมายในการปรับแต่งและปรับแต่งรูปลักษณ์ของแอปพลิเคชัน สไตล์ทำให้เรามีความยืดหยุ่นในการตั้งค่าคุณสมบัติบางอย่างของออบเจ็กต์และนำการตั้งค่าเฉพาะเหล่านี้กลับมาใช้ใหม่ในหลาย ๆ ออบเจ็กต์

• ในสไตล์คุณสามารถตั้งค่าเฉพาะคุณสมบัติที่มีอยู่ของวัตถุเช่นความสูงความกว้างและขนาดตัวอักษร

• สามารถระบุพฤติกรรมเริ่มต้นของตัวควบคุมเท่านั้น

• สามารถเพิ่มคุณสมบัติหลายรายการลงในสไตล์เดียวได้

สไตล์ถูกใช้เพื่อให้ชุดควบคุมมีลักษณะเหมือนกัน Implicit Styles ใช้เพื่อใช้ลักษณะที่ปรากฏกับการควบคุมทั้งหมดของประเภทที่กำหนดและทำให้แอปพลิเคชันง่ายขึ้น

ลองนึกภาพว่าเรามีปุ่มสามปุ่มและปุ่มทั้งหมดจะต้องมีลักษณะเหมือนกัน - ความกว้างและความสูงเท่ากันขนาดแบบอักษรเดียวกันและสีพื้นหน้าเดียวกัน เราสามารถตั้งค่าคุณสมบัติเหล่านั้นทั้งหมดบนองค์ประกอบของปุ่มได้ด้วยตัวเองและยังค่อนข้างโอเคสำหรับปุ่มทั้งหมดดังแสดงในแผนภาพต่อไปนี้

แต่ในแอปในชีวิตจริงคุณจะมีสิ่งเหล่านี้อีกมากมายที่ต้องมีลักษณะเหมือนกันทุกประการ และไม่เพียง แต่ปุ่มเท่านั้นโดยทั่วไปคุณจะต้องการให้บล็อคข้อความกล่องข้อความและกล่องคำสั่งผสม ฯลฯ มีลักษณะเหมือนกันในแอปของคุณ แน่นอนว่าต้องมีวิธีที่ดีกว่าในการบรรลุเป้าหมายนี้ - เรียกว่าstyling. คุณสามารถคิดว่าสไตล์เป็นวิธีที่สะดวกในการใช้ชุดค่าคุณสมบัติกับองค์ประกอบมากกว่าหนึ่งองค์ประกอบดังที่แสดงในแผนภาพต่อไปนี้

มาดูตัวอย่างที่มีปุ่มสามปุ่มซึ่งสร้างขึ้นใน XAML พร้อมคุณสมบัติบางอย่าง

<Window x:Class = "XAMLStyle.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:XAMLStyle" mc:Ignorable = "d" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <StackPanel> 
      <Button Content = "Button1" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/>
      
      <Button Content = "Button2" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/>
      
      <Button Content = "Button3" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/> 
   </StackPanel> 
	
</Window>

เมื่อคุณดูโค้ดด้านบนคุณจะเห็นว่าสำหรับปุ่มทั้งหมดความสูงความกว้างสีพื้นหน้าขนาดตัวอักษรและคุณสมบัติระยะขอบยังคงเหมือนเดิม เมื่อโค้ดด้านบนถูกคอมไพล์และเรียกใช้โค้ดจะแสดงผลลัพธ์ต่อไปนี้ -

ตอนนี้เรามาดูตัวอย่างกัน แต่คราวนี้เราจะใช้ style.

<Window x:Class = "XAMLStyle.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:XAMLStyle" mc:Ignorable = "d" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Window.Resources> 
      <Style x:Key = "myButtonStyle" TargetType = "Button">
         <Setter Property = "Height" Value = "30"/> 
         <Setter Property = "Width" Value = "80"/> 
         <Setter Property = "Foreground" Value = "Blue"/> 
         <Setter Property = "FontSize" Value = "12"/> 
         <Setter Property = "Margin" Value = "10"/> 
      </Style>
   </Window.Resources> 
	
   <StackPanel> 
      <Button Content = "Button1" Style = "{StaticResource myButtonStyle}"/>
      <Button Content = "Button2" Style = "{StaticResource myButtonStyle}"/>
      <Button Content = "Button3" Style = "{StaticResource myButtonStyle}"/>
   </StackPanel>
	
</Window>

สไตล์ถูกกำหนดไว้ในพจนานุกรมทรัพยากรและแต่ละสไตล์มีตัวระบุคีย์ที่ไม่ซ้ำกันและประเภทเป้าหมาย ภายใน <style> คุณจะเห็นว่ามีการกำหนดแท็ก setter หลายรายการสำหรับแต่ละคุณสมบัติซึ่งจะรวมอยู่ในสไตล์

ในตัวอย่างข้างต้นขณะนี้คุณสมบัติทั่วไปทั้งหมดของแต่ละปุ่มได้รับการกำหนดสไตล์แล้วจากนั้นสไตล์จะถูกกำหนดให้กับแต่ละปุ่มด้วยคีย์ที่ไม่ซ้ำกันโดยการตั้งค่าคุณสมบัติสไตล์ผ่านส่วนขยายมาร์กอัป StaticResource

เมื่อโค้ดด้านบนถูกคอมไพล์และเรียกใช้งานจะสร้างหน้าต่างต่อไปนี้ซึ่งเป็นเอาต์พุตเดียวกัน

ข้อดีของการทำแบบนี้จะเห็นได้ชัดทันที เราสามารถนำสไตล์นั้นมาใช้ซ้ำได้ทุกที่ในขอบเขตและถ้าเราจำเป็นต้องเปลี่ยนเราก็เปลี่ยนเพียงครั้งเดียวในการกำหนดสไตล์แทนที่จะเป็นในแต่ละองค์ประกอบ

ในระดับใดที่สไตล์ถูกกำหนดโดยทันทีจะ จำกัด ขอบเขตของสไตล์นั้น ดังนั้นขอบเขตเช่นที่คุณสามารถใช้สไตล์ได้ขึ้นอยู่กับตำแหน่งที่คุณกำหนดไว้ สไตล์สามารถกำหนดได้ในระดับต่อไปนี้ -

ซีเนียร์ No	ระดับและคำอธิบาย
1	ระดับการควบคุม การกำหนดสไตล์ในระดับการควบคุมสามารถใช้ได้กับตัวควบคุมนั้น ๆ เท่านั้น
2	ระดับเค้าโครง การกำหนดสไตล์ในระดับเค้าโครงใด ๆ สามารถเข้าถึงได้โดยเค้าโครงนั้นและโดยองค์ประกอบลูกเท่านั้น
3	ระดับหน้าต่าง การกำหนดสไตล์ในระดับหน้าต่างสามารถเข้าถึงได้โดยองค์ประกอบทั้งหมดบนหน้าต่างนั้น
4	ระดับการใช้งาน การกำหนดสไตล์ในระดับแอปทำให้สามารถเข้าถึงได้ในแอปพลิเคชันทั้งหมด