C#/WPF

WPF tutorial - The ItemsControl

광그로 2017. 7. 2. 17:58


http://www.wpf-tutorial.com/list-controls/itemscontrol/


1
2
3
4
5
6
7
8
<Grid Margin="10">
        <ItemsControl>
            <system:String>ItmesControl Item 1</system:String>
            <system:String>ItmesControl Item 2</system:String>
            <system:String>ItmesControl Item 3</system:String>
            <system:String>ItmesControl Item 4</system:String>
        </ItemsControl>
    </Grid>
cs

Item들을 클릭하여도 아무런 일이 일어나지 않습니다.


ItemsControl with data binding


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <Grid Margin="10">
        <ItemsControl Name="icTodoList">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="0,0,0,5">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="100" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding Title}" />
                        <ProgressBar Grid.Column="1" Minimum="0" Maximum="100" Value="{Binding Completion}" />
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
 
            List<TodoItem> items = new List<TodoItem>();
            items.Add(new TodoItem() { Title = "Complete this WPF tutorial", Completion = 45 });
            items.Add(new TodoItem() { Title = "Learn C#", Completion = 80 });
            items.Add(new TodoItem() { Title = "Learn Algorithm", Completion = 0 });
 
            icTodoList.ItemsSource = items;
 
        }
    }
 
    public class TodoItem
    {
        public string Title { get; set; }
        public int Completion { get; set; }
 
    }
cs


1
2
3
<ItemsControl Name="icTodoList">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
cs

이 예제에서의 가장 중요한 부분입니다.


TodoItem 형식의 List를 생성하여, TodoItem을 추가하고, 이 List를 ItemsControl.ItemsSource에 할당합니다.



The ItemsPanelTempalte property

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<Grid Margin="10">
        <ItemsControl>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel></WrapPanel>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Content="{Binding}" Margin="0,0,5,5" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
 
            <system:String>Item #1</system:String>
            <system:String>Item #2</system:String>
            <system:String>Item #3</system:String>
            <system:String>Item #4</system:String>
            <system:String>Item #5</system:String>
        </ItemsControl>
    </Grid>
cs


<ItemsControl.ItemsPanel>속성에서 <ItemsPanelTemplate>을 <WrapPanel>로 사용하도록 지정하고,

1
2
3
4
5
<ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Content="{Binding}" Margin="0,0,5,5" />
                </DataTemplate>
</ItemsControl.ItemTemplate>
cs

문자열을 Button으로 렌더링하게 하는 ItemTemplate을 throw합니다.


ItemsControl with scrollbars

ScrollViewer를 사용합니다.

1
2
3
4
5
6
7
8
9
10
11
<Grid Margin="10">
        <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
            <ItemsControl>
                <system:String>ItemsControl Item #1</system:String>
                <system:String>ItemsControl Item #2</system:String>
                <system:String>ItemsControl Item #3</system:String>
                <system:String>ItemsControl Item #4</system:String>
                <system:String>ItemsControl Item #5</system:String>
            </ItemsControl>
        </ScrollViewer>
    </Grid>
cs