Silverlight - โมเดลเนื้อหา

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

ให้เราดูตัวอย่างง่ายๆด้วยปุ่มปุ่มภายในปุ่มควบคุมเนื้อหาอื่น ๆ

<UserControl x:Class = "ContentModel.MainPage" 
   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" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
	
      <Button Margin = "3" Height = "70" Width = "215"> 
         <Grid Margin = "5"> 
            <Polygon Points = "100,25 125,0 200,25 125,50" Fill = "LightSteelBlue" /> 
            <Polygon Points = "100,25 75,0 0,25 75,50" Fill = "LightGray"/> 
         </Grid> 
      </Button> 
		
   </Grid> 
	
</UserControl>

เมื่อโค้ดด้านบนถูกคอมไพล์และดำเนินการคุณจะเห็นปุ่มต่อไปนี้

RangeControl

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

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

การสืบทอดตามลำดับชั้นของ Slider คลาสมีดังนี้ -

ด้านล่างนี้เป็นวิธีที่ใช้กันทั่วไป properties ของ Slider.

ด้านล่างนี้เป็นคุณสมบัติที่ใช้บ่อยที่สุดของ Slider

เลขที่	คุณสมบัติและคำอธิบาย
1	Header รับหรือตั้งค่าเนื้อหาสำหรับส่วนหัวของตัวควบคุม
2	HeaderProperty ระบุคุณสมบัติการพึ่งพาส่วนหัว
3	HeaderTemplate รับหรือตั้งค่า DataTemplate ที่ใช้เพื่อแสดงเนื้อหาของส่วนหัวของตัวควบคุม
4	HeaderTemplateProperty ระบุคุณสมบัติการพึ่งพา HeaderTemplate
5	IntermediateValue รับหรือตั้งค่าของ Slider ในขณะที่ผู้ใช้กำลังโต้ตอบกับค่านั้นก่อนที่ค่าจะถูกหักเป็นค่าขีดหรือค่าขั้นตอน คุณสมบัติ SnapsTo ระบุค่าของตัวเลื่อน
6	IntermediateValueProperty ระบุคุณสมบัติ IntermediateValue dependency
7	IsDirectionReversed รับหรือตั้งค่าที่ระบุทิศทางของมูลค่าที่เพิ่มขึ้น
8	IsDirectionReversedProperty ระบุคุณสมบัติการอ้างอิง IsDirectionReversed
9	IsThumbToolTipEnabled รับหรือตั้งค่าที่กำหนดว่าค่าตัวเลื่อนจะแสดงในปลายเครื่องมือสำหรับส่วนประกอบ Thumb ของตัวเลื่อนหรือไม่
10	IsThumbToolTipEnabledProperty ระบุคุณสมบัติการอ้างอิง IsThumbToolTipEnabled
11	Orientation รับหรือตั้งค่าการวางแนวของแถบเลื่อน
12	OrientationProperty ระบุคุณสมบัติการพึ่งพาการวางแนว
13	StepFrequency รับหรือตั้งค่าส่วนค่าของช่วงค่าที่ควรสร้างขั้นตอน
14	StepFrequencyProperty ระบุคุณสมบัติการพึ่งพา StepFrequency
15	ThumbToolTipValueConverter รับหรือตั้งค่าลอจิกคอนเวอร์เตอร์ที่แปลงค่าช่วงของตัวเลื่อนเป็นเนื้อหาทิปเครื่องมือ
16	ThumbToolTipValueConverterProperty ระบุคุณสมบัติการพึ่งพา ThumbToolTipValueConverter
17	TickFrequency รับหรือตั้งค่าส่วนเพิ่มของช่วงค่าที่ควรสร้างติ๊ก
18	TickFrequencyProperty ระบุคุณสมบัติการพึ่งพา TickFrequency
19	TickPlacement รับหรือกำหนดค่าที่ระบุตำแหน่งที่จะวาดเครื่องหมายถูกที่สัมพันธ์กับแทร็ก
20	TickPlacementProperty ระบุคุณสมบัติการอ้างอิง TickPlacement

ด้านล่างนี้เป็นวิธีที่ใช้กันทั่วไป events ใน Slider ชั้นเรียน

ด้านล่างนี้เป็นเหตุการณ์ที่ใช้บ่อยที่สุดของ Slider

เลขที่	เหตุการณ์และคำอธิบาย
1	ManipulationCompleted เกิดขึ้นเมื่อการจัดการบน UIElement เสร็จสมบูรณ์ (รับมาจาก UIElement)
2	ManipulationDelta เกิดขึ้นเมื่ออุปกรณ์อินพุตเปลี่ยนตำแหน่งระหว่างการปรับแต่ง (รับมาจาก UIElement)
3	ManipulationInertiaStarting เกิดขึ้นเมื่ออุปกรณ์อินพุตสูญเสียการติดต่อกับออบเจ็กต์ UIElement ระหว่างการปรับแต่งและความเฉื่อยเริ่มต้นขึ้น (รับมาจาก UIElement)
4	ManipulationStarted เกิดขึ้นเมื่ออุปกรณ์อินพุตเริ่มการจัดการกับ UIElement (รับมาจาก UIElement)
5	ManipulationStarting เกิดขึ้นเมื่อตัวประมวลผลการจัดการถูกสร้างขึ้นครั้งแรก (รับมาจาก UIElement)
6	ValueChanged เกิดขึ้นเมื่อค่าช่วงเปลี่ยนไป (รับมาจาก RangeBase)

ด้านล่างนี้เป็นวิธีที่ใช้กันทั่วไป methods in คลาสสไลเดอร์

ด้านล่างนี้เป็นวิธีการที่ใช้บ่อยที่สุดของ Slider

เลขที่	วิธีการและคำอธิบาย
1	OnManipulationCompleted เรียกว่าก่อนเหตุการณ์ ManipulationCompleted จะเกิดขึ้น (สืบทอดมาจากการควบคุม)
2	OnManipulationDelta เรียกว่าก่อนเหตุการณ์ ManipulationDelta จะเกิดขึ้น (สืบทอดมาจากการควบคุม)
3	OnManipulationInertiaStarting เรียกว่าก่อนเหตุการณ์ ManipulationInertiaStarting จะเกิดขึ้น (สืบทอดมาจากการควบคุม)
4	OnManipulationStarted เรียกว่าก่อนเหตุการณ์ ManipulationStarted จะเกิดขึ้น (สืบทอดมาจากการควบคุม)
5	OnManipulationStarting เรียกว่าก่อนเหตุการณ์ ManipulationStarting จะเกิดขึ้น (สืบทอดมาจากการควบคุม)
6	OnMaximumChanged เรียกว่าเมื่อคุณสมบัติสูงสุดเปลี่ยนแปลง (รับมาจาก RangeBase)
7	OnMinimumChanged เรียกว่าเมื่อคุณสมบัติขั้นต่ำเปลี่ยนแปลง (รับมาจาก RangeBase)
8	OnValueChanged เริ่มเหตุการณ์ที่กำหนดเส้นทาง ValueChanged (รับมาจาก RangeBase)
9	SetBinding แนบการผูกกับ FrameworkElement โดยใช้อ็อบเจ็กต์การผูกที่จัดเตรียมไว้ (สืบทอดจาก FrameworkElement)
10	SetValue ตั้งค่าโลคัลของคุณสมบัติการอ้างอิงบน DependencyObject (สืบทอดจาก DependencyObject)

ตัวอย่าง

ให้เราดูตัวอย่างง่ายๆที่เพิ่มแถบเลื่อนและวงรีและแถบเลื่อนควบคุมความกว้างของวงรี

<UserControl x:Class = "SliderExample.MainPage" 
   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"  
   mc:Ignorable = "d" d:DesignWidth = "640" d:DesignHeight = "480"> 
   
   <Grid x:Name = "LayoutRoot">
	
      <Grid.RowDefinitions> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition /> 
      </Grid.RowDefinitions>  
		
      <Slider Minimum = "1" Maximum = "400" Value = "1" 
         ValueChanged = "Slider_ValueChanged" />  
			
      <Ellipse Grid.Row = "1" Fill = "Aqua" Width = "1" x:Name = "myEllipse" /> 
		
   </Grid> 
	
</UserControl>

ด้านล่างคือไฟล์ value changed event การใช้งานคือ C #

using System.Windows; 
using System.Windows.Controls; 
 
namespace SliderExample { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      }
	  
      private void Slider_ValueChanged(object sender, 
         RoutedPropertyChangedEventArgs<double> e) { 
			
            if (myEllipse != null) { 
               myEllipse.Width = e.NewValue; 
            } 
      } 
   } 
}

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