WinForms - Saydam bir Control'un arkasındaki Control'leri nasıl görebilirim?

horriblebyte

Herkese merhaba ve hayırlı geceler. C# Windows Forms üzerinde bir proje geliştirmekteyim.

Proje Tasarımı

Çerçevesiz, 500px genişliğe ve 350px yüksekliğe sahip bir Form var. Bu Form'u boydan boya kaplayan bir WebBrowser ve WebBrowser'ın önünü tamamen kapatan bir Panel var.

Yapmak İstediğim Şey

WebBrowser'ın önünü tamamen kapatan Panel, %30 saydamlık değerine sahip olacak. Saydam Panel'in arkasında ise Form'un BackColor'u değil, Panel'in arkasındaki tüm Control'ler görünecek. WebBrowser'dan video oynatılsa bile Saydam Panel'in arkasından bu video rahatlıkla seyredilebilecek.

Kısaca, saydam bir Control'un arkasındaki Control veya Control'leri görmek istiyorum.

Denediğim Yöntemler

StackOverFlow üzerinde ExtendedPanel.cs adında, Panel Control'u üzerinden türetilmiş bir Control class'ı buldum ve projeme entegre ettim.

Link: https://stackoverflow.com/questions/32400320/any-trick-to-use-opacity-on-a-panel-in-visual-studio-window-form

Kod

public class ExtendedPanel : Panel
{
    private const int WS_EX_TRANSPARENT = 0x20;
    public ExtendedPanel()
    {
        SetStyle(ControlStyles.Opaque, true);
    }

    private int opacity = 50;
    [DefaultValue(50)]
    public int Opacity
    {
        get
        {
            return this.opacity;
        }
        set
        {
            if (value < 0 || value > 100)
                throw new ArgumentException("value must be between 0 and 100");
            this.opacity = value;
        }
    }
    protected override CreateParams CreateParams
    {
        get
        {
            CreateParams cp = base.CreateParams;
            cp.ExStyle = cp.ExStyle | WS_EX_TRANSPARENT;
            return cp;
        }
    }
    protected override void OnPaint(PaintEventArgs e)
    {
        using (var brush = new SolidBrush(Color.FromArgb(this.opacity * 255 / 100, this.BackColor)))
        {
            e.Graphics.FillRectangle(brush, this.ClientRectangle);
        }
        base.OnPaint(e);
    }
}

Görsel

Görselde de gördüğünüz gibi; gayet şık, saydam bir Panel Control'u var. Arkasındaki Control nesneleri rahatlıkla görülebiliyor. Buraya kadar her şey çok güzel.

Ancak saydam Panel Control'un problemi tam olarak şu: Arkasında bulunan herhangi bir Control'un görünümünde bir değişiklik olduğunda, ilgili Control, onun önüne çıkıyor. Yani onun arkasında bulunan bir WebBrowser'da video oynuyorsa, WebBrowser saydam Panel'in önüne çıkıyor, Panel onun önünü kapatamıyor.

Kısaca bu olay, saydam nesnenin arkasındaki Control'un görünümünde değişiklik olduğunda meydana geliyor.

Paylaştığım görselden yola çıkalım. "Button On Form" isimli Button'un büyük bir kısmı, saydam Panel'in arkasında. Ufak bir kısmı ise dışında. Panel'in dışında kalan kısmın üzerinden Mouse ile geçtiğinizde, Button'un görünümünde değişiklik oluyor (hover efekti devreye giriyor), bunun sonucunda da Button nesnesi olduğu gibi saydam Panel'in üstüne çıkıyor...

Tam Olarak İstediğim Şey

Öyle bir Panel olsun ki, arkasında bulunan herhangi bir Control'un görünümünde değişiklik olsa bile, o Control; yarı saydam Panel'in önüne çıkamasın.

Umarım anlatmak istediğim şeyi tam olarak anlatabilmişimdir. Konu hakkında yardımlarınızı bekliyorum.

Herkese iyi çalışmalar dilerim.

Halil Han BADEM

horriblebyte Merhaba,
"Bring to front" özelliğini kullandınız mı? Bir tetikleyici yazıp bunu ilgili eventlera ekleyerek ve/veya timer ile sürekli paneli ön tarafta tutabilirsiniz.

oaygun

horriblebyte Merhaba,
Ağustos ayından bu yana sorunu çözdüğünü düşünüyorum. Ama yine de, çözülmemiş olma ihtimalini düşünerek, bir de diğer arkadaşların da fikir edinmesi amacıyla belki işinize yarayabileceğini düşündüğüm bir çözüm önereyim;
Sizin anlattığınız tüm işlemlerin tamamlandığını varsayarak;
Form üzerine yarleştirdiğiniz panelin ismi;
ExtendedPanel

formunuz çalıştığında ExtendedPanel form üzerinde % 50 oranında saydamlık sağlıyor. Ancak, kodlar çalıştığında form üzerinde herhangi bir nesne üzerinde değişklik olursa (mesela bir textBox içine bir yazı gelirse) bu defa değişiklik olan nesne veya kontrol sanki aktif hale geliyor. Aslında yine panelin altında ama saydamlığını kaybediyor. İşte bu durumu engellemek için şunu yapabiliriz.
Diyelim ki textBox ta bir değişiklik oluyor. O textboxın değiştiği kodun hemen altına;

ExtendedPanel.Refresh();
ExtendedPanel.Opacity = 0;

satırlarını ekliyoruz.
Açıklarsak;
ExtendedPanel.Refresh();satırı ile bozulan paneli yeniliyoruz.
Fakat bu kodların tekrar tekrar yenileneceğini düşünürsek, her defasında saydamlığı % 50 oranında düşüreceği için biz de her defasında saydamlık oranını
ExtendedPanel.Opacity = 0;
komutu ile sıfırlıyoruz ki saydamlık oranı bozulmasın. (% 50) olarak kalsın.

Ancak sonradan farkettim ki bu içinde başka bir komut bulunmayan bir buton yardımıyla oluyor. Yani işlem yapılan metot içinde çalışmıyor. Kullanıcının ayrı bir butona basması lazım. Şimdi buna çözüm arıyorum. Bulursam yazacağım.

Umarım yardımcı olabilmişimdir.

Taiizor

Halil Han BADEM öncelikle "bring to front" işe yaramaz çünki önde olsa bile arka taraftaki componentlerde herhangi bir deĞişiklik olduĞu zaman yine panelin önüne geçecektir çünki z-index kavramı yok. "timer" ile belirli aralıklarda paneli yeniden çizdirdiĞinizde saydam olduĞundan ötürü renk geçişi bariz belli olacaktır.

horriblebyte

Halil Han BADEM Merhaba, "Bring to Front" özelliğini bir döngü içerisinde kullandım ancak hiçbir şey değişmedi. Bunun dışında ilgili paneli sürekli Refresh etmeye çalıştım, bu da sonuç vermedi.

Taiizor Merhaba, söylediklerinizde sonuna kadar haklısınız. Durum tam olarak böyle.

Peki ne yapılabilir? Bir çözüm yolu yok mudur? Mantıklı bir yol? Araştırmalarım devam ediyor ancak halen bir çözüm bulamadım.

Taiizor

horriblebyte ben de kendimce bir sürü çözüm aradım lakin çözüme kavuşturamadım. daha sonradan da şeyi düşündüm, böyle bir şey mümkün olsa microsoft kendi transparent özelliĞinde componentleri de göstertirdi. WinForms ekosisteminde z-index olmadıĞı için bunlar oluyor. WPF'ye geçerseniz daha fazla kolaylıkla karşılaşırsınız fakat WinForms ekosisteminden çok farklı.

ben normalde WinForms için UI/UX kütüphanesi geliştiriyorum bu paneli de ekleyip bir sürü deneme yaptım ama düzgün bir sonuç alamadım.
https://github.com/Taiizor/ReaLTaiizor/blob/develop/src/ReaLTaiizor/Controls/Panel/ExtendedPanel.cs

horriblebyte

ben de kendimce bir sürü çözüm aradım lakin çözüme kavuşturamadım.

Taiizor Anladım hocam, yine de uğraşlarınız için çok teşekkür ederim. Dünden beri araştırmalar yaptım ben de, ama sonuç yine aynı. Bir yolu yok gibi görünüyor.

Bu arada Github sayfanızdaki projelerinizi inceledim, Control'ler üzerinde ciddi çalışmalarınız olmuş. Gerçekten takdire şayan işler yapmışsınız, tebrik ederim ve başarılarınızın devamını dilerim. Github üzerinden projelerinize Star verdim, ufak da olsa desteğim olsun isterim. 🙂

Control/Component geliştirmeyi seven biri olduğunuz için size bir öneride bulunmak isterim. WinForms için MaterialSkin adında bir component kütüphanesi var, mutlaka bilirsiniz. İçerisinde birçok component var. Bu componentlere Google component'lerindeki animasyonlar entegre edilmiş ve harika görünüyorlar.

Aşağıda linkini bıraktığım kaynağı geliştirmeyi düşünebilirsiniz;
Link: https://github.com/leocb/MaterialSkin

Eğer geliştirmeyi uygun bulursanız, bazı componentlerde çeşitli hatalar mevcut. Onları iletebilirim.

Kolay gelsin, iyi çalışmalar dilerim.

Taiizor

horriblebyte Öncelikle desteĞiniz için teşekkürler. bunun gibi bir çok projeyi duydum ve biliyorum. bu adresdeki projenin orijinal reposu https://github.com/IgnaceMaes/MaterialSkin bu. fakat attıĞınız repo ile ekran görüntülerinden anladıĞım kadarıyla bayaĞı farklı. geliştirmemi istediĞiniz o projeyse ReaLTaiizor projem adı altında Material olarak geliştirebilirim?

horriblebyte

Taiizor Merhaba,

Aynen dediğiniz gibi, gönderdiğiniz link; bu projenin ilk ve orijinal repository adresi. Ancak benim size göndermiş olduğum repository, orijinal repository'den fork edilmiş ve üzerine çok fazla eklemeler yapılmış bir proje. Bu yüzden o projeyi geliştirmenizi istedim.

geliştirmemi istediĞiniz o projeyse ReaLTaiizor projem adı altında Material olarak geliştirebilirim?

Bana kalırsa bu componentleri diğer projenize dahil etmek yerine, fork ederek geliştirme yapmanız daha mantıklı. Yine de siz bilirsiniz, tercih sizin. 🙂

Gördüğüm sorunlar;

MaterialTextBox

MaterialTextBox componenti düzgün çalışmıyor. Yazı imleci, zaman zaman yazının önünde ya da arkasında oluyor. Şunun gibi;

Password Property False;

Password Property True;

Gördüğünüz gibi, ben imleci hiçbir şekilde hareket ettirmedim. Sadece yazı yazdım. İmleç düz yazı kısmında geriden gelirken, parola kısmında çok ilerden gidiyor.

Şimdilik gördüğüm ve düzelmesini istediğim en ciddi sorun bu.

TabSelector

TabSelector adında bir component var. Bu component bir MaterialTabControl componentine bağlanıyor ve onun sahip olduğu TabPage'leri gösteriyor. Sekmelerin ve sayfalararası geçiş görüntüsünün daha da güzel olmasını sağlıyor.

Tasarım Ekranından Örnek

Çalışma Esnasından Örnek;

Benim burada eklenmesini istediğim, sekmelerin duracağı noktanın ayarlanabilmesi. Yani, "TabAlign" adında bir property olsun (tıpkı textbox'da olduğu gibi), "Left", "Right" ve "Center" adında 3 seçenek olsun. Center seçildiğinde, sekmeleri tam ortaya gelecek şekilde hizalasın, Right seçildiğinde sekmeleri sağa hizalasın gibi...

Bu ikisi dışında başka bir problem yok gibi. Henüz yeni yeni kullanmaya başladım, birkaç hatası dışında cidden mükemmel bir proje.

En kısa zamanda Discord sunucunuza uğrayacağım.

Kolay gelsin, iyi çalışmalar.

oaygun

Aşağıda yazdığım denetim yukarıdakinden daha iyi çalışıyor;

using System;
using System.Drawing;
using System.Windows.Forms;

namespace Saydam_Panel
{
    public class SaydamPanel : Panel
    {
        public bool drag = false;
        public bool enab = false;
        private int m_opacity = 50;

        private int alpha;
        public SaydamPanel()
        {
            SetStyle(ControlStyles.SupportsTransparentBackColor, true);
            SetStyle(ControlStyles.Opaque, true);
            this.BackColor = Color.Transparent;
        }

        public int Opacity
        {
            get
            {
                if (m_opacity > 100)
                {
                    m_opacity = 100;
                }
                else if (m_opacity < 1)
                {
                    m_opacity = 1;
                }
                return this.m_opacity;
            }
            set
            {
                this.m_opacity = value;
                if (this.Parent != null)
                {
                    Parent.Invalidate(this.Bounds, true);
                }
            }
        }

        protected override CreateParams CreateParams
        {
            get
            {
                CreateParams cp = base.CreateParams;
                cp.ExStyle = cp.ExStyle | 0x20;
                return cp;
            }
        }

        protected override void OnPaint(PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            Rectangle bounds = new Rectangle(0, 0, this.Width - 1, this.Height - 1);

            Color frmColor = this.Parent.BackColor;
            Brush bckColor = default(Brush);

            alpha = (m_opacity * 255) / 100;

            if (drag)
            {
                Color dragBckColor = default(Color);

                if (BackColor != Color.Transparent)
                {
                    int Rb = BackColor.R * alpha / 255 + frmColor.R * (255 - alpha) / 255;
                    int Gb = BackColor.G * alpha / 255 + frmColor.G * (255 - alpha) / 255;
                    int Bb = BackColor.B * alpha / 255 + frmColor.B * (255 - alpha) / 255;
                    dragBckColor = Color.FromArgb(Rb, Gb, Bb);
                }
                else
                {
                    dragBckColor = frmColor;
                }

                alpha = 255;
                bckColor = new SolidBrush(Color.FromArgb(alpha, dragBckColor));
            }
            else
            {
                bckColor = new SolidBrush(Color.FromArgb(alpha, this.BackColor));
            }

            if (this.BackColor != Color.Transparent | drag)
            {
                g.FillRectangle(bckColor, bounds);
            }

            bckColor.Dispose();
            g.Dispose();
            base.OnPaint(e);
        }

        protected override void OnBackColorChanged(EventArgs e)
        {
            if (this.Parent != null)
            {
                Parent.Invalidate(this.Bounds, true);
            }
            base.OnBackColorChanged(e);
        }

        protected override void OnParentBackColorChanged(EventArgs e)
        {
            this.Invalidate();
            base.OnParentBackColorChanged(e);
        }
    }


}

Bu denetimi hazırladıktan sonra Araç kutusundan Form da istediğiniz yere ekleyin.
SaydamPanel.cs de;
private int m_opacity = 50;
satırında 50 değeri ile oynayarak istediğiniz saydamlığı elde edersiniz.
Ancak Form da saydamPanel1 veya saydamPanel2,3,4,.... hangisini eklemişseniz, ona ait backcolor değerini
siyah yapın.
Formda saydam panelin arkasında kalacak buton, label, textbox vs. hepsini bir groupbox da toplayın.
saydamPanel1 i de bu groupbox ın 0;0 konumuna yerleştirip groupbox boyutlarına getirin.
Eğer saydamPanel1 groupbox dışında başlarsa yine çalışır ama, formdaki kontroller saydamPanel yokmuş
gibi görünür. Aynı groupbox içerisinde olmayan kontrolleri, nesneleri bir başka groupbox ta toplayın.
Onun üzerine de aynı şekilde 0;0 konumuna saydamPanel2 yi yerleştirin.

saydamPanel1 veya başka paneller de varsa onlar da başlangıçta visible değerleri false olsun.
Kod çalışması esnasında nerede saydampanel in görünmesini istiyorsanız orada true değeri verin.
Kaldırmak istediğinizde false değeri verin.

Burada tek sorun, arka planda video varsa video oynatma panelinde durum çubuğu parlak renkte kalıyor.
Ancak yine de saydampanel aktifken videoya kullanıcı müdahale edemiyor. O parlaklık sorununa da çözüm
bulduğumda buradan yazarım.

Bu başlıktaki sorunun asıl amacı ise formda herhangi bir değişiklik olduğunda arkadaki kontrolün
öne çıktığı idi. Aslında kontolr öne çıkmıyor. Kontrol opacity değerini kaybediyor. saydampanelin
etkisinden kurtuluyor. Fakat saydampanel yine onun üzerinde, hiçbir şekilde kullanıcı kontrole
müdahale edemiyor. Ancak, yine de kontrollerin tümünün aynı saydamlıkta görünebilmeleri için
ilgili metodun sonuna, hatta bir çok yerine;

saydamPanel1.Refresh();
saydamPanel1.Opacity = 50;

satırlarını ekleyebiliriz.
Ben 50 değerini verdim, ama siz Opacity değeri olarak isterseniz 30 verebilirsiniz.

horriblebyte

Merhaba,

Hocam elinize sağlık ancak bu durumu bir Form nesnesiyle aştım. Panel kullandığımda mutlaka bir noktada sorun yaşanmış olduğu için, Form nesnesini tıpkı panelmiş gibi kullandım ve yaptığım testlerde sorun çıkartmadan çalıştı. 🙂

Akşama eve geçtiğimde burada paylaşacağım.

Ayrıca emekleriniz için çok çok teşekkür ederim, elinize sağlık.

horriblebyte

Merhaba,

Proje: https://www.mediafire.com/file/8nwwr7ogf34o33q/SaydamKatmanTest.zip/file