[WPF] Button 클릭 영역과 Background

최근에 프로젝트를 진행하면서 ListView Control을 하며 어려웠던 부분을 정리하였습니다.

 

👉 기본 환경

- Language: C#, xaml

- IDE: Visual Basic 2022

- Framework: .NET 8.0

---

✍️ 최근에 Button 클릭 영역으로 몇 시간 헤매어 내용을 간략히 적어봅니다.

 

View1

<!--// Selected Image //-->
<Image Grid.Row="0" Source="{Binding SelectedImageSource}">
    <b:Interaction.Triggers>
        <b:EventTrigger EventName="MouseLeftButtonUp">
            <b:InvokeCommandAction Command="{Binding EnlargeImageCommand}"
                                   CommandParameter="{Binding ElementName=window}"
                                   />
        </b:EventTrigger>
    </b:Interaction.Triggers>
</Image>

 

이미지를 클릭했을 때, 확대된 이미지를 팝업창으로 띄우려고 합니다.

 

크게 이용했던 방법이

  * Popup 태그

  * Window

였는데, Viewer를 띄우는 부모창의 위치에 따라 확대되는 이미지의 위치가 변합니다.

 

Popup 태그는 위치 컨트롤이 쉽지 않아 결국 Window로 결정하였습니다.

 

ViewModel1

public RelayCommand EnlargeImageCommand => null ?? new RelayCommand(EnlargeImageEvent);
 
private void EnlargeImageEvent(object obj)
{
    Window window = obj as Window;
 
    WindowImageViewer windowImageViewer = new WindowImageViewer();
    windowImageViewer.DataContext = new ViewModelImageViewer(SelectedImageSource);
    windowImageViewer.Width = 300;
    windowImageViewer.Height = 330;
    windowImageViewer.Owner = window;
    windowImageViewer.ShowDialog();
}

 

간단하게 만들어보기 위해서 Width와 Height는 모두 상수로 설정해서 사실 WindowImageViewer에서 설정이 가능합니다.

 

하지만, 프로젝트에서는 Viewer Window를 띄우는 부모창의 Width와 Height를 이용했습니다.

당시에 DataContext에 해당 값을 넘겨주고, Window에서 Width, Height를 Binding 했는데,

동작 순서의 문제인지(Window Show → Binding Width, Height) Width, Height 바인딩이 되지 않았습니다.

 

그래서 처음부터 Window를 열 때 Width, Height를 설정하고 시작했습니다.

 

또한, 부모창의 중앙에 위치하기 위해 Owner 설정을 했고, 이를 위해서 CommandParameter를 View에서 추가했습니다.

 

View2

<Window WindowStyle="None" ResizeMode="NoResize" 
        AllowsTransparency="True" Background="Transparent"
        Name="window" WindowStartupLocation="CenterOwner"
        >
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Height="30"
                VerticalAlignment="Center" HorizontalAlignment="Right"
                BorderThickness="0"
                Background="Transparent"
                Command="{Binding CloseWindowCommand}" CommandParameter="{Binding ElementName=window}"
                >
            <Image Source="pack://application:,,,/Resources/IconClose.png"
                   RenderOptions.BitmapScalingMode="HighQuality"
                   />
        </Button>
        <Image Grid.Row="1" 
               Source="{Binding SelectedImageSource}"/>
    </Grid>
</Window>
 

 

Viewer Window는 다른 창들과 TitleBar가 없고 크기조절을 못하도록 막아두었습니다.

 

이미지를 제외하고 모두 투명한 상태에서 X 버튼을 클릭하면 확대된 이미지 뷰어가 닫히는 것을 그린 Window입니다.

 

사실, 지금 코드에서는 버튼이 네모 영역에서 잘 동작하지만 프로젝트에서는 이미지 구간을 제외하고 버튼 클릭 이벤트가 동작하지 않았습니다.

그것을 해결하기 위해 열심히 찾아본 결과 문제는 Background에 있음을 알게 되었습니다.

 

* Background

  * Transparent: 배경을 투명하게 만드는 요소

  * #00FFFFFF: 배경을 FFFFFF(흰색)으로 하되 투명도를 최대(00 - 완전 투명)로 설정

 

Background에 색상을 지정하면 그 버튼 영역이 인식되기 때문에 Transparent로 인식 안되던 버튼 공간이 인식이 됩니다.

 

 

 

😮 오늘의 깨달음: Background, 오늘부터는 8자리다!