[WPF] UniformGrid에 동적으로 Button 생성하고 Button 속성값 변경하기

작성 날짜 : 2021.11.24

개발 환경 : Visual Studio 2019 Community

운영 체제 : Windows 10

 

처음에는 Grid에 동적으로 할당하려고 ItemControl과 여러 뻘짓을 하다가... UniformGrid라는 좋은 panel을 발견!

제가 원하는 딱!! 그 panel입니다.

 

UniformGrid는 Grid 처럼 자식 Control들이 배치되나.. Grid 처럼 Row, Column을 일일이 Definition 해줄 필요가 없이, Rows, Columns 을 설정해주면 그에 따라 자동으로 같은 크기로 배치해주는 Panel입니다. 아래 이미지와 같이 말이죠.

아래 이미지는 뭘 그리려는 거냐아.. 반도체 Wafer에 Die들의 Map을 그려주는 겁니다... 

Die들을 검사하고 검사결과에 따라 Display해주는 Button들의 Background 색상을 변경해줘야하고,, 

처음 시작할때 DieMap에 따라 Die가 없는 부분은 또, Visibility를 hidden 처리도 해줘야하죠.

일단은.. Xaml에서 UniformGrid 코드입니다.

이.. 코드가 정확히 맞다고는 할 수가 없습니다. 저도 공부하면서 WPF MVVM 개발을 진행중이다보니..

여튼, UniformGrid의 Rows, Columns 는 <ItemsControl.ItemsPanel> 설정해줘야 적용이 가능하고요, DataBinding 또한 같이 해줍니다. UpdateSourceTrigger=PropertyChanged 속성의 경우에는... 컴파일러에서는 Warning을 띄우는데,, 잘모르겠네요.

<UniformGrid Height="550" Width="900" >
    <ItemsControl ItemsSource="{Binding DiemapButtonCollection}">
    	<ItemsControl.ItemsPanel>
			<ItemsPanelTemplate>
				<UniformGrid Rows="{Binding Number_Row, UpdateSourceTrigger=PropertyChanged}" 
							Columns="{Binding Number_Column, UpdateSourceTrigger=PropertyChanged}"/>
            </ItemsPanelTemplate>
		</ItemsControl.ItemsPanel>
		<ItemsControl.ItemTemplate>
		<DataTemplate>
			<Button Content="{Binding Content, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 
					Command="{Binding Command}"
					CommandParameter="{Binding CommandParameter}"
					FontSize="{Binding FontSize}"
					Background="{Binding Background, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
					IsEnabled="{Binding isEnabled, Converter={etc:BoolToVisibilityConverter}}"
					Visibility="{Binding Visibility, Converter={etc:BoolToVisibilityConverter}}"
					/>
			</DataTemplate>
		</ItemsControl.ItemTemplate>
	</ItemsControl>
</UniformGrid>

 

그리고, CS코드는..

DataBinding 한 코드. (ViewModel 부분)

private ObservableCollection<DieMapItem> _diemap_button_collection = new ObservableCollection<DieMapItem>();
public ObservableCollection<DieMapItem> DiemapButtonCollection
{
	get => _diemap_button_collection;
	set
	{
		Set(ref _diemap_button_collection, value, false, "DiemapButtonCollection");
		INotifyPropertyChanged();
	}
}

private void INotifyPropertyChanged()
{
	throw new NotImplementedException();
}

ObservableCollection에서 사용한 DieMapItem Class

ObservableCollection에 있는 Item들 중에서 속성변경 후 적용하려면,, Type의 내부 코드에 NotifyPropertyChaged를 설정해줘야 UI에 반영이 됩니다.

public class DieMapItem : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public int ID_Item { get; set; }
        public string Content { get; set; }
        public ICommand Command { get; set; }
        public string CommandParameter { get; set; }
        public int FontSize { get; set; }

        private Brush _background;
        public Brush Background
        {
            get => _background;
            set
            {
                _background = value;
                NotifyPropertyChanged("Background");
            }
        }

        private bool _visibility;
        public bool Visibility
        {
            get => _visibility;
            set
            {
                _visibility = value;
                NotifyPropertyChanged("Visibility");
            }
        }

        private bool _isEnabled;
        public bool IsEnabled
        {
            get => _isEnabled;
            set
            {
                _isEnabled = value;
                NotifyPropertyChanged("IsEnabled");
            }
        }

        private void NotifyPropertyChanged(string v)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(v));
        }
    }

그리고 ObservableCollection에 Button들 추가하는 부분은 아래와 같이 추가해서 넣어주면 됩니다.

DiemapButtonCollection.Add(CreateButton(nDieIndex, isColor, isEnebled));

private DieMapItem CreateButton(int _dieIndex, bool _change_color, bool _isEnabled)
        {
            DieMapItem button = new DieMapItem
            {
                ID_Item = _dieIndex,
                Command = DiemapButtonCommand,
                CommandParameter = _dieIndex.ToString(),
                Content = _dieIndex.ToString(),
                FontSize = 8,
                Visibility = _isEnabled,
                IsEnabled = _isEnabled
            };

            if (_isEnabled)
            {
                button.Background = _change_color ? new SolidColorBrush(Colors.Yellow) : new SolidColorBrush(Colors.Black);
            }

            return button;
        }

그리고 ObservableCollection의 Item 들 중에서 특정 Item에 속성을 변경하고 싶다~ 하면, 아래와 같이 ObservableCollection[index].property로 접근해서 변경해주면 됩니다.

private void ChangeButtonBackground(int[] _arr_change)
        {
            foreach (int i in _arr_change)
            {
                DiemapButtonCollection[i].Background = new SolidColorBrush(Colors.Yellow);
            }
        }

        private void ChangeButtonEnabled(int[] _arr_change)
        {
            foreach (int i in _arr_change)
            {
                DiemapButtonCollection[i].Visibility = false;
                DiemapButtonCollection[i].IsEnabled = false;
            }
        }

그러면, 아래와 같이 변경된 속성이 UI에 반영이됩니다.