WPF 팁

Vertical ListBox 샘플 이재웅 평점: 9.0/10 (1명 참여) 조회: 2428

 
우리 눈에 상당히 친숙한 ListBox가 아닐까 합니다.. ㅋ
스터디용으로 간단히 만든건데 공유드리고자 합니다.
이미지 등 리소스도 포함되어있기때문에 원활한 실행을 위해 프로젝트를 첨부 하였습니다.



Resource

    <Style x:Key="LBXITEM_VERTICAL" TargetType="ListBoxItem">
        <Setter Property="Background" Value="#ffffff"/>
        <Setter Property="Foreground" Value="#404040"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border Background="{TemplateBinding Background}" BorderThickness="0 0 0 1" BorderBrush="#e9e9e9">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="auto"/>
                            </Grid.ColumnDefinitions>
                            <Ellipse Width="50" Height="50" Grid.RowSpan="2" VerticalAlignment="Center"
                                     HorizontalAlignment="Center" Margin="12">
                                <Ellipse.Fill>
                                    <ImageBrush ImageSource="{Binding Thumbnail}"/>
                                </Ellipse.Fill>
                            </Ellipse>

                            <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding DisplayMembers}" Margin="0 12 0 0" FontWeight="Bold"/>
                            <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Message}" Margin="0 12 0 0" Foreground="#737373"/>
                            <TextBlock Grid.Column="2" Text="{Binding Time, StringFormat=' {0:tt H:mm}', TargetNullValue='null'}"
                                       Margin="0 12 12 0" Foreground="#bfbfbf" FontSize="11"/>

                            <Border Grid.Row="2" Grid.Column="2" Background="#f76a51" Width="22" Height="22" CornerRadius="11">
                                <TextBlock Grid.Column="1" Text="{Binding NewMessages}" Foreground="#ffffff"
                                           VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" FontSize="11"/>
                            </Border>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="#F5F5F5"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Background" Value="#fff173"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    <Style x:Key="LBX_VERTICAL" TargetType="ListBox">
        <Setter Property="ItemContainerStyle" Value="{DynamicResource LBXITEM_VERTICAL}"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Vertical" IsItemsHost="True"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>

ViewModel

using System.Collections.Generic;

namespace TestApp.MySampleWindow
{
    internal class MainViewModel
    {
        MainWindow view;

        List _Talks;
        public List Talks
        {
            get { return _Talks; }
            set { _Talks = value; }
        }

        public MainViewModel(MainWindow _view)
        {
            this.view = _view;
        }

        internal void InitViewModel()
        {
            Talks = TalkData.SampleData();
        }
    }

    internal class TalkData
    {
        public string DisplayMembers { get; private set; }
        public string Thumbnail { get; private set; }
        public DateTime Time { get; private set; }
        public int NewMessages { get; private set; }
        public string Message { get; private set; }
    }
}
태그 : ItemContainerStyle listbox vertical wpf
작성자 정보
이재웅
Level 16
 [EXP.50/70]

메일:  비공개

글등록 +12 156 덧글등록 +3 90
자기소개
안녕하세요. 저는 이재웅이라고합니다. ijaeawung@naver.com
글 공유하기 |
  tweet facebook
2015-11-03 오후 3:48:18
나도한마디
사용자
개발새내기            [2015-11-03]
Level 25
 [EXP.3/50]
좋내요~
사용자
망할 웹            [2015-11-03]
Level 55
 [EXP.198/250]
이거 왠지 스카이프 나온 기능이랑 똑같네여.ㅋ
태그로 엮인글
[C#.NET Q&A] WPF 사용하여 Excel Export 관련 질문드립니다.[2]  미야
[자유게시판] "XAML 뽀개기"라는 제목으로 블로그를 운영하고 있습니다~[1]  찰스82
[C#.NET Q&A] C# MEE4 이용해서 화면 녹화를 하려는데 예외가 발생합니다.  LeeMalone
[C#.NET Q&A] Infragistics WPF 버튼[1]+1  saki
[WPF Q&A] Listview 메서드 결과 바인딩  c#
[WPF Q&A] 혹시 WPF에서 무료로 만들수는 candle chart 라이브러리 나 예제 가 있을까요?[1]  우오호호
[WPF Q&A] xaml과 C# 순서관계 이해좀 부탁드려요.[2]+1  자바송장
[WPF Q&A] ViewModel에서 선언한 Event로 View의 특정 ListViewItem을 Focus 하는 방법[1]  자바칩프라푸치노
[WPF Q&A] 두개의 Usercontrol 실 시간 업데이트 시[2]  OnlyM
[WPF Q&A] wpf stlye 관련 질문입니다 ㅠㅠ[3]  아나지마누
글리스트
CheckBox ListBox 샘플[2] 파일첨부 이재웅
RadioButton ListBox 샘플 파일첨부 이재웅
UniformGrid ListBox 샘플 파일첨부 이재웅
Horizontal ListBox 샘플 파일첨부 이재웅
 ★현재글->   Vertical ListBox 샘플[2] 파일첨부 이재웅
Form Designer 프로젝트 #7 - Tool Window (콘트롤 속성 지정/변경) - 완료![1]+1  안떠니
Form Designer 프로젝트 #6 - Tool Window (콘트롤 추가/삭제) - 완료![3]+1  안떠니
Form Designer 프로젝트 #5 - TreeView Manager  안떠니
Form Designer 프로젝트 #4 - TreeView + XML [1]  안떠니
Form Designer 프로젝트 #3 - TreeView 삭제 / 이름변경[2]+2  안떠니
Form Designer 프로젝트 #2 - TreeView 노드 추가[1]  안떠니
Form Designer 프로젝트 #1 - 프로젝트 관리 화면[4]+1  안떠니
실행파일에서 config 파일 변경하기[1]+3  킴언어
계산기[3]  sa2랑
WPF 성능관리  sa2랑