.NET और WPF में 10 मिनट में सेमी-प्रीज़ी

यह प्रीजी वेब सेवा की तरह एक प्रस्तुति खेलने के लिए एक कार्यक्रम बनाने के बारे में होगा, हालांकि एक समान अवधारणा पहले मानक टेम्पलेट्स में से एक में PowerPoint 2010 में देखी जा सकती थी।

स्लाइड्स के रूप में सामान्य प्रस्तुति से अंतर सामग्री के लिए एक कैनवास की तरह एक ठोस पृष्ठभूमि की उपस्थिति है, जहां सामग्री के साथ एक क्षेत्र से दूसरे में जाने से चलती है, ज़ूम इन और आउट होती है।





इसलिए, हम .NET और WPF में कुछ समान कर रहे हैं। निजी तौर पर, मुझे VB.NET पसंद है (शायद {...} की कमी के कारण जो C # में एक पूरी लाइन को लेती है)।

आवश्यक: VisualStudio, फ्रेमवर्क 4 और एक स्वस्थ तस्वीर, उदाहरण के लिए 4800x3800, फ़ोटोशॉप में कुछ सामग्री के साथ खींची गई (आप PowerPoint निर्यात के साथ स्लाइड के एक जोड़े को चिपका सकते हैं):



VisualStudio में हम एक खाली WPF प्रोजेक्ट बनाते हैं और निम्नलिखित चीजों को "फ़ॉर्म" में जोड़ते हैं:
एक आकृति विस्तार के साथ ImageBg पृष्ठभूमि छवि, छिपी सलाखों के साथ स्क्रॉल दृश्य घटक और इसमें विस्तार के बिना एक और Image1 छवि।

<Grid Name="Grid1"> <Image Name="ImageBg" Stretch="Fill"/> <ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"> <Image Name="Image1" Stretch="None"/> </ScrollViewer> </Grid> 

हम चर सेट करते हैं:

  '    Dim base_dir As String = System.AppDomain.CurrentDomain.BaseDirectory() '  Dim trTranslate As New TranslateTransform '  Dim trRotate As New RotateTransform '  Dim trScale As New ScaleTransform ' (- ) Dim stp As Integer = 0 '-  Dim stp_count As Integer = 0 '     Dim ease As New PowerEase '   (, , ) Dim init_s, init_a As Double Dim init_x, init_y As Integer '   (, ,    ) Dim new_z(99) As Double Dim new_a(99) As Double Dim new_x(99) As Double Dim new_y(99) As Double Dim new_t(99) As Double 

हम Window_Loaded में चित्र लोड कर रहे हैं:

ImageBg.Source = New BitmapImage(New Uri(base_dir + "bg.jpg"))
Image1.Source = New BitmapImage(New Uri(base_dir + "content.jpg"))


कुछ पृष्ठभूमि (उदाहरण के लिए, काले) और content.jpg के साथ फाइल bg.jpg को डिबग फ़ोल्डर में डालने की आवश्यकता है।
आप सामग्री में एक .png ट्रांसपेरेंसी मास्क भी जोड़ सकते हैं, लेकिन अभी तक यह बहुत ही शानदार है।

वहां, छवि लोड करने के बाद, हम परिवर्तन मापदंडों को लिखते हैं:

Dim transf_grp As New TransformGroup
transf_grp.Children.Add(trTranslate)
transf_grp.Children.Add(trRotate)
transf_grp.Children.Add(trScale)
Image1.RenderTransform = transf_grp


यानी एक परिवर्तन समूह बनाया जाता है, जिसमें तीन अलग-अलग प्रकार के परिवर्तन शामिल होते हैं।

हम सामग्री की प्रारंभिक स्थिति को सेट करते हैं ताकि बड़ी तस्वीर एक छोटे से अंतराल के साथ स्क्रीन में फिट हो जाए (मानवीय रूप से यह स्ट्रेच और मार्जिन गुणों द्वारा किया जाता है, लेकिन इस मामले में यह परिवर्तन के माध्यम से आवश्यक है):


init_s = Math.Round(Grid1.ActualWidth / (Image1.Source.Width + 50), 2)
init_a = 0
init_x = 50
init_y = (Grid1.ActualHeight - (Image1.Source.Height) * init_s) * 2
trScale.ScaleX = init_s
trScale.ScaleY = init_s
trRotate.Angle = init_a
trTranslate.X = init_x
trTranslate.Y = init_y


किसी फ़ाइल से चरण सूची लोड करना:

If File.Exists(base_dir + "loc.ini") Then
Dim oRead As System.IO.StreamReader = File.OpenText(base_dir + "loc.ini")
Dim data(99) As String
Dim i As Integer = 0
Do While oRead.Peek >= 0
i += 1
data(i) = oRead.ReadLine()
Dim param() As String = data(i).Split(",")
new_z(i) = CDbl(param(0))
new_a(i) = CDbl(param(1))
new_x(i) = CDbl(param(2))
new_y(i) = CDbl(param(3))
new_t(i) = CDbl(param(4))
If new_z(i) <> 0 Then stp_count += 1
Loop
oRead.Close()
End If


फ़ाइल संरचना: प्रत्येक पंक्ति एक नया चरण है, और लाइन में 5 पैरामीटर हैं, जो अल्पविराम (स्केल, कोण, x और y निर्देशांक, गतिमान समय) द्वारा अलग किए गए हैं

चरणों के बीच बढ़ने के लिए हैंडलिंग जोड़ें:

Private Sub NavigationStep()
Dim Z_anim As New DoubleAnimation(trScale.ScaleX, new_z(stp), TimeSpan.FromSeconds(new_t(stp)))
Dim A_anim As New DoubleAnimation(trRotate.Angle, new_a(stp), TimeSpan.FromSeconds(new_t(stp) / 2))
Dim X_anim As New DoubleAnimation(trTranslate.X, new_x(stp), TimeSpan.FromSeconds(new_t(stp)))
Dim Y_anim As New DoubleAnimation(trTranslate.Y, new_y(stp), TimeSpan.FromSeconds(new_t(stp)))
ease.EasingMode = EasingMode.EaseInOut
Z_anim.EasingFunction = ease
A_anim.EasingFunction = ease
X_anim.EasingFunction = ease
Y_anim.EasingFunction = ease
trScale.BeginAnimation(ScaleTransform.ScaleXProperty, Z_anim)
trScale.BeginAnimation(ScaleTransform.ScaleYProperty, Z_anim)
trRotate.BeginAnimation(RotateTransform.AngleProperty, A_anim)
trTranslate.BeginAnimation(TranslateTransform.XProperty, X_anim)
trTranslate.BeginAnimation(TranslateTransform.YProperty, Y_anim)
End Sub


पैमाने, कोण और निर्देशांक के लिए सिर्फ 4 एनिमेशन हैं (ज़ाहिर है, कोड की शुद्धता के लिए चर पहले से निर्धारित किए जा सकते हैं, लेकिन यह भी लगभग कॉम्पैक्ट है)।

वास्तव में यह सब संक्षेप में है।
यह उदाहरण के लिए, टेक्स्ट फ़ाइल loc.ini में कई चरणों को लिखने के लिए बना हुआ है:
1.5,0,-70,-40,1.5
2,-100,-1200,-100,2
3,85,110,-640,1
4,35,-735,-1800,0.5

और कोड में चरणों के बीच स्विचिंग को सक्रिय करें:

Private Sub Image1_MouseUp(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Handles Image1.MouseUp
If Not setup_mode And Not sel_mode Then
If e.GetPosition(Grid1).X < Grid1.ActualWidth / 2 Then
stp -= 1
If stp <= 0 Then stp = stp_count
NavigationStep()
End If
If e.GetPosition(Grid1).X >= Grid1.ActualWidth / 2 Then
stp += 1
If stp = stp_count + 1 Then stp = 1
NavigationStep()
End If
End If
End Sub


यदि आपने सामग्री छवि के बाईं ओर क्लिक किया है - एक कदम पीछे, दाईं ओर - आगे।

सामान्य ऑपरेशन के लिए, निश्चित रूप से, आपको नए मापदंडों के बाद की बचत के साथ एक ट्यूनिंग मोड की आवश्यकता है। लेकिन यहां मैं इसका वर्णन नहीं करूंगा, और एक कार्यशील बीटा संस्करण यहां डाउनलोड किया जा सकता है । चलाने के लिए, आपको फ्रेमवर्क 4 की आवश्यकता है।

आप कई तरीकों से कार्यक्रम को बेहतर बना सकते हैं - वेक्टर सामग्री के लिए समर्थन जोड़ सकते हैं (जो प्रीजी के करीब आएगा), परियोजना को बचाएं, कॉन्फ़िगर करने के लिए मल्टी-टच जोड़ें, त्वरित नेविगेशन, कैनवास सामग्री को बदलें और बहुत कुछ।