데이터 트리거를 기능을 이용해서 보여지는 도형의 모양이 각각 다르게 나오게 하고싶습니다.

🖥️ UI/UX 프로그래밍 Q&A WPF Q&A
1

아래의 내용을 숙지하신 후에는, 이 글 전체의 내용을 지우고 원하는 글을 작성해주세요.

질문 글을 올리기 전 꼭 읽어주세요

질문을 올리실 때는 답글을 달아주시는 분이 최대한 상황을 자세히 알 수 있도록 질문을 올려주세요. 다음의 내용이 들어가면 좋습니다.

  • 무엇을 하고자 하는지
  • 현재 작성한 코드 중 문제가 되는 부분
  • 기대하는 동작

질문글, 답글, 댓글은 한 번 올리면 언제든 누구나 볼 수 있어야 합니다. 질문글에 대한 답글이 올라왔다고해서 글을 지우는 것은 이기적인 행동입니다. 만약 공개적으로 올릴 수 없는 질문이라면 포럼에는 질문을 올리시면 안됩니다.

한 번 올렸던 질문은 다시 올리지 말아주세요. 만약 질문에 대한 답을 받지 못했다면, 혹시 질문이 너무 추상적이지는 않은지, 단순히 무엇을 대신 해달라는 부탁은 아니었는지 생각해보고 고쳐서 다시 올려주세요. 그리고 먼저 올린 질문에 댓글 형태로 새로운 질문을 계속 추가해주세요. 그래야 추가 답변을 쉽게 받으실 수 있고, 나중에 찾아보기도 좋습니다.

답변을 받으면, 감사의 표시로 꼭 답변 채택 버튼을 눌러 마무리해주세요. 나중에 같은 질문을 찾아보시는 다른 분들께도 도움이 됩니다.

마지막으로 당부드릴 말씀이 있습니다. 질문 답변 게시판에서 답글을 달아주시는 분은 본인의 귀한 시간을 쪼개어 지식을 공유해주시는 분입니다. 답글을 달아주시는 분, 그리고 커뮤니티에 참여하는 다른 모든 분들께 기본적인 예의를 지킬 수 있도록 해주세요.

이상의 내용을 숙지하여 모두가 즐겁게 참여할 수 있는 포럼을 만드는 데 힘을 보태어주세요.

안녕하세요. 저는 데이터 트리거를 기능을 이용해서 보여지는 도형의 모양이 각각 다르게 나오게 하고싶습니다. (Chat gpt를 이용하여 작성을 하면서 이해를 했고, 이상한 부분이 안보이고 Chatgpt 도 제자리걸음만 해서 질문 올리게 되었습니다. )

아래는 제 xaml코드의 일부입니다.

<Window.Resources>
    <!-- 도형을 표시하기 위한 DataTemplate 정의 -->
    <DataTemplate x:Key="ShapeTemplate">
        <ContentControl >
            <ContentControl.Style>
                <Style TargetType="{x:Type ContentControl}">
                    <Style.Triggers>
                        <!-- Rectangle -->
                        <DataTrigger Binding="{Binding Tag}" Value="Rectangle_1">
                        <Setter Property="Content">
                                <Setter.Value>
                                    <Rectangle Fill="Yellow" Stroke="Yellow"  Width="20" Height="20"/>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                        <!-- Ellipse -->
                        <DataTrigger Binding="{Binding Tag}" Value="Rectangle_2">
                            <Setter Property="Content">
                                <Setter.Value>
                                    <Rectangle Stroke="Yellow" Width="20" Height="20"/>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                         </Style.Triggers>
                </Style>
            </ContentControl.Style>
        </ContentControl>
    </DataTemplate>
</Window.Resources>
<Grid>
    <DataGrid x:Name="dataGrid" AutoGenerateColumns="False" CanUserAddRows="False">
        <DataGrid.Columns>
            <!-- 문자열 칼럼 -->
            <DataGridTextColumn Header="Column 1" Binding="{Binding StringValue1}"/>
            <DataGridTextColumn Header="Column 2" Binding="{Binding StringValue2}"/>
            <!-- 도형을 표시하는 칼럼 -->
            <DataGridTemplateColumn Header="Shapes" CellTemplate="{StaticResource ShapeTemplate}"/>
        </DataGrid.Columns>
    </DataGrid>
    <Button Content="버튼 요기" Click="Connect" Margin="654,325,36,51"/>
</Grid>

1
1809×556 13.3 KB

20231221_135640
20231221_135654
20231221_135654762×438 7.76 KB

위는 제 MainWindow.xaml.cs 쪽 파일입니다.

위의 코드를 실행하면 아래와 같이 도형이 두 개의 행에만 채워져서 보여집니다.(그림1)
그런데 이상한건 다른 행을 더블클릭하면 해당 행이 보여지면서 총 두 개만 띄워지는겁니다.(그림2)

20231221_135850
20231221_135850786×443 18.1 KB

20231221_135939
20231221_135939786×443 18.1 KB

xaml의 데이터트리거 할 시 이런 문제가 생깁니다… 어떻게 해결해야 할까요???
전 xaml의 데이터트리거를 이용해서 구현하고 싶습니다.

1개의 좋아요
2

{Binding Tag} 대신
{Binding Tag, RelativeSource={RelativeSource TemplatedParent}} 로 한번 수정해보시겠습니까?

엉뚱한 답을 했네요

image
원하시는 결과물인 듯 한데
다른방식으로 구현해보았습니다. 좀만 더해보고 넣어드릴게요

<Window.Resources>
    <Style x:Key="ShapeTemplate" TargetType="{x:Type DataGridCell}">
        <Style.Triggers>
            <!--  Rectangle  -->
            <DataTrigger Binding="{Binding Tag}" Value="Rectangle_1">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Rectangle
                                Width="20"
                                Height="20"
                                Fill="Yellow"
                                Stroke="Yellow" />
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </DataTrigger>
            <!--  Ellipse  -->
            <DataTrigger Binding="{Binding Tag}" Value="Rectangle_2">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Ellipse
                                Width="20"
                                Height="20"
                                Stroke="Yellow" />
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <DataGrid
        x:Name="dataGrid"
        AutoGenerateColumns="False"
        CanUserAddRows="False">
        <DataGrid.Columns>
            <!--  문자열 칼럼  -->
            <DataGridTextColumn Binding="{Binding StringValue1}" Header="Column 1" />
            <DataGridTextColumn Binding="{Binding StringValue2}" Header="Column 2" />
            <!--  도형을 표시하는 칼럼  -->
            <DataGridTemplateColumn CellStyle="{StaticResource ShapeTemplate}" Header="Shapes" />
        </DataGrid.Columns>
    </DataGrid>
    <Button
        Margin="654,325,36,51"
        Click="Connect"
        Content="버튼 요기" />
</Grid>

CellTemplate 대신 CellStyle 변경하고 Resource의 경우 DataTemplate 대신 Style로 변경하였더니
정상적으로 동작되네요~

CellTemplate의 경우와 CellStyle의 차이점은 좀 더 찾아봐야할거 같네요

요약하자면 CellStyle의 경우 간단하게 변경용도(Backgroud, Foreground 등), CellTemplate의 경우엔 셀 동작을 변경하는데 제공한다고 합니다.

DataTemplate으로 유지하신다는 과정에서도 다시 작성해드립니다.

<DataTemplate x:Key="ShapeTemplate">
    <ContentControl>
        <ContentControl.Style>
            <Style TargetType="{x:Type ContentControl}">
                <Style.Triggers>
                    <!--  Rectangle  -->
                    <DataTrigger Binding="{Binding Tag}" Value="Rectangle_1">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ContentControl}">
                                    <Rectangle
                                        Width="20"
                                        Height="20"
                                        Fill="Yellow"
                                        Stroke="Yellow" />
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                    <!--  Ellipse  -->
                    <DataTrigger Binding="{Binding Tag}" Value="Rectangle_2">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ContentControl}">
                                    <Rectangle
                                        Width="20"
                                        Height="20"
                                        Stroke="Yellow" />
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ContentControl.Style>
    </ContentControl>
</DataTemplate>

Template으로 처리해서 다시 지우니 정상적으로 동작되네요;;;
Content에 넣었기 때문에 발생한 문제지 않을까 조심스럽게…얘기합니다…

3개의 좋아요
3 
<Style TargetType="{x:Type ContentControl}">
    <Style.Triggers>
        <!-- Rectangle -->
        <DataTrigger Binding="{Binding Tag}" Value="Rectangle_1">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Rectangle Fill="Yellow" Stroke="Yellow"  Width="20" Height="20"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </DataTrigger>
        <!-- Ellipse -->
        <DataTrigger Binding="{Binding Tag}" Value="Rectangle_2">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Rectangle Stroke="Yellow" Width="20" Height="20"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </DataTrigger>
         </Style.Triggers>
</Style>

설명하신 상황이 어떤 증상인지 제대로 이해가 되지 않지만,
답변을 드리자면 Setter안에 있는 Rectangle이 단일 인스턴스로 생성되어 Visual 객체로 동작하고 있는걸로 보입니다.

Content속성에 값을 직접 지정하는 대신 ContentTemplate에 DataTemplate을 지정해서 사용해 보시죠.

2개의 좋아요
4

와우… 진짜 완전 감사합니다 !!
감사드립니다!

1개의 좋아요
5

넵! 의견 알려주셔서 감사합니다 !
시간 내주셔서 감사합니다!

1개의 좋아요