ryco

آموزش
واکنش پذیر کردن GridView نسبت به سایز صفحه نمایش های مختلف

1 ارسال در این موضوع قرار دارد

سلام؛

اگر شما هم با پنل GridView کار کرده باشید، حتما در نمایش آیتم ها در صفحات مختلف دچار مشکل فضای خالی در طرفین آیتم ها شدید. متاسفانه این کنترل به خوبی بهینه نشده و کاملا رسپانسیو عمل نمی کند. بنابراین باید از راه حلی دیگر این مشکل رو جبران کنیم تا آیتم ها تمام عرض پنل رو بپوشانند و فضای خالی آزار دهنده ای جلوی چشم مخاطب قرار نگیرد.

اما حالا بریم سراغ توضیحات:

ابتدا در xml کنترل گرید ویو، کدهای زیر رو اضافه می کنیم، تا عرض هر آیتم به اندازه فضای آزاد برسه:

GridView.ItemContainerStyle>
                                <Style TargetType="GridViewItem">
                                    <Setter Property="HorizontalContentAlignment"
                    Value="Stretch" />
                                    <Setter Property="VerticalContentAlignment"
                    Value="Stretch" />
                                </Style>
                            </GridView.ItemContainerStyle> 

به این منظور باید در رویداد SizeChanged گرید ویو میزان عرض هر آیتم رو بصورت دستی تغییر بدیم. من برای این کار تعداد ستون هایی رو که می خوام در عرض صفحه میشه نمایش داد رو محاسبه می کنم و سپس این عرض "حداکثری" رو به آیتم ها می دم. من عرض حداکثری هر آیتم رو 850 انتخاب کردم:

        private void gvFave_SizeChanged(object sender, SizeChangedEventArgs e)
        {
       
            var columns = Math.Ceiling(ActualWidth / 850);
            ((ItemsWrapGrid)gvFave.ItemsPanelRoot).ItemWidth = e.NewSize.Width / columns;
        }

به همین سادگی می تونید از شر فضای خالی راحت بشید.

 

اگر سوالی بود در خدمتم.

با تشکر

پسند شده توسط 2 کاربر

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر


برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری