[WPF] ItemsControl , UIelement 반복

 

Views.xaml

<UserControl x:Class="LS.DevSquare.Service.Manager.Main.Views.HomeView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:models="clr-namespace:LS.DevSquare.Service.Manager.Main.Models"
             mc:Ignorable="d"
             d:Background="AliceBlue"
             d:DesignHeight="800" d:DesignWidth="800">

    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/LS.DevSquare.Service.Manager.Main;component/ResourceDictionary/StatusItemTemplate.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>

    <Grid >
        <ScrollViewer
            VerticalScrollBarVisibility="Auto"
            HorizontalScrollBarVisibility="Auto">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <ItemsControl 
                    Grid.Column="0" 
                    ItemsPanel="{StaticResource StatusItemsPanel}"
                    ItemContainerStyle="{StaticResource StatusContentStyle}"
                    ItemTemplate="{StaticResource StatusItemsDataTemplate}"
                    ItemsSource="{Binding LeftStatusItems}">
                </ItemsControl>

                <ItemsControl 
                    Grid.Column="1" 
                    ItemsPanel="{StaticResource StatusItemsPanel}"
                    ItemContainerStyle="{StaticResource StatusContentStyle}"
                    ItemTemplate="{StaticResource StatusItemsDataTemplate}"
                    ItemsSource="{Binding RightStatusItems}">
                </ItemsControl>
            </Grid>
        </ScrollViewer>
    </Grid>
</UserControl>

 

 

Resource.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:models="clr-namespace:LS.DevSquare.Service.Manager.Main.Models">

    <!--Grid, Stackpanel, Dockpanel 등 사용 할 panel의 종류를 정의하는 곳-->
    <ItemsPanelTemplate x:Key="StatusItemsPanel">
        <StackPanel/>
    </ItemsPanelTemplate>

    <!-- panel에 들어갈 textbox, image, button 등의 element를 정의하는 곳-->
    <DataTemplate x:Key="StatusItemsDataTemplate"
                  DataType="{x:Type models:ServiceStatus}">
        <Button Content="{Binding num}">
            <Button.InputBindings>
                <MouseBinding Gesture="LeftClick" Command="{Binding RelativeSource={RelativeSource FindAncestor,
      AncestorType={x:Type UserControl}}, Path=DataContext.LeftClick}" CommandParameter="{Binding num}"/>
                <MouseBinding Gesture="RightClick" Command="{Binding RightClick}" CommandParameter="{Binding num}"/>
            </Button.InputBindings>
        </Button>
    </DataTemplate>


    <!-- element의 style을 정의하는 곳 (Grid.Row, width, event....)-->
    <Style x:Key="StatusContentStyle" TargetType="ContentPresenter">
        <!--<Setter Property="Grid.Row" Value="0" />
      <Setter Property="Grid.Column" Value="0" />-->
    </Style>

</ResourceDictionary>

 

 

 

---

 

View.xaml

 <Grid >
     <ScrollViewer
         VerticalScrollBarVisibility="Visible">
     <ItemsControl ItemsSource="{Binding Array100}">
         <ItemsControl.ItemsPanel>
             <ItemsPanelTemplate>
                 <!--Grid, Stackpanel, Dockpanel 등 사용 할 panel의 종류를 정의하는 곳 -->
                 <StackPanel/>
                 <!--<Grid>
                 --><!--<ScrollViewer
                     VerticalScrollBarVisibility="Auto">
                         <StackPanel></StackPanel>
                 </ScrollViewer>--><!--
                 </Grid>-->
             </ItemsPanelTemplate>
         </ItemsControl.ItemsPanel>
         <ItemsControl.ItemTemplate>
             <DataTemplate>
                 <!-- panel에 들어갈 textbox, image, button 등의 element를 정의하는 곳-->
                 <Button Content="{Binding num}">
                     <Button.InputBindings>
                         <MouseBinding Gesture="LeftClick" Command="{Binding RelativeSource={RelativeSource FindAncestor,
                             AncestorType={x:Type UserControl}}, Path=DataContext.LeftClick}" CommandParameter="{Binding num}"/>
                         <MouseBinding Gesture="RightClick" Command="{Binding RightClick}" CommandParameter="{Binding num}"/>
                     </Button.InputBindings>
                 </Button>
             </DataTemplate>
         </ItemsControl.ItemTemplate>
         <!--<ItemsControl.ItemContainerStyle>
             --><!-- element의 style을 정의하는 곳 (Grid.Row, width, event....)--><!--
             <Style TargetType="ContentPresenter">
                 <Setter Property="Grid.Row" Value="{Binding row}" />
                 <Setter Property="Grid.Column" Value="{Binding col}" />
             </Style>
         </ItemsControl.ItemContainerStyle>-->
     </ItemsControl>
     </ScrollViewer>
 </Grid>

 

ViewModel.cs

public class HomeViewModel : ViewModelBase
{
    private readonly IModuleManager moduleManager;

    public HomeViewModel(IModuleManager moduleManager)
    {
        this.moduleManager = moduleManager;
        Array100 = new();
        InitializeUI();
    }

    void InitializeUI()
    {
        int temp = 0;
        for (int i = 0; i < 100; i++)
        {
            Array100.Add(new Items() { row = i,  num = temp });
            temp++;

            //for (int j = 0; j < 10; j++)
            //{
            //    Array100.Add(new Items() { row = i, col = j, num = temp });
            //    temp++;
            //}
        }
    }


    public ObservableCollection<Items> Array100
    {
        get { return GetProperty(() => Array100); }
        set { SetProperty(() => Array100, value); }
    }




    private DelegateCommand<string> navigateViewCommand;
    public DelegateCommand<string> NavigateViewCommand =>
        navigateViewCommand ?? (navigateViewCommand = new DelegateCommand<string>(ExecuteNavigateViewCommand));
    void ExecuteNavigateViewCommand(string param)
    {
        moduleManager.InjectOrNavigate(Regions.ServiceViewRegion, param);

    }
}

public class Items
{
    public int num { get; set; }
    public int row { get; set; }
    public int col { get; set; }
}

 

---

 

 

https://hihaoun.tistory.com/entry/WPF-ItemsControl%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%B4%EC%84%9C-UIelement%EB%A5%BC-%EB%B0%98%EB%B3%B5%ED%95%B4%EC%84%9C-%ED%91%9C%ED%98%84%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95xaml%EC%97%90%EC%84%9C-for%EB%AC%B8-foreach%EB%AC%B8%EC%9D%84-%EB%8C%80%EC%8B%A0%ED%95%B4%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%A0-%EC%88%98-%EC%9E%88%EB%8A%94-%EB%B0%A9%EB%B2%95

WPF ItemsControl을 이용해서 UIelement를 반복해서 표현하는 방법(xaml에서 for문, foreach문을 대신해서 사

 

 

---