drag کردن اشیا برنامه

[hamidhws]

سلام دوستان

میخواستم ببینم بهترین راه برای drag کردن کنترل های داخلی برنامه چیه؟

لطفا مثالی در رابطه با grid بفرمایید که چطوری میشه با گرفتن چپ کلیک موس گرید هم همراهش حرکت کنه و با رها کردنش گرید هم رها بشه


ممنون

[mahdi7s]

سلام

چقدر این سوالاتان منو یاد یکی از جواب هام می ندازه
با بلند کار کردین؟ کافی است رفتار (Behavior) را به کنترلرتان(هر چی هست) اضافه کنید. نام رفتار (MouseDragElementBehavior)
-
بدون بلند و با VS باید کدی شبیه این داشته باشید:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    x:Class="SilverlightApplication3.MainPage"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="White">
        <Rectangle Fill="#FF1111E9" Margin="263,143,118,179" Stroke="Black">
            <i:Interaction.Behaviors>
                <ei:MouseDragElementBehavior/>
            </i:Interaction.Behaviors>
        </Rectangle>
    </Grid>
</UserControl>

توجه کنید که دو فضای نام i و ei را در کد دارید که آن ها هم نیاز به دو کتابخانه بلند به نام های Microsoft.Expression.Interactions و System.Windows.Interactivity دارند بنابراین این مراجع را باید در کلاینت داشته باشید

موفق باشید

[hamidhws]

ممنون دوست عزیز

بله blend 4 استفاده میکنم

behavior که فرمودید رو اضافه کردم به کنترلم اما بعدش کار خاصی باید انجام بدم؟ آخه تغییری ایجاد نمیشه

البته روی کنترلی مثل button

و یه سوال دیگه که فرمودید باید اون dll ها اضافه بشن , اگه من در قسمت reference اضافه کنم بعدا برای کاربر کلاینت مشکلی ایجاد نمیشود ؟ مثلا مجبور بشه اون dll ها رو جدا گانه دانلود کنه؟



اگه امکان داره در آخر هم یه توضیحی در رابطه با بقیه behavior ها و کارهاشون بفرمایید و آیا کنترلی هست که بتونیم قابلیت resize رو فعال کنیم؟


با تشکر

[mahdi7s]

behavior که فرمودید رو اضافه کردم به کنترلم اما بعدش کار خاصی باید انجام بدم؟ آخه تغییری ایجاد نمیشه

حالا می تونید کنترلرتان را درگ کنید...

و یه سوال دیگه که فرمودید باید اون dll ها اضافه بشن , اگه من در قسمت reference اضافه کنم بعدا برای کاربر کلاینت مشکلی ایجاد نمیشود ؟ مثلا مجبور بشه اون dll ها رو جدا گانه دانلود کنه؟

نه (تمام مراجع در فایل XAP شما کپسوله می شوند)

اگه امکان داره در آخر هم یه توضیحی در رابطه با بقیه behavior ها و کارهاشون بفرمایید و آیا کنترلی هست که بتونیم قابلیت resize رو فعال کنیم؟

رفتار تغییر سایز رو می تونید از اینجا دانلود کنید
-
اگر فقط می خواهید در مورد کارشون بدونید کافیه به اسمشون نگاه کنید! ولی اگه کمی می خواهید بیشتر بدانید توصیه می کنم این ویدئو را ببیند(می توانید در گوشه صفحه فرمت مورد نظرتان را دانلود کنید)

موفق باشید

[hamidhws]

ضمن تشکر از شما دوست عزیز

کنترلی که فرمودید رو دانلود کرده و اضافه کردم اما یه مشکلی دارم اونم اینه که به شی مورد نظرم هم قابلیت درگ اضافه کردم هم resize اما جواب نمیده اگه ممکنه خودتون امتحان کنید منظورمو متوجه میشید (یجورایی قاطی میکنه )

[hamidhws]

لطفا دوستان راهنمایی کنن برای رفع این مشکل چیکار باید کرد

[mahdi7s]

سلام

ببخشید کمی دیر جواب می دهم (برای یکی دیگه از دوستان هم قول یک سمپل دادم که ...)

هم قابلیت درگ اضافه کردم هم resize اما جواب نمیده

من تا حالا این دو رو با هم استفاده نکرده بودم! الان تست کردم بله مشکل از رفتار تغییر سایز است(1-مکان عنصر را بدون TranslateTransform محاسبه می کند. 2-حق دارد! چون او مسول تغییر سایز است!) من کمی به کدهایش نگاه کردم تا تغییرشان بدهم ولی سرگیجه گرفتم(بیچاره خودش!)
متاسفانه فعلا وقت درست و حسابی هم ندارم که خودم یک رفتار(البته با نام ResizableDragaableBehavior) بسازم ولی یک کنترلر جالب در اینجا می تونید پیدا کنید به نام adorner که کافی است آن را به پنلتان اضافه و کنترلری که می خواهید این دو رفتار را داشته باشد به خصیصه AdornedElement این کنترلر اختصاص دهید.(سورس را در همان صفحه می توانید دانلود کنید)

سوالی داشتید بپرسید انشاا... کمی فارغ تر بشوم و بتوانم بهتر جواب دهم

[hamidhws]

سلام دوست عزیز خیلی ممنونم از پاسخگویی خوب شما

کنترلی که معرفی کردید خیلی جالب بود سورس رو هم دانلود کردم اما نمیدونم چطوری کار کنم باهاش اگه ممکنه کمی راهنمایی بفرمایید ممنون میشم

AdornedElement رو چطوری تنظیم کنم؟

و اما غیر از اینا به یه مشکل نه چندان کوچک هم بر خوردم , اگه دقت کنید سایز پنجره ها تا یه اندازه محدود بزرگ میشه , آیا امکان داره به نوعی این محدودیت رو برداشت؟ (و یه مشکل دیگه وقتی در این حالت قرار داره یعنی در اندازه حداکثر هست اگه پنجره رو تکون داد کنترل هاش پاک میشه!)

بازم ممنونم

[mahdi7s]

سلام

AdornedElement رو چطوری تنظیم کنم؟

مثال

اگه دقت کنید سایز پنجره ها تا یه اندازه محدود بزرگ میشه , آیا امکان داره به نوعی این محدودیت رو برداشت؟

منظورتان را از پنجره ها متوجه نشدم...

[hamidhws]

سلام
ممنون از پاسخ گویی شما دوست عزیز
متاسفانه نتونستم لینک شمارو باز کنم اما با کمی ور رفتن با adorner تونستم طرز کارشو بفهمم

منظورتان را از پنجره ها متوجه نشدم...

منظورم همون کنترلی هستش که این خصوصیت ها بهش اختصاص دادیم



با تشکر

[mahdi7s]

سلام

لینک سمپل رو تصحیح کردم
-

اگه دقت کنید سایز پنجره ها تا یه اندازه محدود بزرگ میشه , آیا امکان داره به نوعی این محدودیت رو برداشت؟ (و یه مشکل دیگه وقتی در این حالت قرار داره یعنی در اندازه حداکثر هست اگه پنجره رو تکون داد کنترل هاش پاک میشه!)

احتمالا برای خود کنترلر Adorner هم اندازه گذاشته اید که محدودیت ایجاد می کند.

اگر می خواهید یک رنج سایز به کنترل هایتان بدهید از { Min-Max {Height-Width استفاده کنید

[hamidhws]

سلام دوست عزیز ممنون از پاسخ گویی شما

نه من محدودیت نگذاشتم فکر کنم از خود کنترل باشه


اما الان یه سوال دیگه داشتم

من این خصیصه (adorner)رو به یه گرید اضافه کردم و توش یه دیتا گرید گذاشتم

تا این جاش بوسیله adorner گریدمو تغییر سایز میدم و مشکلی ندارم اما وقتی zoom in , zoom out میکنم کیفیت نوشته های دیتا گریدم کم میشه در صورتی که اندازه نوشته هاشم تغییر نمیکنه! برای حل این مشکل راهی هست؟ مثلا میشه یه جوریی رفرش کرد تا کیفیتش درست بشه یا چه راهی پیشنهاد میدید؟


ممنونم از پاسخ گویی خوب شما دوست عزیز

[mahdi7s]

سلام

نه من محدودیت نگذاشتم فکر کنم از خود کنترل باشه

این محدودیت در سمپلی هم که گذاشتم هست؟(کمی بیشتر توضیح دهید)

اما وقتی zoom in , zoom out میکنم کیفیت نوشته های دیتا گریدم کم میشه در صورتی که اندازه نوشته هاشم تغییر نمیکنه!

zoom را چه جوری انجام می دهید؟ آیا zoom شامل تمام یک پنجره (که کنترلر گریدتان هم داخل آن است) می شود یا فقط همان گریدتان که جزئی از صفحه است؟

موفق باشید

[hamidhws]

سلام دوست عزیز

Untitled-2.jpg

اگه دقت کنید وقتی زیاد بزرگ میشه گوشه ها محو میشه و راهی جز این نیست که با zoom out پنجره رو به حالت اول درآورد

چطور میشه مقدار adorner.maxwidth رو طوری تنظیم کرد که از مقدار تمام صفحه بزرگ تر نشه؟


من اعمالمو روی یه گرید انجام میدم که اون گرید هم درون یه گرید دیگه هست و در واقع زوم رو هم بوسیله adorner انجام میدم با موس اسکرول





با تشکر از شما دوست عزیز

[mahdi7s]

سلام

احساس می کنم چندان ظاهر نرمالی درسته نکرده اید(منظورم چیدمان برنامه است)

چطور میشه مقدار adorner.maxwidth رو طوری تنظیم کرد که از مقدار تمام صفحه بزرگ تر نشه؟

می توانید آن را برابر یا کمتر است width خود صفحه قرار دهید(در زمان اجرا در کد یا در XAML با یک بایندینگ)

[hamidhws]

سلام
احساس می کنم چندان ظاهر نرمالی درسته نکرده اید(منظورم چیدمان برنامه است)

با سلام , متوجه منظورتون نشدم دوست عزیز اگه ممکنه کمی توضیح بفرمایید؟

می توانید آن را برابر یا کمتر است width خود صفحه قرار دهید(در زمان اجرا در کد یا در XAML با یک بایندینگ)

سلام دوست عزیز اگه یه نمونه از نحوه بایند کردن در حد 1 خط کد راهنمایی کنید ممنون میشم


با تشکر

[mahdi7s]

سلام

منظورم اینه که سعی کنید از پنل ها درست استفاده کنید
(
مثلا برای یک Path یا هر شکلی پنل مناسب Canvas هست و بقیه موارد اگثرا" شامل Grid و DockPanel و Stack می شود.
سعی کنید ظاهرتان هوشمند باشد یعنی با تغییر اندازه و جابجایی کنترلرها صفحه به هم نریزد
)

اگه یه نمونه از نحوه بایند کردن در حد 1 خط کد راهنمایی کنید ممنون میشم

اگر بایندیگ را نمی دانید با یک خط کد من هم قرار نیست چیزی دستگیرتان شود اما در MSDN می توانید توضیحات و سمپل ها زیادی پیدا کنید(لینک)
-
کافی است در متد Initialize صفحه تان مقدار MaxWidth آن گریدتان را برابر Width یا ActualWidth صفحه قرار دهید

myGrid.MaxWidth = this.Width;

// Or

myGrid.MaxWidth = this.ActualWidth;

بایندینگ

<UserControl x:Name="myPage">
    <Grid x:Name="myGrid" MaxWidth="{Binding Width, ElementName=myPage}" />
</<UserControl>

اگر اندازه صفحه تون تغییر می کنه از ActualWidth استفاده کنید

موفق باشید

[hamidhws]

سلام دوست عزیز

ممنون از پاسخ گوییتون

راستش برنامه هنوز کامل نشده و ظاهرش با هر سایزی خودشو کاملا منطبق میکنه

در واقع میخوام ظاهر برنامم تا حدی شبیه به دسکتاپ مک بشه , میخواستم نظر شما رو هم بدونم


از کمک شما سپاسگذارم دوست عزیز

[hamidhws]

سلام

منظورم اینه که سعی کنید از پنل ها درست استفاده کنید
(
مثلا برای یک Path یا هر شکلی پنل مناسب Canvas هست و بقیه موارد اگثرا" شامل Grid و DockPanel و Stack می شود.
سعی کنید ظاهرتان هوشمند باشد یعنی با تغییر اندازه و جابجایی کنترلرها صفحه به هم نریزد
)


اگر بایندیگ را نمی دانید با یک خط کد من هم قرار نیست چیزی دستگیرتان شود اما در MSDN می توانید توضیحات و سمپل ها زیادی پیدا کنید(لینک)
-
کافی است در متد Initialize صفحه تان مقدار MaxWidth آن گریدتان را برابر Width یا ActualWidth صفحه قرار دهید

myGrid.MaxWidth = this.Width;

// Or

myGrid.MaxWidth = this.ActualWidth;

بایندینگ

<UserControl x:Name="myPage">
    <Grid x:Name="myGrid" MaxWidth="{Binding Width, ElementName=myPage}" />
</<UserControl>

اگر اندازه صفحه تون تغییر می کنه از ActualWidth استفاده کنید

موفق باشید

دوست عزیز فرض کنید یه گرید داریم و میخوام داخلش یه پنل بزارم که با تغییر سایز از اندازه گرید بزرگ تر نشه و یا وقتی اونو درگ میکنم از محدوده گرید خارج نشه منظورم اینه که محبوس بشه به توی گرید

حالا از چه پنلی به نظر شما استفاده کنم یا چیکار کنم؟ لطفا راهنمایی کنید ممنون میشم

[mahdi7s]

سلام

ببخشید دیر جواب می دهم

تغییر مکان که پنل پدر Canvas باشد :
رویداد move را هندل کنید و چک کنید که مکان کنترلر از اونی که می خواین بیشتر یا کمتر نشده باشه و اگه شده درستشو بهش بدید.
برای گرفتن/تعیین مکان کنترلر از Canvas.Get(Set)Top و Canvas.Get(Set)Left استفاده کنید

اگر پنل پدر چیز دیگری است :
رویدادهای MouseMove و MouseLeftButtonDown و MouseLeftButtonUp کنترلرتان را هندل کنید و بقیش هم به کدهای زیر نگاه کنید واضح است(این کدها ادامه ی آن سمپل ساده ای است قبلا برایتان گذاشتم) :

        bool isLeftDown = false;



        public MainPage()

        {

            InitializeComponent();



            myAdorner.AdornedElement = myRect;



        }



        private void myRect_MouseMove(object sender, MouseEventArgs e)

        {

            if (isLeftDown)

            {

                var mousePosFromCtrl = e.GetPosition((UIElement)sender);

                var mousePosFromRoot = e.GetPosition(LayoutRoot);



                var x = mousePosFromRoot.X - mousePosFromCtrl.X;

                var y = mousePosFromRoot.Y - mousePosFromCtrl.Y;

                var controllerPositonFromRoot = new Point(x, y);



                // if(...) { ...

                Text.Text = string.Format("Mouse Position From Root Panel : {0}\r\nMouse Position From Controller : {1}\r\nController Position : {2}",

                                mousePosFromRoot, mousePosFromCtrl, controllerPositonFromRoot);

            }

        }



        private void myRect_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

        {

            isLeftDown = true;

        }



        private void myRect_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

        {

            isLeftDown = false;

        }

متغییر controllerPositonFromRoot در رویداد move مکان کنترلرتان از پنلتان را در بر دارد و آنجا که نوشتم if باید مکان را به گونه ای که می خواهید تغییر دهید

موفق باشید

[hamidhws]

سلام

بالاخره هفته پیش تونستم با تغییر کد های resize behavior و drag و کم و زیاد کردن کدها یه پنجره قابل قبول بسازم که کاملا به هر سایزی از مرورگر خودشو تطبیق بده

Untitled-1.jpg