» »

[Silverlight 4] Omejeno premikanje elementov v canvasu

[Silverlight 4] Omejeno premikanje elementov v canvasu

zenb ::

Izdelujem aplikacijo v Silverlight 4, kjer ima uporabnik na desni strani v stackpanel-u elemente(elementi so slikce), ki jih lahko poljubno dodaja v canvas. Ko je element dodan v canvas, jih lahko premikamo po vsem canvasu. Tukaj pa nastane problem, saj lahko uporabnik premika elemente po vsej strani in ne samo v canvasu.

Rad bi, da ko je MouseLeftButtonDown in element Capture true in pride uporabnik do roba canvasa, se premikanje naprej ustavi. Kot, da bi bila miška ujeta znotraj canvasa. Na internetu sem izbrskal, da C# podpira Cursor.Clip, vendar mislim da tega ni v Silverlight 4.

Tako, da bi vas prosil za pomoč, kako doseči takšen učinek. Poskušal sem že z border control, vendar mi je uspelo doseči samo to, da če je bil element izven canvasa, je preprosto izginil.

XAML koda:
<Grid Margin="0,154,0,25" x:Name="designGrid">
    		<Grid.ColumnDefinitions>
    			<ColumnDefinition Width="*"/>
    			<ColumnDefinition Width="0.155*"/>
    		</Grid.ColumnDefinitions>
            <Canvas Grid.Column="0" Background="#0b4a85" x:Name="designCanvas"/>
    		<ScrollViewer Grid.Column="1" Background="#0b4a85" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
    			<StackPanel Height="Auto" Width="145" Background="#0b4a85" x:Name="imageStackPanel" Orientation="Vertical"/>
    		</ScrollViewer>
            <sdk:GridSplitter HorizontalAlignment="Right"  Width="10" LostMouseCapture="GridSplitter_LostMouseCapture"  />
            <Border BorderBrush="Black" Grid.Column="0" Height="Auto" Width="Auto" BorderThickness="5" Margin="0,0,11,0"/>
        </Grid>


Premikanje elementov po canvasu:

 void cvs_MouseMove(object sender, MouseEventArgs e)
        {

            if (isDragDropInEffect)
            {

                FrameworkElement currEle = sender as FrameworkElement;

                // Retrieving the item's current x and y position
                double xPos = e.GetPosition(null).X - pos.X;
                double yPos = e.GetPosition(null).Y - pos.Y;

                // Nova pozicija elementa v canvasu
                currEle.SetValue(Canvas.TopProperty, yPos + (double)currEle.GetValue(Canvas.TopProperty));
                currEle.SetValue(Canvas.LeftProperty, xPos + (double)currEle.GetValue(Canvas.LeftProperty));

                // shranjeno pozicijo miške nastavimo na nič
                pos = e.GetPosition(null);
           }
        }

        void cvs_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            FrameworkElement fEle = sender as FrameworkElement;
            isDragDropInEffect = true;
            // x and y koordinate miške
            pos = e.GetPosition(null);
            fEle.CaptureMouse();
            fEle.Cursor = Cursors.Hand;

        }

        void cvs_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (isDragDropInEffect)
            {
                FrameworkElement ele = sender as FrameworkElement;
                isDragDropInEffect = false;
                ele.ReleaseMouseCapture();
            }
        }

detroit ::

http://forums.silverlight.net/forums/p/...

upam da kej pomaga jest mislim da sm mel isti problem sm na koncu se nism preveč ubadal ker je blo čist postranskega pomena
Skero

Zgodovina sprememb…

  • spremenil: detroit ()

zenb ::

Hvala za odgovor, vendar je tema, katero si podal na silverlight.net moja:). Na žalost, mi tega še ni uspelo usposobiti, da bi kolikor toliko delalo, zato sem poskusil srečo še na slo-tech-u.

Pri meni pa je ravno obratno, je med pomembnejšimi stvarmi, da to deluje, tako da nekako morem zgruntat, da bo stvar delovala.

Ni nobenih idej, sej rabim bolj ideje, če pa bo kdo prilepil še kakšen source code, pa še toliko boljše.

detroit ::

Vem da sm imel delujočo kodo nek z neta. hmm če se prou spomnim je men prvič prav delal pol sm pa layout strani spreminjal pa je začel še men izven metat. Eh tud pod razno se ne bom prou spomnu. Vem samo da sem iskal element dragging v googlu in našel kodo, ki je delala na examplu, sam nisem probaval.
Skero

tomaz_sres ::

Koliko sem prebral na netu je problem, ker v Silverlight lahko samo prebereš pozicijo
miške ne moreš je pa spreminjat, torej ti nič ne pomaga, če veš, da si na robu, ko pa ne moreš postaviti pos na prejšnje znano vrednost.
Lep pozdrav, Tomaž Sreš, http://www.sres.si

zenb ::

tomaz_sres je izjavil:

Koliko sem prebral na netu je problem, ker v Silverlight lahko samo prebereš pozicijo
miške ne moreš je pa spreminjat, torej ti nič ne pomaga, če veš, da si na robu, ko pa ne moreš postaviti pos na prejšnje znano vrednost.


Hm..to sem tudi sam nekje zasledil, vendar nisem razmišljal o tem.

Torej bi trenutno bila moja edina rešitev, da če uporabnik prestavi element izven canvasa, ga na to opozorim, ne vem, da obrobim element z rdečim robom, ko pa uporabnik spusti element, pa preverim ali je v canvasu ali ne. Če ni enostavno prestavim objekt na prejšnjo pozicijo.

Malo učna uporabniška izkušnja, muči me, da enostavno ne morem zgruntat kakšne boljše rešitve. Ker če lahko uporabnik kroži po celi strani z temi elementi vse skupaj deluje rahlo smešno.

Drugače pa hvala za pomoč, vendar še vedno upam, da se bo našla še kakšna boljša ideja.

tomaz_sres ::

Ali pa, ko zaznaš, da je izven canvasa programsko spustiš element nekam na sredino, če to gre?
Lep pozdrav, Tomaž Sreš, http://www.sres.si

detroit ::

ja pogledaš če ni onmouse release (al karkoli je že) od elementa parent canvas, če ni ga dropneš na center al pa kej. Sounds good hehe, mal annoying ampak boljš kot nič
Skero

xordie ::

Ideja, ki so ti jo podali na drugem forumu je, da pri prehodu meje canvasa slike vec ne premikas. Prilagajaj koordinate samo takrat ko si znotraj canvasa, drugace pa nastavis sliko na rob(upostevaj se velikost slike). S tem bos dobil efekt kjer misko premikas kam hoces slika pa ji bo sledila vendar samo v mejah canvasa.

Drugace pa nimam pojma o Silverlight. :)
x

zenb ::

Sem malo razmislil o tem, pa se mi zdi ideja, da ko uporabnik pride izven canvasa, se mouseCaptcure sprosti, element postavim na rob znotraj canvasa, pa uporabnika z nekakšnim dropdown-om opozorim na vrhu strani, da ne sme premikati objektov izven canvasa. Ne vem, po mojem mnenju je to dosti manj moteče kot pa če uporabnik kroži po vsej strani z miško, objekt pa se ne premika.

Hvala vsem še enkrat za pomoč, bomo videli kaj se da naredit. Seveda, pa sem še vedno odprt za vse predloge:).

detroit ::

hmm kaj pa ko dragaš (onMouseMove or something?) če bi dal v ta event preverjanje če je element within canvas.
Pseudo (predpostavljamo da je koordinatno izhodišče 0,0 v levem kotu in da x in y position od elementa jemle z njegovega centra)
recimo if (element.xposition+element.width/2 => canvas.xposition + canvas.width/2) then
element.xposition = canvas.xposition + canvas.width/2 - element.width/2

hehe upam da sm prav spackou, v glavnem to bi veljalo za desno stran za levo gor in dol pa sam prevekslaš
Skero

xordie ::

Verjetno se ne razumema. Slika se se vedno premika vendar v mejah canvasa.

Nekako tako:

Ce primes sliko z misko in jo premaknes po y osi izven canvasa se slika ustavi na robu canvasa (miska se je premaknila dalje). Ce zdaj premaknes misko po x osi (miska je izven canvasa) se slika pravtako premakne po x osi, y pa ostane se vedno na robu canvasa. Tako v primeru, da sliko odneses iz canvasa in nato zaokrozis z misko okoli, se slika premika po robovih canvasa.

S tem dobis neki navidezen zid, ki ga zelis. Ampak ta zid obstaja samo za sliko, miska se lahko prosto gliblje izvenj njega.
x


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

[Android] pomoč pri postavitvi layouta

Oddelek: Programiranje
122220 (1978) icurk
»

[Android] Splošno

Oddelek: Programiranje
352004 (1134) piki12
»

[c#] ukaz radirka

Oddelek: Programiranje
91111 (904) japol
»

android črta

Oddelek: Programiranje
412399 (1670) g333kk
»

[c#] Risanje z miško

Oddelek: Programiranje
221427 (1108) japol

Več podobnih tem