latest Post

WPF에서 Metro Style Button 만들기

WPF에서 Metro Style의 버튼을 만들어보는 것을 찾아보았다.
먼저 Metro Style은 Windows8에서부터 사용되는 혁신(?)적인 디자인 언어이다.
아래는 Metro Style의 전형을 보여주는 스크린샷이다.

Metro Style은 기본적으로 Chromeless 하며 매우 Flat하다.
필자는 최근 Metro Style의 WPF 프로그래밍을 하고 있는데 WPF에서 이러한 버튼들을 표현해보고 싶어졌다.

구글링을 해본 결과 꼼수로는 가능하다.
아래는 그 코드이다.

    public class CThreadListButton : Border
    {
        public int Key { get; set; }

        public CThreadListButton(string _name)
        {
            Update(_name);
            this.Cursor = Cursors.Hand;
            this.MouseLeave += CThreadListButton_MouseLeave;
            this.MouseEnter += CThreadListButton_MouseEnter;
        }

        void CThreadListButton_MouseEnter(object sender, MouseEventArgs e)
        {
            this.Opacity = 0.6;
        }

        void CThreadListButton_MouseLeave(object sender, MouseEventArgs e)
        {
            this.Opacity = 1;
        }

        public void Update(string _name)
        {
            TextBlock tb = new TextBlock();
            tb.FontSize = 16;
            tb.Foreground = Brushes.White;
            tb.Text = _name;
            tb.VerticalAlignment = System.Windows.VerticalAlignment.Center;
            tb.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
            tb.TextWrapping = System.Windows.TextWrapping.Wrap;
            this.Child = tb;
        }
    }

위의 코드를 조금 설명하자면...
Border에 TextBlock을 넣은 형태이다. TextBlock만으로는 텍스트를 버튼의 중앙에 오게 할 수 없다.
그래서 Border안에 TextBlock을 지정한 것이다.
또한, mouse enter / leave에 대해서 UI의 변환을 시도한 것이다.

앞으로 자주 써먹을 놈이다.

About 방성원

방성원
Recommended Posts × +