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.

เลขที่ คุณสมบัติและคำอธิบาย
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 ชั้นเรียน

เลขที่ เหตุการณ์และคำอธิบาย
1

ManipulationCompleted

เกิดขึ้นเมื่อการจัดการบน UIElement เสร็จสมบูรณ์ (รับมาจาก UIElement)

2

ManipulationDelta

เกิดขึ้นเมื่ออุปกรณ์อินพุตเปลี่ยนตำแหน่งระหว่างการปรับแต่ง (รับมาจาก UIElement)

3

ManipulationInertiaStarting

เกิดขึ้นเมื่ออุปกรณ์อินพุตสูญเสียการติดต่อกับออบเจ็กต์ UIElement ระหว่างการปรับแต่งและความเฉื่อยเริ่มต้นขึ้น (รับมาจาก UIElement)

4

ManipulationStarted

เกิดขึ้นเมื่ออุปกรณ์อินพุตเริ่มการจัดการกับ UIElement (รับมาจาก UIElement)

5

ManipulationStarting

เกิดขึ้นเมื่อตัวประมวลผลการจัดการถูกสร้างขึ้นครั้งแรก (รับมาจาก UIElement)

6

ValueChanged

เกิดขึ้นเมื่อค่าช่วงเปลี่ยนไป (รับมาจาก RangeBase)

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

เลขที่ วิธีการและคำอธิบาย
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; 
            } 
      } 
   } 
}

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